Kurs für absolute Neulinge in Flutter - Lektionen Notizen

Kursübersicht

• Einführung in Flutter und Dart (2024)
• Behandelte Themen:
  • Komplexe UI und fortgeschrittene Dart-Konzepte
  • Klassenkonzepte
  • Konstruktorvererbung
  • Zustandslose vs. zustandsbehaftete Klassen
  • Wiederverwendbare Widgets
  • Umgang mit List und Map in Dart
  • JSON- und Map-Datenverarbeitung
  • Navigation und Routing
  • Zustandsverwaltungssysteme: GetX, BLoC und Riverpod

Kursstruktur

1. Einrichtung der Entwicklungsumgebung
   • Installation von VS Code, Flutter SDK und Android Studio
   • Einrichtung von Umgebungsvariablen
2. Erstellung von UI-Komponenten
   • Erstellung komplexer Benutzeroberflächen: Startseite, Suchseiten, Ticketseiten, Profilseiten
3. Navigation und Routing
   • Klickinteraktionen, die zu verschiedenen Bildschirmen in der App führen
   • Verständnis des Navigationsstapels in Flutter
4. Zustandsverwaltungs-Frameworks
5. Abschlussprojekt: Fertigstellung einer Flutter-App

Installationsprozess

• Schritt-für-Schritt-Installation (VS Code, Flutter SDK, Android Studio):
  • Öffnen Sie das VS Code-Terminal und führen Sie Flutter Doctor aus
  • Installation der Flutter- und Dart-Erweiterungen

UI-Erstellung

Benutzeroberfläche des Hauptbildschirms

• Widgets
  • Initialisierung der Haupt-App mit dem Widget Material app.
  • Erstellung der Startseite der App:
    • Implementierung verschiedener Widgets (Texte, Container, Zeilen)
    • Stilierung jedes Widgets gemäß den Designspezifikationen
• Material App
  • Scaffold: Hauptgestaltungsstruktur für die App
  • App-Bar: Implementierung einer konsistenten Navigationsleiste auf allen Bildschirmen

Arbeiten mit dynamischen Daten

• Verwendung von Listen und Karten für Daten:
  • Zugriff auf Daten aus JSON-Dateien
  • Interne Darstellung von Daten als Maps zur Verarbeitung

Zustandsverwaltung mit Flutter

• Verwendung der Zustände von GetX, BLoC und Riverpod zur Zustandsverwaltung der App.

Wiederverwendbare Komponenten

• Einführung in die Erstellung und Verwaltung wiederverwendbarer UI-Komponenten:
  • Beispiel für die Erstellung eines Text-Widgets auf Anwendungsebene zur Wahrung der Einheitlichkeit.

Navigation und Routing

• Widget Navigator: Verwaltung der Seitennavigation.
  • In der App-Konfiguration definierte Routen und Pfade (Aktivierung über Navigator push).
  • Übergabe von Argumenten zwischen Bildschirmen mit benannten Routen.

Benutzerdefinierte Bildlaufansichten und dynamische Listen

• Implementierung von Bildlaufansichten:
  • GridView Builder zur Darstellung einer rasterbasierten Benutzeroberfläche.
  • Slivers: Effiziente Verwaltung von Bildlaufbereichen auf dem Bildschirm.

Aufgabenstellungen

1. Erstellen und konfigurieren Sie eine ListView, um eine dynamische Liste von Elementen anzuzeigen.
2. Implementieren Sie ein wiederverwendbares Widget zur Anzeige benutzerdefinierter Daten (z.B. Ticketwerbung).
3. Fügen Sie eine Suchfunktion hinzu, die zu gefilterten Ansichten führt.
4. Aktualisieren Sie Stile und implementieren Sie konsistente Farbschemas auf allen Bildschirmen.
5. Effektive Verwaltung von Bildschirmübergängen und Rückwärtsnavigation.

Schlussbemerkungen

• Dieser Kurs bietet umfassende Informationen, die sich an absolute Anfänger richten.
• Projekte aus der Praxis, um kritische Verständnis- und Fähigkeiten aufzubauen.
• Durchgehende Unterstützung und Community-Engagement für Fragen und Debugging.