Teil 2: Das Fundament legen – Deine Flutter-Entwicklungsumgebung unter Windows einrichten

Hallo zurück zu unserer Flutter-Wetter-App-Serie!

In Teil 1 haben wir uns angesehen, was wir bauen wollen – eine Wetter-App mit aktuellen Daten, Verlauf, Prognose und sogar der Grünlandtemperatursumme – und warum eine Wetter-App ein großartiges Lernprojekt ist. Bevor wir jedoch die erste Zeile Code für unsere App schreiben können, brauchen wir das richtige Werkzeug und eine eingerichtete Werkstatt.

Genau das ist das Ziel dieses zweiten Teils: Wir legen heute das Fundament und richten deine Entwicklungsumgebung auf deinem Windows-Rechner ein. Keine Sorge, das klingt vielleicht erstmal nach viel, aber es ist ein einmaliger Prozess. Wir gehen alles Schritt für Schritt durch!

Was wir heute tun:

  1. Flutter SDK installieren: Das Herzstück, das alle nötigen Werkzeuge und Bibliotheken für Flutter enthält.
  2. Android Studio installieren: Auch wenn wir hauptsächlich mit VS Code arbeiten, brauchen wir Android Studio für wichtige Android-spezifische Werkzeuge (SDK, Emulator).
  3. flutter doctor ausführen: Unser Diagnose-Tool, das prüft, ob alles korrekt eingerichtet ist.
  4. Ein Testgerät einrichten: Entweder einen Emulator (ein virtuelles Handy) oder dein echtes Android-Smartphone vorbereiten.
  5. Visual Studio Code (VS Code) konfigurieren: Unseren bevorzugten Code-Editor mit den nötigen Flutter-Erweiterungen ausstatten.
  6. Das erste Flutter-Projekt erstellen und starten: Sicherstellen, dass die Standard-App läuft und unsere Umgebung bereit ist.

Los geht’s!

Schritt 1: Flutter SDK installieren

Das Flutter SDK (Software Development Kit) ist eine Sammlung von Werkzeugen, die es uns ermöglichen, Flutter-Anwendungen zu entwickeln und zu kompilieren.

  1. Download: Gehe zur offiziellen Flutter-Installationsseite für Windows: https://docs.flutter.dev/get-started/install/windows
    • Lade die neueste stabile Version des Flutter SDK als ZIP-Datei herunter (suche nach dem blauen Button „Download the latest stable release of the Flutter SDK“).
  2. Entpacken: Erstelle einen Ordner direkt auf deinem Laufwerk C: (oder einem anderen Laufwerk, wenn du möchtest), zum Beispiel C:\flutter\. Wichtig: Entpacke das Flutter SDK nicht in Ordner wie C:\Program Files\ oder C:\Program Files (x86)\, da diese oft spezielle Berechtigungen erfordern, die zu Problemen führen können.
    • Entpacke den Inhalt der heruntergeladenen ZIP-Datei in den neu erstellten C:\flutter\ Ordner. Du solltest jetzt einen Pfad wie C:\flutter\bin haben.
  3. PATH-Umgebungsvariable aktualisieren: Damit dein Computer weiß, wo er die Flutter-Befehle finden kann, müssen wir den Pfad zum bin-Ordner von Flutter zur sogenannten PATH-Umgebungsvariable hinzufügen.
    • Gib „Umgebungsvariablen“ in die Windows-Suche ein und wähle „Systemumgebungsvariablen bearbeiten“.
    • Klicke im neuen Fenster unten auf den Button „Umgebungsvariablen…“.
    • Suche im oberen Bereich („Benutzervariablen für [Dein Benutzername]“) die Variable Path. Wähle sie aus und klicke auf „Bearbeiten…“. (Wenn sie nicht existiert, klicke auf „Neu…“.)
    • Klicke auf „Neu“ und füge den vollständigen Pfad zu deinem Flutter bin-Ordner hinzu: C:\flutter\bin (passe dies an, falls du Flutter woanders entpackt hast).
    • Bestätige alle offenen Fenster mit „OK“.
    • Wichtig: Damit die Änderung wirksam wird, musst du alle bereits geöffneten Kommandozeilenfenster (Eingabeaufforderung oder PowerShell) schließen und neu öffnen. Manchmal ist sogar ein Neustart des PCs nötig.
  4. Überprüfung: Öffne eine neue Eingabeaufforderung (cmd) oder PowerShell und gib den Befehl ein:
    bash flutter --version
    Wenn alles geklappt hat, sollte Flutter dir nun seine Version und weitere Informationen anzeigen. Herzlichen Glückwunsch, Flutter ist installiert!

