Kostenlose Tutorials für Anfänger

Appearance

Kapitel 2: Entwicklungsumgebung ​

2.1 Basis-Umgebungsvorbereitung ​

Windows-System ​

Schritt 1: Flutter SDK herunterladen

  1. Besuchen Sie die offizielle Flutter-Webseite: https://flutter.dev/docs/get-started/install
  2. Laden Sie die neueste stabile Version für Windows herunter
  3. Entpacken Sie die ZIP-Datei (z.B. nach C:\flutter)

Schritt 2: Umgebungsvariablen konfigurieren

bash
# Fügen Sie Flutter zum PATH hinzu (Windows PowerShell)
$env:PATH += ";C:\flutter\bin"

# Permanent (Systemumgebungsvariablen)
# Systemsteuerung → System → Erweiterte Systemeinstellungen 
# → Umgebungsvariablen → Path → Neu → C:\flutter\bin

Schritt 3: Installation überprüfen

bash
flutter --version
flutter doctor

Mac-System ​

Methode 1: Manueller Download

bash
# 1. Flutter SDK herunterladen und entpacken
cd ~/development
unzip ~/Downloads/flutter_macos_*.zip

# 2. Zum PATH hinzufügen (~/.zshrc oder ~/.bashrc)
export PATH="$PATH:`pwd`/flutter/bin"

# 3. Konfiguration neu laden
source ~/.zshrc

Methode 2: Homebrew (empfohlen)

bash
# Homebrew installieren (falls nicht vorhanden)
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

# Flutter via Homebrew installieren
brew install --cask flutter

# Installation überprüfen
flutter doctor

Xcode konfigurieren (für iOS-Entwicklung)

bash
# Xcode aus dem App Store installieren
# Command Line Tools installieren
sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
sudo xcodebuild -runFirstLaunch

# Lizenz akzeptieren
sudo xcodebuild -license

Linux-System ​

bash
# Schritt 1: Abhängigkeiten installieren
sudo apt update
sudo apt install -y curl git unzip xz-utils zip libglu1-mesa

# Schritt 2: Flutter SDK herunterladen
cd ~
git clone https://github.com/flutter/flutter.git -b stable

# Schritt 3: Zum PATH hinzufügen (~/.bashrc oder ~/.zshrc)
echo 'export PATH="$PATH:$HOME/flutter/bin"' >> ~/.bashrc
source ~/.bashrc

# Schritt 4: Installation überprüfen
flutter doctor

2.2 Entwicklungswerkzeuge vorbereiten ​

VS Code + Erforderliche Plugins (empfohlen für Anfänger) ​

Installation:

  1. VS Code von https://code.visualstudio.com/ herunterladen
  2. Installieren Sie folgende Plugins:
    • Flutter (offizielles Flutter-Plugin)
    • Dart (Dart-Sprachunterstützung)
    • Flutter Widget Snippets (Code-Vervollständigung)
    • Awesome Flutter Snippets (vordefinierte Code-Snippets)
    • Dart Data Class Generator (Generierung von Datenklassen)

Nützliche VS Code-Einstellungen:

json
// settings.json
{
  "dart.flutterHotReloadOnSave": true,
  "dart.flutterHotRestartOnSave": false,
  "dart.previewFlutterUiGuides": true,
  "dart.previewFlutterUiGuidesCustomTracking": true,
  "[dart]": {
    "editor.formatOnSave": true
  }
}

Android Studio (empfohlen für iOS/Android-Entwicklung) ​

Installation:

  1. Android Studio von https://developer.android.com/studio herunterladen
  2. Während der Installation folgende Komponenten auswählen:
    • ✅ Android SDK
    • ✅ Android SDK Platform
    • ✅ Performance (Intel ® HAXM)
    • ✅ Android Virtual Device

Plugins installieren:

  • Flutter Plugin: File → Settings → Plugins → Marketplace → "Flutter"
  • Dart Plugin: Wird automatisch mit Flutter-Plugin installiert

Vorteile von Android Studio:

  • ✅ Integrierte Flutter/Dart-Umgebung
  • ✅ Leistungsstarker Emulator
  • ✅ Echtes Gerät-Debugging
  • ✅ Bessere Performance bei der App-Erstellung

2.3 Emulator/Echtes Gerät konfigurieren ​

Android Emulator erstellen und starten ​

Methode 1: Über Android Studio

1. Tools → AVD Manager öffnen
2. "Create Virtual Device" klicken
3. Gerät auswählen (z.B. Pixel 6)
4. System Image wählen (empfohlen: API 33 - Android 13)
5. AVDI (Android Virtual Device) konfigurieren:
   - RAM: 2048 MB oder mehr
   - Storage: 8 GB oder mehr
   - Graphics: Hardware - GLES 2.0
