Flutter und Dart 2026 leicht gemacht: Der komplette Einstieg in Köln

• Tag 1: Erste Schritte mit Flutter und Dart
• 1. Was ist Flutter und Dart?
  • Flutter als Werkstatt von Google für Mobile-Apps
  • Dart als die Sprache hinter Flutter
  • Warum eine Code-Basis für iPhone und Android genug ist
  • Was Flutter alles kann: Telefon, Tablet, Desktop, Web
  • Wer Flutter nutzt: bekannte deutsche Apps
  • Wann Flutter die richtige Wahl ist - einfach erklärt
  • Stand 2026: Flutter 3.35 und Dart 3.7

• 2. Werkstatt einrichten
  • Was auf das Notebook installiert wird: Flutter-SDK, Android Studio oder VS Code
  • Schritt-für-Schritt-Anleitung für Windows, macOS und Linux
  • Den Emulator einrichten (das ist ein simuliertes Telefon auf dem Bildschirm)
  • Das eigene Telefon als Test-Gerät verbinden
  • Der erste Befehl: ein neues Projekt anlegen
  • Häufige Stolperfallen und ihre Lösungen

• 3. Die erste App
  • Eine fertige Vorlage anschauen und ausprobieren
  • Im Emulator starten
  • Auf dem eigenen Telefon starten
  • Hot Reload: Änderungen sofort sehen (das ist eine Stärke von Flutter)
  • Erste eigene Anpassung am Text und an der Farbe

• 4. Dart-Grundlagen einfach erklärt
  • Variablen für Werte (Text, Zahlen, Wahrheits-Werte)
  • Funktionen als wieder verwendbare Stücke Code
  • Klassen für eigene Daten-Strukturen
  • Listen für mehrere Werte
  • Bedingungen (wenn-dann)
  • Schleifen (etwas mehrmals tun)
  • Asynchronität in einfacher Form (auf Antwort warten)
  • Was Dart einfacher macht als andere Sprachen

• Praxis-Übung Tag 1: Eine Hallo Welt"-App mit Anpassung
• Aus der fertigen Vorlage eine eigene App machen: Anrede ändern, Farbe ändern, einen zweiten Text hinzufügen. Auf dem Emulator und (falls möglich) auf dem eigenen Telefon ansehen. Ergebnis: erste lauffähige eigene App.
• Tag 2: Komponenten und Layouts
• 5. Was sind Widgets?
  • Widget als Bau-Stein der App
  • Alles in Flutter ist ein Widget: Text, Button, Bild, ganze Bildschirme
  • Wie Widgets ineinander gesteckt werden (Baum-Struktur)
  • Stateless versus Stateful: Widgets, die sich nie ändern, und solche, die sich ändern
  • Erste eigene Widgets schreiben

• 6. Text, Bilder, Buttons
  • Text anzeigen mit Größe, Farbe, Schrift-Stil
  • Bilder einbinden (lokal und aus dem Internet)
  • Buttons mit Aktionen (Klick verarbeiten)
  • Icons als kleine Symbole
  • Eingabe-Felder für Anwender-Eingaben

• 7. Layouts: Spalten, Zeilen, Container
  • Spalten (Column): mehrere Elemente untereinander
  • Zeilen (Row): mehrere Elemente nebeneinander
  • Container: ein Rahmen mit Abstand, Hintergrund-Farbe und mehr
  • Stapel (Stack): Elemente übereinander legen
  • Wie Layouts ineinander geschachtelt werden
  • Abstände und Ausrichtung

• 8. Stile, Farben und Material 3
  • Farben für die ganze App festlegen
  • Schrift-Größen einheitlich machen
  • Material 3 als modernes Design-System von Google
  • Helles und dunkles Erscheinungs-Bild (Light Mode und Dark Mode)
  • Erste eigene Theme-Anpassung

• Praxis-Übung Tag 2: Eine schöne Profil-Karte bauen
• Eine Karten-Komponente mit Bild, Name, Beruf und einem Button entwerfen. Mit Spalten, Zeilen, Container und Stilen arbeiten. Helle und dunkle Variante anbieten. Ergebnis: optisch ansprechende Profil-Karte als wieder verwendbare Komponente.
• Tag 3: Anwendung mit mehreren Bildschirmen
• 9. Mehrere Bildschirme und Navigation
  • Wie eine App mehrere Bildschirme haben kann
  • Den Wechsel zwischen Bildschirmen programmieren
  • Werte von einem Bildschirm zum nächsten übergeben
  • Den Zurück-Knopf richtig behandeln
  • Eine Navigations-Leiste oben einrichten
  • Tab-Navigation am unteren Rand

• 10. Eingaben vom Anwender entgegennehmen
  • Text-Eingabe-Felder
  • Auswahl-Felder (Dropdown)
  • Schalter (Switch)
  • Datums-Auswahl
  • Eingaben prüfen (Validierung)
  • Tastatur-Verhalten