Schritt 2: Android Studio installieren (für Android SDK & Co.)

Auch wenn wir VS Code zum Schreiben unseres Codes verwenden, ist Android Studio unerlässlich, da es das Android SDK, die Build-Tools und den Emulator-Manager mitbringt.

  1. Download: Lade Android Studio von der offiziellen Seite herunter: https://developer.android.com/studio
  2. Installation: Führe die heruntergeladene .exe-Datei aus und folge dem Installationsassistenten. Wähle die Standardeinstellungen („Standard“ oder „Recommended“). Android Studio wird das neueste Android SDK, die SDK Platform-Tools und die SDK Build-Tools herunterladen und installieren.
    • Merke dir den Installationsort des Android SDKs. Normalerweise ist das so etwas wie C:\Users\DEIN_BENUTZERNAME\AppData\Local\Android\Sdk. Du findest ihn auch später in Android Studio unter File > Settings > Languages & Frameworks > Android SDK.
  3. Android Studio starten: Starte Android Studio nach der Installation. Es wird eventuell noch einige Komponenten herunterladen.
  4. (Optional, aber empfohlen) Flutter und Dart Plugins: Auch wenn wir VS Code nutzen, installieren wir die Flutter- und Dart-Plugins in Android Studio. Das hilft flutter doctor bei der Erkennung und kann nützlich sein, falls du doch mal eine Funktion von Android Studio brauchst.
    • Gehe in Android Studio zu File > Settings > Plugins.
    • Suche im „Marketplace“-Tab nach „Flutter“ und klicke auf „Install“. Akzeptiere die Installation des Dart-Plugins, wenn du dazu aufgefordert wirst.
    • Starte Android Studio neu, wenn du dazu aufgefordert wirst.
  5. Android SDK Command-line Tools: Stelle sicher, dass diese installiert sind.
    • Gehe in Android Studio zu File > Settings > Languages & Frameworks > Android SDK.
    • Wähle den Tab „SDK Tools“.
    • Setze einen Haken bei „Android SDK Command-line Tools (latest)“.
    • Klicke auf „Apply“ oder „OK“, um sie zu installieren.
  6. Android-Lizenzen akzeptieren: Flutter muss sicherstellen, dass du die Lizenzen für das Android SDK akzeptiert hast. Öffne eine neue Eingabeaufforderung oder PowerShell und führe aus:
    bash flutter doctor --android-licenses
    Lies die Lizenzbedingungen durch und gib bei jeder Abfrage y (für yes) ein, um sie zu akzeptieren.

Schritt 3: flutter doctor – Der Gesundheitscheck

Jetzt ist es Zeit für einen Check-up! flutter doctor ist ein Befehl, der deine Umgebung überprüft und dir sagt, ob alles für die Flutter-Entwicklung bereit ist oder ob noch etwas fehlt.

Öffne eine neue Eingabeaufforderung oder PowerShell und führe aus:

flutter doctor

Du wirst eine Ausgabe ähnlich dieser sehen (kann bei dir leicht abweichen):

Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 3.x.x, on Microsoft Windows [Version ...], locale de-DE)
[✓] Android toolchain - develop for Android devices (Android SDK version 3x.x.x)
[✓] Chrome (visualize Flutter web apps with Chrome)
[!] Visual Studio - develop for Windows (Visual Studio not installed)  <-- Ignorieren, wenn du nur für Android entwickelst
[✓] Android Studio (version 202x.x.x)
[✓] VS Code (version 1.x.x)
[✓] Connected device (1 available)                                  <-- Oder 'No devices available'
[✓] Network resources

* No issues found!
  • Was bedeutet das?
    • [✓] (Haken): Alles in Ordnung für diese Komponente!
    • [!] (Ausrufezeichen): Es gibt ein Problem oder eine Empfehlung. Lies die Meldung genau durch, flutter doctor gibt oft Hinweise zur Lösung. (Das Visual Studio für Windows-Entwicklung kannst du ignorieren, wenn du nur für Android entwickelst).
    • [✗] (Kreuz): Etwas Wichtiges fehlt oder ist falsch konfiguriert.
    • [?] (Fragezeichen): Etwas konnte nicht überprüft werden.
  • Ziel: Wir wollen Haken bei Flutter, Android toolchain, Android Studio (oder zumindest, dass es erkannt wird) und später bei VS Code und Connected device.
  • Keine Panik: Wenn nicht sofort alles grün ist, ist das normal! Lies die Meldungen von flutter doctor und folge den Anweisungen. Oft fehlt nur ein kleiner Schritt oder ein Neustart.

