Apps planen, zerlegen und Schritt fuer Schritt bauen

2. Uebung: App-Idee in Bausteine zerlegen

Waehle eine kleine App-Idee und zerlege sie in technische Bausteine. Noch nicht direkt coden — erst verstehen.

1. Beschreibe die App in einem Satz.
2. Notiere eine Hauptaktion, die User ausfuehren.
3. Notiere, welche Daten gespeichert werden muessen.
4. Notiere, welche Widgets du brauchst.
5. Schreibe eine kurze Ablaufplanung fuer die App.

Beispiel: Lernkarten-App

Ziel:
  User sehen eine Frage und koennen die Antwort aufdecken.

Daten:
  question
  answer
  isAnswerVisible

Widgets:
  Text fuer Frage
  Button zum Aufdecken
  Text fuer Antwort

Aktion:
  Wenn Button gedrueckt wird:
    isAnswerVisible umschalten

3. Uebung: Screen als Widget-Baum planen

Plane eine App-Oberflaeche als Widget-Baum. Das ist wie eine Strukturzeichnung fuer Flutter.

1. Starte mit MaterialApp.
2. Nutze Scaffold fuer die Seite.
3. Nutze Column fuer vertikale Anordnung.
4. Plane Text, Buttons und Abstaende.

MaterialApp
  Scaffold
    AppBar
      Text('Lernkarten')
    body
      Padding
        Column
          Text('Frage')
          SizedBox
          Button('Antwort anzeigen')
          Text('Antwort')

4. Uebung: Profilkarten-App bauen

Baue eine einfache Profilkarten-App. Ziel ist nicht Komplexitaet, sondern saubere Struktur.

1. Erstelle ein neues Flutter-Projekt.
2. Ersetze den Startinhalt durch eine Profilkarte.
3. Nutze Container, Padding, Text und SizedBox.
4. Lagere die Profilkarte in ein eigenes Widget aus.
5. Uebergib Name, Rolle und Punkte als Parameter.

class ProfileCard extends StatelessWidget {
  final String name;
  final String role;
  final int points;

  const ProfileCard({
    super.key,
    required this.name,
    required this.role,
    required this.points,
  });

  @override
  Widget build(BuildContext context) {
    return Card(
      child: Padding(
        padding: const EdgeInsets.all(16),
        child: Column(
          children: [
            Text(name),
            Text(role),
            Text('$points Punkte'),
          ],
        ),
      ),
    );
  }
}

5. Uebung: Button-App mit State

Baue eine Mini-App, bei der ein Button einen Wert veraendert. Dadurch trainierst du StatefulWidget und setState.

1. Lege int points = 0 als State an.
2. Zeige Punkte als Text.
3. Baue Button +10 Punkte.
4. Nutze setState, damit die UI neu gezeichnet wird.
5. Baue einen Reset-Button.

int points = 0;

void addPoints() {
  setState(() {
    points += 10;
  });
}

void resetPoints() {
  setState(() {
    points = 0;
  });
}

6. Uebung: Mini-Todo-App vorbereiten

Hier planst du eine Todo-App als Zwischenprojekt. Erst mit festen Daten, spaeter mit Eingabe.

1. Erstelle eine Liste tasks.
2. Zeige alle Tasks mit ListView.builder.
3. Wenn die Liste leer ist, zeige einen Hinweistext.
4. Fuege einen Button hinzu, der eine Testaufgabe einfuegt.

final List<String> tasks = [];

Widget buildTaskList() {
  if (tasks.isEmpty) {
    return const Text('Noch keine Aufgaben.');
  }

  return ListView.builder(
    itemCount: tasks.length,
    itemBuilder: (context, index) {
      return Text(tasks[index]);
    },
  );
}

7. Uebung: Quiz-App planen

Plane eine Quiz-App mit Frage, Antwortmoeglichkeiten und Punktestand.

1. Welche Daten braucht eine Frage?
2. Welche Daten braucht die App als State?
3. Was passiert beim Klick auf eine Antwort?
4. Wann wird die naechste Frage angezeigt?
5. Wann zeigt die App das Ergebnis?

class QuizQuestion {
  final String question;
  final List<String> answers;
  final String correctAnswer;

  const QuizQuestion({
    required this.question,
    required this.answers,
    required this.correctAnswer,
  });
}

8. Uebung: Fehleranzeige in einer App

Baue eine kleine Fehleranzeige: Wenn eine Eingabe leer ist, soll die App eine Meldung anzeigen.

1. Lege String errorMessage = '' an.
2. Wenn Eingabe leer ist, setze eine Fehlermeldung.
3. Wenn Eingabe gueltig ist, leere die Fehlermeldung.
4. Zeige die Meldung rot an, wenn sie nicht leer ist.

void validateName(String name) {
  setState(() {
    if (name.trim().isEmpty) {
      errorMessage = 'Name darf nicht leer sein.';
    } else {
      errorMessage = '';
    }
  });
}

9. Uebung: Dateien sinnvoll aufteilen

Plane, wie du eine kleine App in Dateien zerlegst. Das ist wichtig, damit dein Code nicht komplett in main.dart landet.

lib/
  main.dart
  models/
    quiz_question.dart
    learning_task.dart
  screens/
    home_screen.dart
    quiz_screen.dart
  widgets/
    profile_card.dart
    action_button.dart

1. Lege fest, welche Datei der Einstiegspunkt ist.
2. Lege fest, wo Datenklassen liegen.
3. Lege fest, wo Screens liegen.
4. Lege fest, wo wiederverwendbare Widgets liegen.

10. Zwischenprojekt: Lern-Dashboard-App

Baue als Zwischenprojekt eine kleine Lern-Dashboard-App. Sie muss noch nicht perfekt sein, aber sie soll echte App-Struktur trainieren.

1. Startseite mit Titel und kurzer Begruessung.
2. Karte mit aktuellem Kurs.
3. Punkteanzeige.
4. Button +5 Punkte.
5. Button Reset.
6. Liste mit drei Lernzielen.
7. Eigene Widgets fuer Karte und Button.
8. Kurze README mit Start-Command und Projektziel.

App-Planung:

Starte App
Zeige Lern-Dashboard
Zeige aktuellen Punktestand
Wenn +5 gedrueckt:
  Erhoehe Punkte um 5
Wenn Reset gedrueckt:
  Setze Punkte auf 0
Zeige Lernziele als Liste