Flutter-Tutorials: Von den Dart-Grundlagen bis zum Release
Dart-Grundlagen, Widget-Baum, Layout, Navigation, asynchrone Daten, State Management und Animationen. Jede Lektion verbindet eine kurze Erklärung mit lauffähigem Code, die meisten enthalten ein Live-Beispiel in DartPad. Wer bei null anfängt, liest die Artikel am besten in der Reihenfolge unten.
57 Artikel
Dart-Grundlagen
- Dart: Typumwandlungen und statische VariablenSichere Umwandlung zwischen String und Zahl in Dart, int vs. double, as und is sowie der richtige Einsatz von static – mit den häufigsten Anfängerfehlern.
- Dart Enum und Composition: Code sauber organisierenEnums mit Feldern und Methoden in Dart 3, vollständige Prüfung per Switch-Ausdruck und Composition als Hat-ein-Beziehung – mit Beispielen und typischen Fehlern.
- Dart: Vererbung und Polymorphie – die Eltern-Kind-BeziehungVererbung in Dart mit extends, super und @override, Polymorphie, abstrakte Klassen, sichere Typprüfung und die Klassenmodifikatoren sealed, final und base.
- Dart: Interface und implements richtig einsetzenVerträge mit implements in Dart, interface class und abstract interface class aus Dart 3, der Unterschied zu Mixins mit with und Beispiel für testbaren Code.
- Dart-Collections: List, Set und Map (HashSet, HashMap)Wann List, Set oder Map in Dart passt, der Unterschied zu HashSet und HashMap, hashCode für Gleichheit, Sortieren, Filtern und Collections in Flutter.
- Fehlerbehandlung in Dart: try-catch und asynchrone AbläufeGezieltes try-catch mit on, rethrow, eigene Exceptions, Future, async/await, Timeouts, paralleles Warten und sicheres setState in Flutter mit Dart.
Einstieg in Flutter
- Erste Schritte in der mobilen App-Entwicklung mit FlutterFlutter von null an: Installation im Überblick, flutter doctor, erstes Projekt erstellen und starten, Projektstruktur, Hot Reload und der weitere Lernweg.
- Einführung in Flutter: Widget-Baum, Row, Column und StackNach Dart bin ich endlich zu Flutter gewechselt. Am ersten Tag lerne ich den Widget-Baum sowie die Strukturen Row, Column und Stack.
- Flutter: Eigene Widgets erstellenEigene Widgets in Flutter: const-Konstruktoren und super.key, Pflicht- und optionale Parameter, Widget-Klasse oder Hilfsmethode sowie häufige Fehler.
- Flutter-Lebenszyklus: StatefulWidget und AppLifecycleStateDie Lebenszyklus-Methoden von StatefulWidget und die Verwaltung des App-Lebenszyklus in Flutter verstehen: initState, dispose, didUpdateWidget und setState.
Layout und Größen
- Flutter: Das Center-Widget im DetailCenter und Align im Vergleich, warum Center den Platz ausfüllt, widthFactor, warum es in einer Column nicht vertikal zentriert, und typische Fehler.
- Flutter: Feine Ausrichtung mit dem Align-WidgetPräzise Platzierung mit Align: Koordinatensystem Alignment(x, y), FractionalOffset, widthFactor und heightFactor, Align oder Positioned im Stack, Fehler.
- Flutter: Innenabstände mit Padding steuernAlle EdgeInsets-Konstruktoren, EdgeInsetsDirectional für RTL, SafeArea und Tastatur-Insets, typische Fehler mit Overflow oder Absturz, ein Login-Formular.
- Flutter: Größen und Abstände mit SizedBoxSizedBox für feste Größen und Lücken: expand, shrink und square, der Unterschied zu Container, warum Ihre Größe ignoriert wird und typische Fehler.
- Flutter: Platz ausfüllen mit dem Expanded-WidgetExpanded im Detail: Wie der flex-Anteil berechnet wird, Verschachtelung, warum es nur in Row und Column funktioniert und die drei häufigsten Fehler.
- Flutter: Flexible Abstände mit dem Spacer-WidgetWas in Spacer steckt, Abstände mit flex gewichten, der Unterschied zu SizedBox und mainAxisAlignment und warum Spacer in scrollbaren Bereichen scheitert.
- Flutter: Expanded, Flexible und Spacer im VergleichDer Unterschied zwischen Expanded, Flexible und Spacer, loose und tight fit, dazu vier Rezepte: Werkzeugleiste, Kartenfußzeile, Formular, geteilter Screen.
- Flutter: Platz und Ausrichtung mit mainAxisSize steuernmax und min bei mainAxisSize, der Einfluss der Constraints, warum mainAxisAlignment scheinbar nichts tut, und Rezepte für Dialoge, Sheets und Button-Gruppen.
- Flutter: Widgets überlagern mit Stack und PositionedStack und Positioned in Flutter: wie ein Stack seine Größe bestimmt, fit, alignment, clipBehavior, Positioned.fill, PositionedDirectional, Badge und Overlays.
- Flutter: Bildschirmabhängige Skalierung mit MediaQueryGrößen nach Bildschirm mit MediaQuery.sizeOf, paddingOf und textScalerOf; wann LayoutBuilder oder FractionallySizedBox besser passt und häufige Fehler.
- Flutter: Bildschirmabhängiges Design mit LayoutBuilderLayoutBuilder oder MediaQuery, Breakpoints nach den Material-3-Fenstergrößenklassen, Maximalbreite für Inhalte, Fehler bei unbegrenzter Höhe und Intrinsics.
Basis-Widgets und Eingaben
- Flutter: Bilder einbinden – Assets und Image.assetBilder in ein Flutter-Projekt einbinden: pubspec.yaml, Image.asset, Auflösungsordner, SVG, Netzwerkbilder und die häufigsten Fehler bei Assets.
- Flutter: Card-Widget und Einsatz im DesignCard in Flutter: Material-3-Varianten Card.filled und Card.outlined, clipBehavior bei Bildern, antippbare Karten mit InkWell und typische Fehler.
- Flutter: Eingabe-Widgets und StatusanzeigenWann Switch, Checkbox, Radio, Slider und SegmentedButton in Flutter passen – dazu Fortschrittsanzeigen, häufige Fehler und ein Einstellungsbildschirm.
- Flutter: TextField und TextEditingController verwendenTextField in Flutter: TextEditingController und dispose, InputDecoration, Tastaturtypen, inputFormatters, Passwortfelder, FocusNode und onChanged im Vergleich.
- Flutter: Form-Widget und EingabevalidierungForm und TextFormField in Flutter: validate() vs. save(), autovalidateMode, Fokussteuerung, Controller sauber entsorgen und ein komplettes Login-Formular.
- Flutter: DropdownButton verwenden und EigenschaftenDropdownButton und DropdownButtonFormField in Flutter, das Material-3-DropdownMenu, abhängige Dropdowns und die Lösung des value-Fehlers.
- Flutter: Datums- und Zeitauswahl (DatePicker & TimePicker)Flutter showDatePicker und showTimePicker: Datumsbereiche, deutscher Kalender, context.mounted, Terminszenario und der Fehler mit dem verrutschten Tag.
- Flutter: GestureDetector verwenden und Touch-EreignisseTippen, Ziehen und Pinch mit dem GestureDetector in Flutter: Unterschied zu InkWell, HitTestBehavior, häufige Fehler und ein zoombares Foto als Beispiel.
- Flutter: FloatingActionButton (FAB) verwendenFlutter FloatingActionButton: M3-Größen, Extended FAB, Positionierung, Ausblenden beim Scrollen, der heroTag-Konflikt und ein Erinnerungs-Screen als Beispiel.
Rückmeldungen und Menüs
- Flutter: SnackBar und SnackBarAction verwendenSnackBar mit ScaffoldMessenger in Flutter: Rückgängig-Aktion, Floating-Stil, Warteschlangen-Problem und Context-Fehler nach await.
- Flutter: AlertDialog verwenden und anpassenAlertDialog in Flutter: Bestätigung, Eingabe und adaptive Dialoge – mit Lösungen für context.mounted, StatefulBuilder und Overflow.
- Flutter: PopupMenuButton verwenden und MenüstrukturenPopupMenuButton in Flutter für Drei-Punkte-Menüs: typsichere Enums, onSelected oder onTap, ein Listen-Szenario und typische Fehler.
- Flutter: BottomSheet und showModalBottomSheetshowModalBottomSheet in Flutter: Werte zurückgeben, isScrollControlled, useSafeArea, showDragHandle, Tastatur, DraggableScrollableSheet und persistente Sheets.
App-Struktur und Navigation
- Flutter: AppBar-Widget und AnpassungAppBar in Flutter richtig einsetzen: title, leading, actions und bottom, der Farbwechsel beim Scrollen in Material 3 und Lösungen für häufige Fehler.
- Navigation und Datenübergabe zwischen Seiten in FlutterSeitenwechsel, Datenübergabe und Back-Stack mit dem Flutter-Navigator: push, pop, pushReplacement und das aktuelle PopScope für den Zurück-Button.
- Flutter: BottomNavigationBar verwendenFlutter BottomNavigationBar: currentIndex im State, Seitenzustand mit IndexedStack, fixed vs. shifting und ein Warenkorb-Badge.
- Flutter: BottomNavigationBar im Vergleich zu NavigationBarVon BottomNavigationBar zur Material-3-NavigationBar: Zuordnungstabelle, labelBehavior, NavigationBarThemeData, Entscheidungshilfe und adaptive Shell.
- Flutter: TabBar und TabBarView verwendenTabBar und TabBarView in Flutter: DefaultTabController oder eigener TabController, Tab-Zustand erhalten, Material-3-Einstellungen und häufige Fehler.
- Flutter: Drawer-Widget und SeitenmenüSeitenmenü mit Flutter Drawer: Grundaufbau, NavigationDrawer aus Material 3, Menü vor dem Navigieren schließen und der Scaffold.of-Kontextfehler.
- Flutter: Helles und dunkles Theme mit ThemeDataEin Flutter-Theme mit ThemeData aufbauen: ColorScheme.fromSeed, helles und dunkles Theme, ThemeMode, Theme.of, TextTheme, Komponenten-Themes, ThemeExtension.
Listen und Scrollen
- Flutter: SingleChildScrollView, ListView und NestedScrollViewSingleChildScrollView, ListView und NestedScrollView im Vergleich, Overflow bei offener Tastatur, der Expanded-Höhenfehler und NestedScrollView mit Tabs.
- Flutter: ListView-Widget verwendenFlutter-ListView-Leitfaden: Lazy Loading mit builder, separated, itemExtent, was shrinkWrap wirklich kostet und die Lösung für den Unbounded-Height-Fehler.
- Flutter: GridView-Widget verwendenFlutter-GridView-Leitfaden: count, extent und builder, die beiden Grid-Delegates, der childAspectRatio-Overflow-Fehler und die wahren Kosten von shrinkWrap.
- Flutter: SliverAppBar für Kategorie-Header und SuchfelderSliverAppBar: Suchfeld in bottom oder flexibleSpace, fixierte Kategorie-Chips mit SliverPersistentHeader, pinned/floating/snap und der RenderSliver-Fehler.
Asynchrone Daten und State Management
- Flutter: Asynchrone Listen mit FutureBuilderFutureBuilder in Flutter: Snapshot-Zustände richtig lesen, der Fehler „Future in build erzeugen“, die Lösung mit initState und Aktualisieren per setState.
- Flutter: HTTP-Anfragen und REST-APIsGET, POST, PUT und DELETE mit dem http-Paket in Flutter, JSON in Modellklassen, Statuscodes, Timeouts sowie Lade- und Fehlerzustände mit FutureBuilder.
- Flutter: Echtzeit-Datenströme mit StreamBuilderStreamBuilder in Flutter: connectionState bei Streams, initialData, Broadcast vs. Single-Subscription, StreamController schließen, listen() im Vergleich.
- Flutter: State Management mit ProviderState Management mit dem Paket Provider in Flutter: ChangeNotifier, Consumer, MultiProvider und Best Practices.
- Flutter: Modernes State Management mit Riverpod 3State Management in Flutter mit Riverpod 3: Notifier, AsyncNotifier, ref.watch und ref.read, family, autoDispose und Hinweise zum Umstieg von StateNotifier.
- Flutter: Lokale Datenspeicherung mit SharedPreferencesTheme und Einstellungen mit shared_preferences speichern: SharedPreferencesAsync, WithCache und alte API im Vergleich, Migration und was nicht hineingehört.
Animationen
- Flutter: Maximale Wirkung mit impliziten AnimationenMit AnimatedContainer, AnimatedOpacity, AnimatedPositioned und weiteren impliziten Animations-Widgets fast ohne Code animieren.
- Flutter: Explizite Animationen mit AnimationControllerMit AnimationController, Tween und AnimatedBuilder professionelle Animationen in Flutter erstellen. Alle Details zu expliziten Animationen.
- Flutter: Hero-Animationen und SeitenübergängeFlutter-Hero-Animationen: Tag-Zuordnung, Dauer und Kurve des Flugs, flightShuttleBuilder, typische Fehler und eigene Seitenübergänge mit PageRouteBuilder.
Release und Notizen aus echten Projekten
- App-Icons in Flutter erstellen und einrichtenWie fügen Sie Ihrer Flutter-App eigene Icons für Android und iOS hinzu? Automatische Icon-Erzeugung mit dem Paket flutter_launcher_icons.
- Flutter-Kamera ohne erzwungene Ausrichtung: drei Fehler und ihre LösungenGedrehte Vorschau, Einfrieren beim Aufnahmestart, tote Kamera: drei Flutter-Kamerafehler aus Recapday und der Code, der sie behoben hat.
