Flutter für Einsteiger: Schulung für iOS, Android, Web, Desktop

Dart, so weit Flutter es braucht

• Die Funktion main() und runApp(): wo eine Flutter-App startet
• Zahlen und Strings in Widgets: int, double, Interpolation in Text
• bool, List und Map als Datenquelle für Oberflächen
• Typinferenz mit var, unveränderliche Werte mit final und const, dynamic vermeiden
• Null Safety im Widget-Code: String?, ?? und required-Parameter
• Funktionen mit benannten Parametern – das Muster aller Widget-Konstruktoren
• Klassen, Konstruktoren und const-Konstruktoren für Widgets
• Vertiefung der Sprache im Seminar Dart Programmierung Einstieg

Flutter einrichten und die erste App

• Dokumentation, Widget-Katalog, Cookbook und DartPad als Ressourcen nutzen
• Flutter-SDK unter macOS und Windows installieren, flutter doctor auswerten
• Android Studio mit Flutter-Plugin, Android-SDK und Emulator einrichten; Xcode für iOS
• Kanäle stable und beta, flutter upgrade und Versionen je Projekt mit FVM festlegen
• Hello World auf Emulator, Smartphone, Chrome und Desktop starten
• Projektaufbau: lib/, Plattformordner, test/, pubspec.yaml und analysis_options.yaml
• Die Counter-App Zeile für Zeile: MaterialApp, Scaffold, StatefulWidget
• Arbeiten in Android Studio: Run-Konfigurationen, Flutter Inspector, Debugger
• Alternative VS Code mit Flutter-Erweiterung, Flutter DevTools im Browser

Widgets und Layout

• Bausteine im Überblick: Material-3-Widgets, Cupertino-Widgets, Layout-Widgets
• Grundlegende Widgets: Text, Image, Icon, Container, Padding, SizedBox
• Platzierung mit Row, Column und Stack, mainAxisAlignment und crossAxisAlignment
• Verfügbaren Platz verteilen mit Flexible, Expanded und Spacer
• Eigene StatelessWidget-Komponenten herauslösen und mit Parametern wiederverwenden
• Dynamische Listen mit ListView.builder und ListTile
• Ein Bildschirmdesign in einen Widget-Baum zerlegen
• Weitere Zerlegungsübungen: Profilkarte, Nachrichtenliste, Eingabeleiste
• Constraints verstehen: BoxConstraints, Overflow-Fehler finden und beheben
• Abgerundete Elemente mit BorderRadius, ClipRRect und BoxDecoration

Interaktivität, Zustand und Navigation

• Was Zustand in Flutter ist und warum Widgets neu gebaut werden
• Das erste StatefulWidget mit State-Klasse und setState
• Konstruktorparameter des Widgets gegenüber Feldern der State-Klasse
• Entscheidungshilfe: wann zustandslos, wann zustandsbehaftet
• Lebenszyklus: initState, didUpdateWidget, dispose und Controller aufräumen
• Hot Reload, das den Zustand erhält, und wann Hot Restart nötig ist
• Buttons in Material 3: FilledButton, OutlinedButton, TextButton, IconButton
• Tippen, Wischen und langes Drücken mit GestureDetector und InkWell
• Formulare mit Form, TextFormField und Validatoren
• Mehrzeilige Textfelder mit maxLines, TextEditingController und Tastaturaktionen
• Zwischen Bildschirmen wechseln mit Navigator.push und pop
• Daten an eine Seite übergeben und Ergebnisse zurückgeben
• Benannte Routen in Bestandsprojekten und ihre Grenzen bei Deep Links
• Seiten ersetzen mit pushReplacement, z. B. nach dem Login
• Deklarative Navigation mit go_router: Pfade, Parameter, Weiterleitungen

pubspec, Pakete und Daten

• Farben und Stile zentral mit ThemeData, ColorScheme.fromSeed und Dark Mode
• Aufbau der pubspec.yaml: Abhängigkeiten, Versionsbereiche, Assets und Schriften
• pub.dev lesen: Pub Points, Plattformunterstützung, Herausgeber, Pflege
• Plugins mit nativem Code gegenüber reinen Dart-Paketen
• Pakete mit flutter pub add einbinden, auch aus Git oder lokalem Pfad
• Fachobjekte als unveränderliche Modellklassen mit copyWith modellieren
• Generische Typen wie List<Message> und Future<T> in eigenen Klassen
• JSON mit jsonDecode und fromJson/toJson umwandeln
• Testdaten als JSON-Asset mit rootBundle laden
• Callbacks: Kind-Widget löst über eine Funktion eine Aktion im Eltern-Widget aus

Asynchrone Daten und REST-APIs

• Future, async/await und Ladezustände in der Oberfläche
• REST-Grundlagen und Endpunkte vorab mit Postman oder einer HTTP-Datei testen
• JSON-Code mit json_serializable und build_runner erzeugen
• REST-API mit dem Paket http oder dio anbinden
• FutureBuilder und StreamBuilder für Daten, die noch unterwegs sind
• Repository-Muster: Datenzugriff von Widgets trennen
• Bildauswahl als GridView in einem showModalBottomSheet
• Ausgewähltes Bild mit image_picker als Vorschau in der Chat-Eingabe zeigen
• Fehler und Zeitüberschreitungen abfangen, Fehlermeldungen in der Oberfläche anzeigen

State-Management und responsive Oberflächen

• Warum setState nicht reicht, wenn mehrere Seiten denselben Zustand teilen
• Provider: ChangeNotifierProvider, context.watch und context.read
• ChangeNotifier und notifyListeners für eigene Zustandsklassen
• Riverpod als Weiterentwicklung von Provider: Provider ohne BuildContext, AsyncValue
• Antworten zwischenspeichern: im Speicher, mit shared_preferences oder lokaler Datenbank
• Statische Felder und verzögerte Initialisierung für Konfiguration und Dienste
• Startseite, die sich aus geladenen Daten und Nutzerzustand aufbaut
• Responsive Layouts mit LayoutBuilder, MediaQuery.sizeOf und Breakpoints für das Web

Testen, bauen und veröffentlichen

• Unit- und Widget-Tests mit flutter_test, pumpWidget und find
• Integrationstests auf Gerät oder Emulator mit integration_test
• Lint-Regeln mit flutter_lints und flutter analyze im Projekt
• Release-Builds: flutter build appbundle, flutter build ipa und flutter build web
• App-Symbol, App-Name, Signierung und Upload in Google Play Console und App Store Connect

Flutter-Apps mit einem Coding-Agenten entwickeln

• Agent liest über den Flutter-MCP-Server Laufzeitfehler und Widget-Baum der laufenden App
• flutter analyze und Widget-Tests als Abnahme, bevor ein generierter Bildschirm übernommen wird
• Projektregeln vorgeben: State-Management-Ansatz, go_router, Material 3, keine veralteten Widgets
• Overflow und Textskalierung: generierte Layouts mit kleinem Gerät und großer Schrift prüfen
• Neue Plugins mit nativem Code und Änderungen an android/ und ios/ nur nach Review

Praxisprojekt: Chat-App mit Bildversand

• Chatverlauf als ListView mit eigenen Nachrichtenblasen und Eingabeleiste
• Nachrichten über ein Repository von einer REST-API laden und senden, Zustand mit Riverpod
• Bild aus der Galerie anhängen, Vorschau in der Eingabe, Fehlerfall ohne Netz
• Widget-Test für die Eingabeleiste, Build als App-Bundle und als Web-App