Deine erste Flutter-Oberfläche

Flutter beschreibt Oberflächen mit Widgets. Ein Widget ist eine Beschreibung eines Teils der Anzeige, etwa Text, Abstand oder ein Button. Widgets werden ineinander angeordnet. Ein StatelessWidget benötigt keinen eigenen veränderlichen Zustand. Ein StatefulWidget besitzt hier einen Zähler, dessen Änderung die Anzeige aktualisiert.

Beispieldateien

main.dart

01Ein Flutter-Projekt starten

Führe flutter create --empty first_ui aus und wechsle mit cd first_ui in den Ordner. Ersetze lib/main.dart durch das Beispiel. flutter run -d chrome startet die Webvorschau. runApp verbindet den Widget-Baum mit Flutter.

main.dart · dartDatei öffnen

import 'package:flutter/material.dart';

void main() => runApp(const MaterialApp(home: CounterScreen()));

class CounterScreen extends StatefulWidget {
  const CounterScreen({super.key});
  @override
  State<CounterScreen> createState() => _CounterScreenState();
}

class _CounterScreenState extends State<CounterScreen> {
  int count = 0;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Vehicle notes')),
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            Text('Entries: $count'),
            const SizedBox(height: 16),
            FilledButton(
              onPressed: () => setState(() => count++),
              child: const Text('Add entry'),
            ),
          ],
        ),
      ),
    );
  }
}

Starten / prüfen

flutter run -d chrome

02Den Widget-Baum lesen

MaterialApp stellt Grundfunktionen und Gestaltung bereit. Scaffold beschreibt den Bildschirmrahmen. Center zentriert. Column legt Kinder untereinander. SizedBox erzeugt Abstand. Text zeigt den aktuellen Wert. Die Struktur ist verschachtelter Dart-Code, keine eigene Markup-Sprache.

03Zustand aktualisieren

Der Button ruft setState auf. Innerhalb des Aufrufs wird count erhöht. Flutter führt build erneut aus und erhält eine neue Beschreibung der Oberfläche. Datenbankzugriffe gehören nicht in build, da diese Methode wiederholt ausgeführt wird.

Erwartetes Ergebnis

Ein Button erhöht Entries: 0 auf Entries: 1.

Deine Übung

Ergänze einen zweiten Button, der den Zähler auf 0 zurücksetzt.

Lösung mit Erklärung anzeigen

Füge ein weiteres FilledButton-Widget in children ein. Verwende onPressed: () => setState(() => count = 0). Beide Buttons verändern denselben Zustand. Ein Neustart setzt diesen einfachen, noch nicht gespeicherten Zustand ebenfalls zurück.

Projektbezug und Quellen

Das Beispiel ist zum Lernen vereinfacht. Die verlinkte Codeversion zeigt die Anwendung im Projekt und die dortigen Prüfungen.

Fahrzeugakte