Formulare prüfen und zwischen Bildschirmen wechseln

Ein Eingabefeld ist noch keine gespeicherte Fachinformation. Zuerst benötigt die Oberfläche einen Entwurf. Danach prüft sie die Eingabe und übergibt einen bestätigten Wert. Unser Formular verlangt einen Fahrzeugnamen. Es navigiert anschließend zu einer Vorschau. Diese Vorschau speichert noch keine Fahrzeugakte. Das bewusst kleine Beispiel trennt Eingabe, Prüfung und Navigation.

Beispieldateien

main.dart

01Das Lernprojekt verwenden

Verwende das Flutter-Projekt aus Tutorial 09 und ersetze lib/main.dart. Form bündelt Formularfelder. Ein GlobalKey erlaubt, die Formularprüfung außerhalb des Feldes anzustoßen. Ein TextEditingController hält den aktuellen Text.

main.dart · dartDatei öffnen

import 'package:flutter/material.dart';

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

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

class _VehicleFormState extends State<VehicleForm> {
  final form = GlobalKey<FormState>();
  final name = TextEditingController();
  @override
  void dispose() {
    name.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) => Scaffold(
    appBar: AppBar(title: const Text('New vehicle')),
    body: Padding(
      padding: const EdgeInsets.all(24),
      child: Form(
        key: form,
        child: Column(
          children: [
            TextFormField(
              controller: name,
              decoration: const InputDecoration(labelText: 'Name'),
              validator: (value) =>
                  (value ?? '').trim().isEmpty ? 'Name required' : null,
            ),
            FilledButton(
              onPressed: () {
                if (!form.currentState!.validate()) return;
                final title = name.text.trim();
                Navigator.of(context).push(
                  MaterialPageRoute<void>(
                    builder: (_) => Scaffold(
                      appBar: AppBar(title: const Text('Preview')),
                      body: Center(child: Text(title)),
                    ),
                  ),
                );
              },
              child: const Text('Preview'),
            ),
          ],
        ),
      ),
    ),
  );
}

Starten / prüfen

flutter run -d chrome

02Eine klare Regel prüfen

validator liefert bei ungültiger Eingabe einen Fehlertext und bei gültiger Eingabe null. trim entfernt äußere Leerzeichen. Der Submit-Button prüft validate, bevor er navigiert. Die echte App prüft Fachregeln zusätzlich in ihrem Service.

03Navigation und Lebenszyklus verstehen

Navigator.push legt eine Route auf den Navigationsstapel. Der zweite Bildschirm bekommt einen bereits normalisierten String. Die Zurücknavigation entfernt die Route. dispose gibt den Controller frei, wenn das Formular dauerhaft entfernt wird.

04Leere Eingaben wirklich testen

Teste eine leere Eingabe, reine Leerzeichen und einen Namen mit Leerzeichen am Rand. Nur der letzte Fall darf zur Vorschau führen. Nach einem Neustart ist der Name wieder weg, weil wir noch keine Datenbank verwenden.

Erwartetes Ergebnis

Eine leere Eingabe zeigt Name required. Family car öffnet eine Vorschau.

Deine Übung

Begrenze den Namen auf maximal 60 Zeichen. Prüfe 60 und 61 Zeichen.

Lösung mit Erklärung anzeigen

Normalisiere zuerst. Prüfe anschließend isEmpty und length > 60 in validator. Liefere für beide Fälle unterschiedliche Fehlertexte. Die Vorschau verwendet weiterhin denselben normalisierten Wert.

Projektbezug und Quellen

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

Fahrzeugakte