• 11. Zustand und Aktualisierung
  • Was Zustand bedeutet: Daten, die sich während der Anwendung ändern
  • StatefulWidget: ein Widget, dessen Inhalt sich ändert
  • setState: die App über eine Änderung informieren
  • Beispiel: ein Zähler, der bei Knopf-Druck hochzählt
  • Häufige Fehler-Quellen und ihre Lösungen
  • Erste Berührung mit komplexeren State-Konzepten als Ausblick

• 12. Listen anzeigen
  • Eine Liste von Daten darstellen
  • Lazy-Listen für viele Einträge (die App bleibt schnell)
  • Jeden Eintrag mit eigener Optik versehen
  • Auf einen Eintrag tippen, um zum Detail-Bildschirm zu gehen
  • Eintrag hinzufügen
  • Eintrag löschen
  • Liste sortieren

• Praxis-Übung Tag 3: To-Do-Liste mit Hinzufügen und Löschen
• Eine kleine To-Do-Liste-App bauen: Eingabe-Feld für neue Aufgaben, Liste mit allen Aufgaben, Knopf zum Hinzufügen, Wisch-Geste zum Löschen, Knopf zum Abhaken. Zwei Bildschirme: Übersicht und Detail. Ergebnis: vollständig nutzbare kleine App.
• Tag 4: Daten aus dem Internet und Veröffentlichung
• 13. Daten von einer API holen
  • Was eine API ist: einfache Erklärung
  • HTTP-Anfragen aus Flutter
  • Daten asynchron abrufen (auf Antwort warten)
  • Lade-Anzeige während des Wartens
  • Fehler-Behandlung (zum Beispiel kein Internet)
  • Eine echte öffentliche API ausprobieren (Wetter, Witze, Hunde-Bilder oder ähnlich)

• 14. JSON verstehen und nutzen
  • JSON als gängiges Datei-Format für Daten
  • JSON-Antworten in Dart-Objekte umwandeln
  • Eine Daten-Klasse für die eigenen Anwendungs-Daten anlegen
  • Häufige JSON-Stolperfallen

• 15. Bilder aus dem Internet anzeigen
  • Bild-URLs aus der API-Antwort verwenden
  • Bilder im Voraus laden (Caching)
  • Lade-Platzhalter während des Bild-Ladens
  • Anpassbare Bild-Darstellung (zugeschnitten, gestreckt, mittig)

• 16. App auf das eigene Telefon und Ausblick
  • Eine Build-Variante für Android bauen (APK-Datei)
  • Auf dem eigenen Android-Telefon installieren
  • Was für iPhone-Veröffentlichung anders ist (Apple-Konto, Provisioning, Apple-Computer)
  • Was Google Play und Apple App Store erwarten (kurze Übersicht)
  • Wo es weitergeht: Vertiefungs-Workshops bei GFU
  • Ein Blick auf KI-Anbindung, Animationen, Profi-Architektur

• Praxis-Übung Tag 4: Wetter-App mit Live-Daten
• Eine kleine Wetter-App bauen: Stadt-Name eingeben, Daten von einer öffentlichen Wetter-API holen, aktuelle Temperatur, Wetter-Lage und ein passendes Bild oder Icon anzeigen. Lade-Anzeige während des Wartens. Fehler-Anzeige bei falschem Stadt-Namen. Am Ende auf das eigene Telefon bringen. Ergebnis: erste echte" App mit Internet-Anbindung auf dem eigenen Gerät.

LernzieleJede teilnehmende Person verlässt das Seminar mit einer ersten Hallo Welt"-App aus Praxis-Übung Tag 1, einer schönen Profil-Karte aus Praxis-Übung Tag 2, einer To-Do-Liste-App aus Praxis-Übung Tag 3, einer Wetter-App mit Internet-Anbindung auf dem eigenen Telefon aus Praxis-Übung Tag 4, einem klaren Verständnis von Dart als Sprache und Flutter als Werkstatt, einer praktischen Sicht auf Widgets, Layouts, Navigation, Eingaben und Listen, einem Verständnis für Daten aus dem Internet und JSON, einem klaren nächsten Schritt zur Vertiefung im GFU-Flutter-Lern-Pfad sowie der Erfahrung, eine eigene App auf dem eigenen Gerät selbst gebaut zu haben.Zielgruppen

• Einsteiger in die mobile Entwicklung: Die zum ersten Mal eine App für iPhone oder Android bauen wollen.
• Quereinsteiger aus dem Web oder Backend: Die ihre Programmier-Erfahrung für mobile Apps nutzen wollen.
• Studenten und junge Profis: Die einen klaren Einstieg mit ruhigem Tempo suchen.
• Mitarbeitende mit Programmier-Vorwissen: Die für ein Pilot-Projekt im Team eine App bauen sollen.
• Tech-Begeisterte mit eigener App-Idee: Die einen geführten Weg vom Konzept zur ersten App suchen.

Voraussetzungen: Grundlegende Programmier-Erfahrung in irgendeiner Sprache (Java, Python, JavaScript, C# oder ähnlich). Keine Mobile-Erfahrung nötig. Keine Erfahrung mit Flutter oder Dart nötig. Notebook mit Windows, macOS oder Linux. Internet-Verbindung für die Werkstatt im Seminarraum. Eigene App-Idee als Diskussions-Gegenstand willkommen.