Flutter: Form-Widget und Eingabevalidierung

Form ist ein Widget in Flutter, mit dem Eingabefelder gruppiert und validiert werden. Mit Form verwalten wir mehrere Eingabefelder in einer Struktur und prüfen sie gemeinsam.

Live-Demo

Sie können dieses Widget im interaktiven Beispiel unten ausprobieren:

💡 Falls das Beispiel oben nicht lädt, klicken Sie auf DartPad, um es in einem neuen Tab auszuführen.
💡 Falls das Beispiel oben nicht lädt, können Sie es über DartPad in einem neuen Tab ausführen.

Grundlegende Verwendung

Das Form-Widget wird über einen GlobalKey verwaltet:

final _formKey = GlobalKey<FormState>();

Form(
  key: _formKey,
  child: Column(
    children: [
      TextFormField(
        validator: (value) {
          if (value == null || value.isEmpty) {
            return 'This field cannot be empty';
          }
          return null;
        },
      ),
      ElevatedButton(
        onPressed: () {
          if (_formKey.currentState!.validate()) {
            // Form is valid, perform operation
          }
        },
        child: Text('Submit'),
      ),
    ],
  ),
)

Eigenschaften von TextFormField

TextFormField(
  controller: _controller,
  decoration: InputDecoration(
    labelText: 'Email',
    hintText: '[email protected]',
    prefixIcon: Icon(Icons.email),
    suffixIcon: Icon(Icons.check),
    border: OutlineInputBorder(),
    errorBorder: OutlineInputBorder(
      borderSide: BorderSide(color: Colors.red),
    ),
  ),
  validator: (value) => value!.isEmpty ? 'Required field' : null,
  keyboardType: TextInputType.emailAddress,
  textInputAction: TextInputAction.next,
  obscureText: false, // true for password
  maxLength: 50,
  maxLines: 1,
)

Validierungsfunktionen

// Email validation
String? validateEmail(String? value) {
  if (value == null || value.isEmpty) {
    return 'Email is required';
  }
  final regex = RegExp(r'^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$');
  if (!regex.hasMatch(value)) {
    return 'Invalid email format';
  }
  return null;
}

// Password validation
String? validatePassword(String? value) {
  if (value == null || value.length < 6) {
    return 'Password must be at least 6 characters';
  }
  return null;
}

Methoden des Formulars

Methode	Beschreibung
validate()	Prüft alle Felder
save()	Ruft die onSaved-Callbacks auf
reset()	Setzt das Formular zurück

AutovalidateMode

Form(
  key: _formKey,
  autovalidateMode: AutovalidateMode.onUserInteraction,
  // AutovalidateMode.disabled - Manual validation
  // AutovalidateMode.always - Always validate
  // AutovalidateMode.onUserInteraction - Validate on user interaction
  child: ...
)

onSaved verwenden

String? _email;

TextFormField(
  onSaved: (value) {
    _email = value;
  },
)

// When form is submitted
if (_formKey.currentState!.validate()) {
  _formKey.currentState!.save(); // Calls onSaved callbacks
  print(_email);
}

Zusammenfassung

• Form: Gruppiert Eingabefelder
• GlobalKey: Verwaltet den Zustand des Formulars
• TextFormField: Texteingabe mit Validierung
• validator: Validierungsfunktion
• validate(): Prüft alle Felder

Das Form-Widget ist unverzichtbar für die Verwaltung von Nutzereingaben.