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.
61 Artikel
Dart-Grundlagen
- Dart: Typumwandlungen und statische VariablenBeim Einstieg in Flutter lerne ich die Dart-Grundlagen. Hier teile ich, was ich heute über Typumwandlungen und statische Variablen gelernt habe.
- Dart Enum und Composition – wie organisiert man Code?Meine Dart-Lernreise geht weiter. Heute habe ich Enums und Composition gelernt – erklärt an Beispielen aus dem echten Leben.
- Dart: Vererbung und Polymorphie – die Eltern-Kind-BeziehungVererbung und Polymorphie lernen, zwei der wichtigsten OOP-Konzepte – und was mit extends, override und super möglich ist.
- Dart Interface und implements – Klassen um Fähigkeiten erweiternLernen, wie wir unseren Klassen mit abstrakten Klassen und dem Schlüsselwort implements zusätzliche Fähigkeiten geben.
- Dart Collections: Datenverwaltung mit List, HashSet und HashMapMit Datenstrukturen in Dart arbeiten lernen: die Unterschiede und Einsatzfälle von List, HashSet und HashMap.
- Fehlerbehandlung in Dart: try-catch und asynchrone AbläufeFehlerbehandlung mit try-catch und asynchrone Programmierung mit async/await in Dart lernen – samt der Konzepte Future und await.
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 DetailObjekte mit dem Center-Widget zentrieren und Center in unterschiedlichen Szenarien einsetzen.
- Flutter: Feine Ausrichtung mit dem Align-WidgetDetaillierte Ausrichtung und Alignment-Werte relativ zum umgebenden Bereich mit dem Align-Widget.
- Flutter: Innenabstände mit Padding steuernMit dem Padding-Widget Innenabstände um Widgets erzeugen und EdgeInsets richtig einsetzen.
- Flutter: Größen und Abstände mit SizedBoxMit dem SizedBox-Widget Größen festlegen und unsichtbare Abstände erzeugen.
- 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-WidgetMit dem Spacer-Widget flexible Abstände in Row und Column erzeugen – und worauf Sie dabei achten müssen.
- Flutter: Expanded, Flexible und Spacer im VergleichLernen Sie den Unterschied zwischen Expanded, Flexible und Spacer in Flutter kennen, um Layoutprobleme zu vermeiden und die Platzverteilung sicher zu steuern.
- Flutter: Layout steuern mit Expanded, Flexible und SpacerVier fertige Rezepte mit Expanded, Flexible und Spacer: Werkzeugleiste, Kartenfußzeile, Formularzeilen und ein responsiver geteilter Bildschirm.
- Flutter: Platzsteuerung mit mainAxisSizemainAxisSize legt fest, wie viel Platz Row und Column auf der Hauptachse belegen. max und min, der Einfluss der Constraints und typische Fehler.
- Flutter: Ausrichtung von Row und Column mit mainAxisSize steuernmainAxisAlignment.center gesetzt und nichts passiert? So spielen mainAxisSize, mainAxisAlignment und crossAxisAlignment in Row und Column zusammen.
- Flutter: Kompakte Dialoge und Button-Gruppen mit mainAxisSizeFüllt Ihr Dialog den ganzen Bildschirm? Fertige Rezepte, die Dialoge, Bottom Sheets und Button-Gruppen mit mainAxisSize.min auf den Inhalt schrumpfen.
- 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 LayoutBuilderMit dem LayoutBuilder-Widget dynamische und responsive Layouts für unterschiedliche Bildschirmgrößen erstellen.
- Flutter: Responsives Breakpoint-Design mit LayoutBuilderMit LayoutBuilder und einem breakpointbasierten Ansatz responsive Flutter-Oberflächen für Mobil, Tablet, Desktop und Web bauen.
Basis-Widgets und Eingaben
- Flutter: Bilder einbinden – Assets und Image.assetBilder ins Flutter-Projekt aufnehmen, die pubspec.yaml konfigurieren und das Widget Image.asset verwenden.
- 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: 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.
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 FlutterDen Navigator in Flutter für Seitenwechsel, Datenübergabe und die Verwaltung des Back-Stacks nutzen: die Methoden push, pop und pushReplacement.
- Flutter: BottomNavigationBar verwendenFlutter BottomNavigationBar: currentIndex im State, Seitenzustand mit IndexedStack erhalten, fixed vs. shifting, verschwindende Einträge und ein Warenkorb-Badge.
- Flutter: BottomNavigationBar im Vergleich zu NavigationBarDie klassische BottomNavigationBar mit der NavigationBar aus Material 3 vergleichen und das passende Muster für die untere Navigation in Flutter-Apps wählen.
- 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.
Listen und Scrollen
- Flutter: SingleChildScrollView und ScrollView verwendenFlutter-SingleChildScrollView-Leitfaden: wann Column plus ScrollView richtig ist, der Overflow-Fehler bei geöffneter Tastatur, das Expanded-Problem und die IntrinsicHeight-Lösung.
- 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: SingleChildScrollView, ListView, NestedScrollViewScroll-Widgets in Flutter vergleichen, Performance-Kompromisse verstehen und Probleme mit verschachteltem Scrollen durch die richtige Widget-Wahl lösen.
- Flutter: SliverAppBar für fixierte Header und SuchleistenMit SliverAppBar in Flutter moderne Header bauen, die einklappen, oben fixiert bleiben und eine Suchleiste enthalten.
- Flutter: SliverAppBar für Kategorie-Header und SuchfelderMit SliverAppBar Kategorie-Header, Suchfelder und fixierte Kopfbereiche für scrollbasierte Flutter-Screens bauen.
Asynchrone Daten und State Management
- Flutter: Asynchrone Listen mit FutureBuilderFutureBuilder in Flutter verwenden, async/await mit Widgets verbinden und asynchrone Daten mit ListView und GridView auflisten.
- Flutter: Echtzeit-Datenströme mit StreamBuilderStreamBuilder in Flutter verwenden, der Unterschied zwischen Stream und Future, Echtzeit-Datenströme und eigene Streams mit StreamController.
- Flutter: State Management mit ProviderState Management mit dem Paket Provider in Flutter: ChangeNotifier, Consumer, MultiProvider und Best Practices.
- Flutter: Modernes State Management mit RiverpodState Management mit dem Paket Riverpod in Flutter: Provider und Riverpod im Vergleich, StateNotifier, StateProvider und Best Practices.
Animationen
- Flutter: Maximale Wirkung ohne Aufwand 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ängeMachen Sie Ihre Flutter-App mit Hero-Animationen und eigenen Seitenübergängen flüssig: SlideTransition, FadeTransition und mehr.
- Flutter: Geschwindigkeit und Timing von Hero-AnimationenGeschwindigkeit, Dauer und Curve-Einstellungen von Hero-Animationen in Flutter steuern und so weichere, hochwertigere Seitenübergänge erzielen.
- Flutter: Fehler bei Hero-Animationen und Best PracticesSo vermeiden Sie doppelte Tags, Material-Konflikte und abbrechende Übergänge bei Hero-Animationen in Flutter.
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ösungenEine gedrehte Vorschau, ein Einfrieren beim Aufnahmestart und eine tote Kamera nach dem Öffnen der Mitteilungszentrale. Die drei konkreten Fehler beim Bau des Kamerabildschirms von Recapday in Flutter — und der Code, der sie behoben hat.
- Firebase Auth mit eigenem PHP-Server: Token-Prüfung und Kontolöschung ohne ComposerIdentität bei Firebase, Daten auf dem eigenen Server. Wie entscheidet PHP, dem eingehenden Token zu trauen? RS256-Prüfung auf Shared Hosting ohne Composer — und der Kontolöschungs-Ablauf, den beide App-Stores verlangen.
- Videos auf dem Handy mit ffmpeg zusammenfügen: gemischte Seitenverhältnisse in einem VlogMal hochkant, mal quer, mal ein Foto. Wie Recapday diese Mischung auf dem Handy statt auf einem Server zu einem einzigen 1920x1080-Vlog macht: unscharfe Ränder, Texteinblendungen mit Sonderzeichen, Musik und eine tatsächlich gemessene Kompression.