6. "Finish" klicken
7. Play-Button drücken, um Emulator zu starten

Methode 2: Über Kommandozeile

bash
# Verfügbare Geräte auflisten
flutter emulators

# Emulator starten
flutter emulators --launch <emulator_id>

# Zum Beispiel:
flutter emulators --launch Pixel_6_API_33

Echtes Gerät anschließen (USB-Debugging):

  1. Aktivieren Sie "Entwickleroptionen" auf Ihrem Android-Gerät:
    • Einstellungen → Über das Telefon → Build-Nummer 7-mal tippen
  2. Aktivieren Sie "USB-Debugging"
  3. Schließen Sie das Gerät über USB an
  4. Bestätigen Sie den USB-Debugging-Dialog auf dem Gerät
  5. Überprüfen Sie die Verbindung:
bash
flutter devices

iOS Simulator konfigurieren (nur Mac) ​

bash
# iOS Simulator öffnen
open -a Simulator

# Simulator in VS Code starten
# Befehlspalette öffnen (Cmd + Shift + P)
# "Flutter: Launch iOS Simulator" eingeben

# Oder über Terminal
xcrun simctl list  # Verfügbare Simulatoren auflisten
xcrun simctl boot "iPhone 14"  # Simulator starten

Echtes iOS-Gerät debuggen (vereinfacht):

  1. iOS-Gerät über USB anschließen
  2. Xcode öffnen und Gerät vertrauen
  3. Signing & Capabilities in Xcode konfigurieren:
    • Bundle Identifier festlegen
    • Team auswählen (Apple ID hinzufügen)
  4. flutter run ausführen

2.4 Umgebungsvalidierung ​

Schritt 1: flutter doctor ausführen

bash
flutter doctor -v

Beispielausgabe (erfolgreich):

[✓] Flutter (Channel stable, 3.16.0, on macOS 14.0, locale de-DE)
[✓] Android toolchain - develop for Android devices
[✓] Xcode - develop for iOS and macOS
[✓] Chrome - develop for the web
[✓] Android Studio (version 2023.1)
[✓] VS Code (version 1.85.0)
[✓] Connected device (2 available)
[✓] Network resources

Häufige flutter doctor Fehler:

  • ❌ "Android toolchain - develop for Android devices": flutter doctor --android-licenses ausführen
  • ❌ "Xcode - develop for iOS and macOS": Xcode installieren und Lizenz akzeptieren
  • ❌ "No devices available": Emulator starten oder echtes Gerät anschließen

Schritt 2: Standard-Demo ausführen

bash
# Neues Flutter-Projekt erstellen
flutter create my_app
cd my_app

# App auf Emulator/Smartphone ausführen
flutter run

Sie sollten die Standard-Flutter-Demo-App (Counter-App) sehen.

2.5 Grundlegende Bedienung der Entwicklungswerkzeuge ​

Flutter-Projekt erstellen ​

Methode 1: Über Terminal

bash
# Basis-Projekt
flutter create mein_projekt

# Mit spezifischer Organisation (Bundle ID)
flutter create --org com.beispiel mein_projekt

# Nur Android & iOS (kein Web/Desktop)
flutter create --platforms android,ios mein_projekt

Methode 2: Über VS Code

1. Befehlspalette öffnen (Cmd/Ctrl + Shift + P)
2. "Flutter: New Project" eingeben
3. "Application" auswählen
4. Projektordner wählen
5. Projektnamen eingeben (kleinbuchstaben_mit_unterstrichen)

Methode 3: Über Android Studio

1. File → New → New Flutter Project
2. "Flutter Application" auswählen
3. Projektnamen, Speicherort, Beschreibung eingeben
4. "Finish" klicken

Projekt ausführen ​

bash
# Terminal im Projektverzeichnis
flutter run

# Spezifisches Gerät wählen (falls mehrere angeschlossen)
flutter run -d <device_id>

# Beispiel:
flutter run -d emulator-5554  # Android Emulator
flutter run -d 00008020-001D...  # iOS Gerät
flutter run -d chrome  # Web-Browser

Hot Reload verwenden ​

Hot Reload (r drücken im Terminal):

  • ✅ Aktualisiert UI sofort
  • ✅ Behält App-Status bei
  • ✅ Funktioniert nur im Debug-Modus

Hot Restart (R drücken im Terminal):

  • ✅ Startet App neu
  • ✅ Setzt App-Status zurück
  • ✅ Erforderlich bei Änderungen an main() oder Statics

