Flutter -- Tutorial Teil 7 Form Part 3
 |
| Formulare |
Kommen wir aber zu einem weiteren Element, das man in Formularen am Bildschirm des öfteren findet: die Checkbox.
Auch dieses Element dürfte jedem schon mal begegnet sein. Genau wie das Switch Element, kennt es nur zwei Zustände. Es hat einen Hacken oder eben keinen. Ein typischer Fall für eine bool Variable. Wer sich im übrigen in der Dokumentation über diese Elemente informieren möchte, kann das bei TextFormField, SwitchListTile und CheckboxListTile gerne tun. Es lohnt sich !
1 2 3 4 5 6 7 8 | CheckboxListTile(
title: const Text('Kochen'),
value: _benutzer.hobby[Benutzer.HobbyKochen],
onChanged: (val) {
setState(() =>
_benutzer.hobby[Benutzer.HobbyKochen] = val);
}
)
|
Im Code oben haben wir einen Titel, einen value: Eintrag, der als Inhalt eine bool Variable aus der map unserer Klasse hat. Der onChanged: Eintrag setzt mit setState dementsprechend einen neuen Wert, wenn sich am Zustand der Checkbox etwas geändert hat.
Wenn wir unsere Klasse noch einmal betrachten, sehen wir das wir total 3 Hobby's eingebaut haben. Das heisst, wir können den Code für die CheckboxListTile kopieren und können ihn zwei weitere Male in die Column einfügen. Dann heisst es, die entsprechenden Variablen anzupassen und die Verwendung der Klasse in unserem Code wäre fast abgeschlossen. Unser Formular Widget Form(...) sieht im Code dann so aus:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 | Form(
key: _formKey,
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
TextFormField(
decoration: InputDecoration(
labelText: "Vorname:",
),
validator: (inhalt) {
if (inhalt.isEmpty) {
return "Bitte geben Sie Ihren Vornamen an";
}
},
onSaved: (val) =>
setState(() => _benutzer.vorName = val),
),
TextFormField(
decoration: InputDecoration(
labelText: "Nachname:",
),
validator: (inhalt) {
if (inhalt.isEmpty) {
return "Bitte geben Sie Ihren Nachnamen an";
}
},
onSaved: (val) =>
setState(() => _benutzer.nachName = val),
),
SwitchListTile(
title: const Text('Monatlicher Newsletter'),
value: _benutzer.newsletter,
onChanged: (bool val) =>
setState(() => _benutzer.newsletter = val)
),
CheckboxListTile(
title: const Text('Kochen'),
value: _benutzer.hobby[Benutzer.HobbyKochen],
onChanged: (val) {
setState(() =>
_benutzer.hobby[Benutzer.HobbyKochen] = val);
}
),
CheckboxListTile(
title: const Text('Spielen'),
value: _benutzer.hobby[Benutzer.HobbySpielen],
onChanged: (val) {
setState(() =>
_benutzer.hobby[Benutzer.HobbySpielen] = val);
}
),
CheckboxListTile(
title: const Text('Reisen'),
value: _benutzer.hobby[Benutzer.HobbyReisen],
onChanged: (val) {
setState(() =>
_benutzer.hobby[Benutzer.HobbyReisen] = val);
}
),
]),
)
|
Noch aber sind wir nicht am Schluss. Wir erinnern uns, wir möchten die Daten speichern.
1 2 3 4 5 6 7 8 9 10 11 12 | RaisedButton(
onPressed: () {
final formular = _formKey.currentState;
if (formular.validate()) {
formular.save();
_benutzer.save();
_zeigeDialog(context);
}
},
child: Text('Speichern'),
),
|
Als letztes Widget für unsere Column implementieren wir einen RaisedButton. In seinem onPressed: Eintrag benutzen wir den GlobalKey, den wir zu Beginn unseres StatefulWidgets erzeugt haben.
So haben wir Zugriff auf die Funktion .validate. Diese führt alle Operationen der validator: Einträge aus. Sollte dort ein Problem auftauchen, muss der Benutzer es beheben. Läuft die Überprüfung ohne Fehler ab, werden die Benutzereingaben gespeichert.
Anschliessend wird eine SnackBar erzeugt, die am unteren Rand des Bildschirms eine kurze Meldung anzeigt:
1 2 3 4 5 | _zeigeDialog(BuildContext context) {
Scaffold.of(context)
.showSnackBar(SnackBar(content: Text('gespeichert')));
}
|
Bei den Tests mit diesem Code musste ich noch zwei Anpassungen vornehmen:
1 2 | final _formKey = GlobalKey<FormState>(); |
Der GlobalKey hat noch eine eindeutige Typenzuweisung benötigt und :
1 2 3 | return Scaffold(
resizeToAvoidBottomInset: false,
|
Der Code oben verhindert ein Problem beim Layout, wenn die Tastatur auf dem Bildschirm ausfährt.
 |
| Formular |
Nicht vergessen sollte man, das es sowohl vom Textfeld Element, als auch vom Switch Element noch weitere Varianten gibt. Ebenso geht diese kleine Serie zum Thema nicht auf alle Möglichkeiten ein,die diese Widgets bieten. Das würde ganz einfach den Rahmen und den Zweck dieser 3 Posts sprengen. Sie dienen ausschließlich als erste Annäherung an das Thema.
Kommentare
Kommentar veröffentlichen