Schritt 4: Ein Testgerät einrichten

Um deine App zu sehen und zu testen, brauchst du ein Android-Gerät. Du hast zwei Möglichkeiten:

Option A: Android Emulator (Virtuelles Gerät)

Ein Emulator simuliert ein Android-Gerät auf deinem Computer.

  1. AVD Manager öffnen: Klicke auf dem Willkommensbildschirm auf More Actions -> Virtual Device Manager (oder wenn ein Projekt offen ist: Tools -> Device Manager).
  2. Gerät erstellen: Klicke auf „Create device“.
    • Wähle eine Hardware aus (z.B. „Pixel 6“ oder eine ähnliche, aktuelle Geräteklasse). Klicke „Next“.
    • Wähle ein System-Image aus (eine Android-Version). Lade eines herunter, falls noch keines vorhanden ist (empfohlen: eine relativ aktuelle API-Version, z.B. API 33 oder 34). Klicke „Next“.
    • Gib dem virtuellen Gerät (AVD) einen Namen und klicke auf „Finish“.
  3. Emulator starten: Wähle dein neu erstelltes Gerät im Device Manager aus und klicke auf das Play-Symbol (▶️) in der „Actions“-Spalte, um es zu starten. Es kann einen Moment dauern, bis der Emulator hochgefahren ist.
    • Performance-Hinweis: Emulatoren können auf manchen Rechnern langsam sein. Stelle sicher, dass die Hardware-Virtualisierung (Intel HAXM oder AMD Hypervisor / Windows Hypervisor Platform) in deinem BIOS/UEFI aktiviert ist und in Android Studio konfiguriert wurde (passiert oft automatisch).

Option B: Physisches Android-Gerät (Dein Smartphone)

Du kannst auch dein eigenes Android-Handy zum Testen verwenden.

  1. Entwickleroptionen aktivieren: Gehe auf deinem Handy zu Einstellungen > Über das Telefon. Tippe dort mehrmals schnell hintereinander auf die „Build-Nummer“, bis eine Meldung erscheint wie „Du bist jetzt Entwickler!“.
  2. USB-Debugging aktivieren: Gehe zurück zu den Einstellungen. Suche nach dem neuen Menüpunkt Entwickleroptionen (manchmal unter System > Erweitert). Aktiviere dort die Option USB-Debugging. Bestätige die Warnmeldung.
  3. USB-Treiber (falls nötig): Verbinde dein Handy per USB-Kabel mit dem Computer. Windows versucht normalerweise, die richtigen Treiber automatisch zu installieren. Falls dein Gerät nicht erkannt wird, suche auf der Website des Handy-Herstellers nach spezifischen „OEM USB Drivers“ für dein Modell und installiere sie.
  4. Verbindung autorisieren: Wenn du dein Handy zum ersten Mal mit aktiviertem USB-Debugging verbindest, erscheint auf dem Handy eine Meldung „USB-Debugging zulassen?“. Setze einen Haken bei „Von diesem Computer immer zulassen“ und tippe auf „OK“ oder „Zulassen“.

Überprüfung: Egal ob Emulator oder echtes Gerät, öffne eine neue Eingabeaufforderung und führe aus:

flutter devices

Dein verbundenes Gerät oder der laufende Emulator sollte nun in der Liste erscheinen! flutter doctor sollte jetzt auch einen Haken bei Connected device zeigen.

Schritt 5: Visual Studio Code (VS Code) einrichten

VS Code ist unser bevorzugter Editor zum Schreiben des Flutter-Codes.

  1. Download & Installation: Lade VS Code herunter und installiere es: https://code.visualstudio.com/ . Die Installation ist unkompliziert.
  2. Flutter Extension installieren:
    • Starte VS Code.
    • Klicke auf das Extensions-Symbol in der linken Seitenleiste (sieht aus wie vier Quadrate).
    • Suche nach „Flutter“.
    • Wähle die offizielle Extension von „Dart Code“ aus und klicke auf „Install“. Diese Extension installiert automatisch auch die notwendige „Dart“-Extension.
    • Starte VS Code neu, wenn du dazu aufgefordert wirst.

Schritt 6: Das erste Flutter-Projekt erstellen und starten