Full Restart (App stoppen und flutter run neu ausführen):

  • ✅ Erforderlich bei Änderungen an nativen Dateien (Android/iOS)
  • ✅ Erforderlich bei Plugin-Änderungen

Code debuggen ​

In VS Code:

  1. Haltepunkt setzen (roter Punkt links neben Zeilennummer)
  2. F5 drücken oder "Run → Start Debugging"
  3. Debug-Konsole verwenden, um Variablen zu inspizieren

In Android Studio:

  1. Haltepunkt setzen
  2. "Debug" Button drücken (grüner Käfer)
  3. Debugger-Tab verwenden

Nützliche Debugging-Tools:

dart
// 1. print() - Einfache Ausgabe
print('Aktueller Wert: $wert');

// 2. debugPrint() - Besser für lange Ausgaben
import 'package:flutter/foundation.dart';
debugPrint('Lange Nachricht...');

// 3. assert() - Nur im Debug-Modus
assert(wert != null, 'Wert darf nicht null sein!');

// 4. Flutter DevTools (Performance, UI, Speicher)
// Befehl: flutter devtools

2.6 Häufige Umgebungsfehler beheben ​

Fehler 1: Flutter SDK Installation fehlgeschlagen ​

Symptome:

  • flutter --version funktioniert nicht
  • "command not found: flutter"

Lösungen:

bash
# 1. PATH-Variable überprüfen
echo $PATH  # Mac/Linux
echo %PATH%  # Windows

# 2. Flutter-Binary ausführbar machen (Mac/Linux)
chmod +x ~/flutter/bin/flutter

# 3. Proxy-Einstellungen (falls in China)
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn

Fehler 2: Umgebungsvariablen falsch konfiguriert ​

Windows:

Systemsteuerung → System → Erweiterte Systemeinstellungen 
→ Umgebungsvariablen → Path → Bearbeiten

Korrekter Pfad: C:\flutter\bin

Mac/Linux:

bash
# In ~/.zshrc oder ~/.bashrc
export PATH="$PATH:$HOME/flutter/bin"

# Änderungen anwenden
source ~/.zshrc

Fehler 3: Emulator startet nicht ​

Ursachen & Lösungen:

  1. HAXM nicht installiert (Intel-CPUs):

    • Android Studio → SDK Manager → SDK Tools → Intel x86 Emulator Accelerator installieren

  2. Zu wenig Speicher:

    • AVD Manager → Emulator bearbeiten → RAM auf 1024 MB reduzieren

  3. Hyper-V Konflikt (Windows 10/11):

    • Windows-Funktionen → Hyper-V deaktivieren
    • Oder: WHPX (Windows Hypervisor Platform) aktivieren

Fehler 4: Echtes Gerät wird nicht erkannt ​

Android:

bash
# 1. USB-Debugging aktiviert?
Einstellungen → Entwickleroptionen → USB-Debugging

# 2. Autorisiert?
# Bestätigen Sie den Dialog auf dem Smartphone

# 3. ADB neu starten
adb kill-server
adb start-server
adb devices

iOS:

bash
# 1. Xcode öffnen und Gerät vertrauen
# 2. Signing & Capabilities konfigurieren
# 3. Überprüfen:
xcrun xctrace list devices

Zusammenfassung ​

In diesem Kapitel haben Sie:

  • ✅ Flutter SDK auf Windows/Mac/Linux installiert
  • ✅ Entwicklungswerkzeuge (VS Code, Android Studio) konfiguriert
  • ✅ Emulatoren erstellt und echte Geräte angeschlossen
  • ✅ Umgebung mit flutter doctor validiert
  • ✅ Grundlegende Bedienung (Projekt erstellen, Hot Reload, Debugging) gelernt
  • ✅ Häufige Umgebungsfehler behoben

Nächstes Kapitel: Wir werden die Flutter-Projektstruktur analysieren und die Verbindung zwischen Dart und Flutter verstehen.

Übungsaufgaben:

  1. Erstellen Sie ein neues Flutter-Projekt mit dem Namen mein_lernprojekt
  2. Starten Sie den Emulator und führen Sie die Demo-App aus
  3. Testen Sie Hot Reload: Ändern Sie den Titel der App und speichern Sie (r drücken)
  4. Schließen Sie ein echtes Smartphone an und führen Sie die App darauf aus

Häufige Fehler:

  • ❌ flutter doctor zeigt Fehler → Befolgen Sie die Vorschläge in der Ausgabe
  • ❌ Emulator startet nicht → RAM reduzieren oder HAXM installieren
  • ❌ Hot Reload funktioniert nicht → Stellen Sie sicher, dass die App im Debug-Modus läuft (nicht Release)

Frei für alle Anfänger

Copyright © 2026 Programmier-Tutorials