Kapitel 1: Flutter Einführung

1.1 Was ist Flutter?

Flutter ist ein von Google entwickeltes cross-platform UI Framework, mit dem Entwickler mit einer einzigen Codebasis native Apps für iOS, Android, Web und Desktop erstellen können.

Kernmerkmale:

• Programmiersprache: Dart (offizielle Sprache von Flutter)
• Ein Codebase: Läuft auf iOS, Android, Web, Windows, Mac, Linux
• Native Performance: Kompiliert zu nativen ARM-Code
• Widget-System: Alles ist ein Widget (Komponente)

// Ein einfaches Flutter-Programm
import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Meine erste Flutter App')),
        body: Center(child: Text('Hallo Flutter!')),
      ),
    );
  }
}

1.2 Warum Flutter lernen?

Kernvorteile:

Vorteil	Beschreibung
Cross-Platform Konsistenz	Gleiches Aussehen und Verhalten auf allen Plattformen
Hohe Performance	Direct Rendering, keine Bridge wie bei React Native
Hot Reload	Sofortige Vorschau von Änderungen ohne App-Neustart
Hohe Entwicklungseffizienz	Ein Codebase für alle Plattformen
Tiefe Dart-Integration	Nahtlose Zusammenarbeit mit Dart

1.3 Flutter Anwendungsszenarien

Hauptanwendungsgebiete:

1. Mobile App-Entwicklung (iOS & Android)

   • E-Commerce Apps (z.B. Alibaba, eBay Kleinanzeigen)
   • Social Media Apps (z.B. Discord, Tencent Apps)
   • Produktivitäts-Apps (z.B. Google Ads, BMW Connected)

2. Cross-Platform Apps

   • Einheitliche Benutzeroberfläche auf allen Geräten
   • Geringere Entwicklungskosten

3. Web-Entwicklung

   • Progressive Web Apps (PWA)
   • Responsive Webseiten

4. Desktop-Anwendungen

   • Windows, macOS, Linux Apps
   • Enterprise-Anwendungen

Klassische Fallbeispiele:

• Google Ads (Mobile App)
• Alibaba (Mobile Shopping App)
• BMW (Connected App)
• Discord (Mobile App)

1.4 Flutter vs. andere Cross-Platform Frameworks

Merkmal	Flutter	React Native	UniApp
Programmiersprache	Dart	JavaScript/TypeScript	Vue.js
Rendering	Eigenes Rendering (Skia)	Native Komponenten	Native Komponenten
Performance	Sehr hoch (nativ)	Mittel (Bridge-Overhead)	Mittel
UI-Konsistenz	100% konsistent	Plattformabhängig	Plattformabhängig
Lernkurve	Mittel (Dart lernen)	Niedrig (JS-Kenntnisse)	Niedrig (Vue-Kenntnisse)
Community	Groß & wachsend	Sehr groß	Mittel

Warum Flutter für Anfänger besser geeignet ist:

• Einheitliches UI auf allen Plattformen (keine plattformspezifischen Anpassungen)
• Bessere Performance durch direktes Rendering
• Klarere Dokumentation und bessere Tooling-Unterstützung

1.5 Lernvoraussetzungen: Dart-Grundlagen Auffrischung

Bevor Sie mit Flutter beginnen, sollten Sie folgende Dart-Konzepte beherrschen:

Erforderliche Dart-Kenntnisse:

• ✅ Variablen und Datentypen (var, final, const)
• ✅ Funktionen und Arrow-Syntax (=>, async/await)
• ✅ Collections (List, Map, Set)
• ✅ Asynchrone Programmierung (Future, async/await)
• ✅ Klassen und Objekte (Grundlagen der OOP)
• ✅ Null Safety (?, !, late)

Nicht erforderlich (kommen später):

• ❌ Fortgeschrittene Dart-Konzepte (Mixins, Generics)
• ❌ Dart Backend-Entwicklung
• ❌ Komplexe Asynchronität (Streams)

Auffrischung:

// Wichtige Dart-Konzepte für Flutter

// 1. Arrow Function
void printName(String name) => print('Name: $name');

// 2. Async/Await
Future<String> fetchData() async {
  await Future.delayed(Duration(seconds: 1));
  return 'Daten geladen';
}

// 3. Klassen
class User {
  final String name;
  final int age;
  
  User(this.name, this.age);  // Kurzschreibweise für Konstruktor
}