Endlich! Zeit, unser erstes (Standard-)Flutter-Projekt zu erstellen und zu sehen, ob alles funktioniert.

  1. Projekt erstellen:
    • Öffne VS Code.
    • Öffne die Command Palette mit Strg+Shift+P (oder Ctrl+Shift+P).
    • Tippe „Flutter: New Project“ und wähle die Option aus.
    • Wähle „Application“.
    • Wähle einen Ordner auf deinem Computer, wo das Projekt gespeichert werden soll (z.B. C:\dev\flutter_projekte\).
    • Gib einen Namen für dein Projekt ein. Wichtig: Der Name muss klein geschrieben sein und darf nur Buchstaben, Zahlen und Unterstriche enthalten (z.B. flutter_weather_app_blog). Drücke Enter.
    • VS Code erstellt nun die Projektstruktur und lädt eventuell noch benötigte Pakete herunter. Das kann einen Moment dauern.
  2. Gerät auswählen: Stelle sicher, dass dein Emulator läuft oder dein Handy verbunden und erkannt ist. In der unteren rechten Ecke der VS Code Statusleiste solltest du nun dein Gerät auswählen können (klicke auf den Gerätenamen oder „No Device“).
  3. App starten:
    • Öffne die Datei lib/main.dart. Das ist der Einstiegspunkt der App.
    • Drücke F5 oder gehe im Menü auf Run > Start Debugging.
    • Flutter wird nun die App kompilieren und auf deinem ausgewählten Gerät installieren und starten. Der erste Start kann etwas länger dauern.
  4. Erfolg! Du solltest nun die Flutter-Standard-Demo-App sehen (die mit dem Zähler und dem blauen Button). Wenn du auf den Button tippst, erhöht sich der Zähler.

Wenn etwas nicht klappt (Troubleshooting):

  • flutter Befehl nicht gefunden: Überprüfe nochmal genau die PATH-Variable (Schritt 1.3). Hast du den richtigen Pfad (C:\flutter\bin) hinzugefügt? Hast du die Eingabeaufforderung/VS Code neu gestartet? Manchmal hilft ein PC-Neustart.
  • flutter doctor zeigt Fehler bei Android toolchain: Stelle sicher, dass Android Studio korrekt installiert ist, die Command-line Tools vorhanden sind (Schritt 2.5) und du die Lizenzen akzeptiert hast (Schritt 2.6). Manchmal muss man Flutter explizit sagen, wo das SDK liegt: flutter config --android-sdk C:\Users\DEIN_BENUTZERNAME\AppData\Local\Android\Sdk (Pfad anpassen).
  • Emulator startet nicht oder ist sehr langsam: Überprüfe die Virtualisierungs-Einstellungen im BIOS/UEFI deines PCs und stelle sicher, dass HAXM/Hypervisor installiert und aktiviert ist (Android Studio hilft dabei oft). Gib dem Emulator ggf. mehr RAM in den AVD-Einstellungen (aber nicht zu viel!).
  • Echtes Gerät wird nicht erkannt: USB-Debugging aktiviert? Verbindung autorisiert? Richtige USB-Treiber installiert? Probiere ein anderes USB-Kabel oder einen anderen USB-Port.
  • Weitere Hilfe: Die offizielle Flutter-Dokumentation (https://docs.flutter.dev/get-started/install/windows) ist sehr detailliert und eine großartige Ressource bei Problemen.

Geschafft! Was kommt als Nächstes?

Puh, das war der aufwendigste, aber notwendige Teil! Du hast jetzt eine voll funktionsfähige Flutter-Entwicklungsumgebung auf deinem Windows-Rechner. Dein Werkzeugkasten ist bereit!

Herzlichen Glückwunsch zu diesem wichtigen Meilenstein! 🎉

Im nächsten Teil (Teil 3) wird es richtig spannend: Wir werfen den Demo-Code raus und beginnen mit der Entwicklung unserer Wetter-App. Wir werden:

  • Die Projektstruktur und Architektur anlegen (Services, Repository, State Management mit Riverpod).
  • Den aktuellen GPS-Standort des Geräts abfragen.
  • Unsere erste API-Anfrage an Open-Meteo senden, um die aktuelle Temperatur zu bekommen.
  • Die Temperatur auf dem Bildschirm anzeigen.
  • Erklären, warum wir von Anfang an auf eine solide Architektur setzen.

Bleib dran, es geht jetzt richtig los mit dem Code!