// 4. Null Safety
String? nullableString;  // Kann null sein
late String initializedString;  // Wird später initialisiert

1.6 Lernpfad-Planung

Empfohlene Lernreihenfolge für Anfänger:

Phase 1: Grundlagen (Kapitel 1-3)
├── Flutter Einführung & Umgebung
├── Projektstruktur verstehen
└── Dart & Flutter Verbindung

Phase 2: Core Concepts (Kapitel 4-7)
├── Widgets & BuildContext
├── Basis-Widgets (Text, Image, Button)
├── Layouts (Row, Column, Stack)
└── State Management (setState, Provider)

Phase 3: Fortgeschritten (Kapitel 8-12)
├── Routing & Navigation
├── Netzwerkrequests (Dio)
├── Lokale Speicherung (shared_preferences)
└── Styling & Themes

Phase 4: Praxis (Kapitel 13-14)
├── Einfache Projekte (Counter, Login)
└── Komplexe Projekte (News App, E-Commerce)

Phase 5: Deployment (Kapitel 15-20)
├── App-Packaging (Android/iOS)
├── Fehlerbehebung
└── Ressourcen & Interviewfragen

Zeitplan (für Anfänger):

• Phase 1-2: 2-3 Wochen
• Phase 3: 3-4 Wochen
• Phase 4: 4-6 Wochen
• Phase 5: 1-2 Wochen

Gesamt: Ca. 3-4 Monate für solide Flutter-Kenntnisse

1.7 Erstes Flutter-Programm

Schritt 1: Neues Projekt erstellen

# Terminal öffnen und Befehl ausführen
flutter create meine_erste_app
cd meine_erste_app
flutter run

Schritt 2: Emulator starten oder echtes Gerät anschließen

Schritt 3: lib/main.dart modifizieren

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Meine erste Flutter App',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Willkommen bei Flutter!'),
      ),
      body: const Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Icon(Icons.flutter_dash, size: 100, color: Colors.blue),
            SizedBox(height: 20),
            Text(
              'Hallo Flutter!',
              style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
            ),
            SizedBox(height: 10),
            Text(
              'Das ist meine erste Flutter App',
              style: TextStyle(fontSize: 16, color: Colors.grey),
            ),
          ],
        ),
      ),
    );
  }
}

Schritt 4: Hot Reload testen

• Speichern Sie die Datei (Ctrl + S oder Cmd + S)
• Ändern Sie den Text von 'Hallo Flutter!' zu 'Hot Reload funktioniert!'
• Beobachten Sie, wie die App sofort aktualisiert wird (ohne Neustart!)

Was Sie in diesem Beispiel gelernt haben:

• ✅ main() Funktion (Einstiegspunkt)
• ✅ StatelessWidget (zustandslose Komponente)
• ✅ MaterialApp (Basis-Widget für Material Design)
• ✅ Scaffold (Grundgerüst einer Seite)
• ✅ AppBar (obere Leiste)
• ✅ Center, Column, Text, Icon (Basis-Widgets)
• ✅ Hot Reload (sofortige Vorschau von Änderungen)

Zusammenfassung

In diesem Kapitel haben Sie:

• ✅ Verstanden, was Flutter ist und warum es beliebt ist
• ✅ Die Anwendungsszenarien von Flutter kennengelernt
• ✅ Den Unterschied zu anderen Frameworks verstanden
• ✅ Die Lernvoraussetzungen (Dart-Grundlagen) aufgefrischt
• ✅ Einen klaren Lernpfad für Flutter erhalten
• ✅ Ihr erstes Flutter-Programm erstellt und Hot Reload getestet

Nächstes Kapitel: Wir werden die Entwicklungsumgebung einrichten (Flutter SDK, VS Code, Android Studio).

---

Übungsaufgaben:

1. Ändern Sie die Hintergrundfarbe der App auf Grün
2. Fügen Sie einen zweiten Button hinzu, der einen Dialog anzeigt
3. Experimentieren Sie mit Hot Reload: Ändern Sie den Text und beobachten Sie die sofortige Aktualisierung

Häufige Fehler:

• ❌ Flutter SDK nicht korrekt installiert → flutter doctor ausführen
• ❌ Emulator nicht gestartet → AVD Manager in Android Studio verwenden
• ❌ Hot Reload funktioniert nicht → Stellen Sie sicher, dass die App im Debug-Modus läuft