Flutter -- Tutorial Teil 7 Form Part 2
 |
| Formular |
Und weiter geht es mit dem Thema Formulare. Als Ergänzung zum Part 1 habe ich dem Projekt ein neues File hinzugefügt. In diesem verwalte ich die Klassen, die ich im Verlauf meiner Reise durch Flutter erstellen werde. In Part 1 haben wir den Start Up Code in main.dart erstellt, unsere Widgets landen in meine_widgets.dart und neu organisieren ich die Klassen in meine_klassen.dart.Dabei nicht vergessen die entsprechenden Files zu importieren. Im Falle des Falles wird uns die IDE darauf aufmerksam machen.....
Im ersten Teil haben wir das Grundgerüst aufgebaut und ein einfaches Textfeld. Nun möchten wir ja nicht nur ein Feld, sondern mehrere. Zusätzlich sollten die Eingaben die der Benutzer macht nicht einfach verschwinden. Wir wollen sie weiterverarbeiten.
Für die Daten bietet es sich an eine Klasse zu erstellen:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | class Benutzer { static const String Hobbykochen = 'kochen'; static const String HobbySpielen = 'spielen'; static const String HobbyReisen = 'reisen'; String vorName = ''; String nachName = ''; Map hobby = { HobbyKochen: false, HobbySpielen: false, HobbyReisen: false }; bool newsletter = false; save() { print('Daten werden gespeichert'); } } |
Wenn wir den Code oben anschauen, sollte uns nicht wirklich etwas überraschen. Die Klasse Benutzer definiert drei Zeichenketten als Konstanten, zwei weitere, einfache Zeichenketten und eine Map mit drei bool Werten. Zum Abschluss dann noch einen bool Wert und eine Funktion.
In material.dart gibt es unterschiedliche Textfelder. Das von uns verwendete TextFormField bietet uns auch die Möglichkeit an Eingaben zu überprüfen.
Als erstes aber ergänzen wir unseren Code um eine Instanz unserer Benutzer Klasse:
1 2 | final _formKey = GlobalKey(); final _benutzer = Benutzer(); |
Wir werden sie später noch einsetzen. Auch am restlichen Code nehmen wir einige, kleine Änderungen vor:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | Builder(
builder: (context)=>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),
),
]
),
),
)
|
Im Vergleich zu Part 1 wandeln wir den Container zu einer Column, dieser geben wir ein CrossAxisAlignment.stretch. Was nichts anders heisst, als das die Kinder Widgets in der horizontalen Richtung allen Platz einnehmen sollten.
Neu benutzen wir bei dem TextFormField den Eintrag validator: . Er benötigt eine Funktion, die den Inhalt des Textfeldes verarbeitet. Wie, das liegt im Ermessen des Entwicklers. In unserem Fall prüfen wir, ob das Feld leer ist. Falls ja, wird ein Text zurückgegeben.
Die nächste Möglichkeit die wir vom TextFormField Widget benutzen ist: onSaved: Sie sorgt dafür, das die Eingabe des Benutzers in unserem Datenobjekt gespeichert wird.
Der Code, so wie oben aufgeführt, ist lauffähig. Man würde aber weder vom validator: , noch vom onSaved: Eintrag, eine sichtbares Ergebnis sehen. Aber ich kann beruhigen..das kommt noch.
Wir kopieren nun das gesamte TextFormField und fügen es in der Column neu ein. Anschliessend müssen die Zeichenketten und die Variable bei onSaved: noch geändert werden, schließlich fragen wir mit dem zweiten Textfeld den Nachnamen ab. Der Code für das Nachnamen Textfeld sieht dann so aus:
1 2 3 4 5 6 7 8 9 10 11 | TextFormField(
decoration: InputDecoration(
labelText: "Nachname:",
),
validator: (inhalt){
if(inhalt.isEmpty){
return "Bitte geben Sie Ihren Nachnamen an";
}
},
onSaved: (val)=>setState(()=>_benutzer.nachName=val),
),
|
Es würde hier noch mehr zu Textfeldern zu schreiben geben, aber das ist Thema für einen anderen Artikel. Kommen wir stattdessen zu einer anderen Art von Input Widgets:
1 2 3 4 5 6 | SwitchListTile(
title: const Text('Monatlicher Newsletter'),
value: _benutzer.newsletter,
onChanged: (bool val) =>
setState(() => _benutzer.newsletter = val)
),
|
Oben steht der Code für ein Switch Element. Jeder wird so ein Element schon angetroffen haben. Es kennt genau zwei Stellungen, an oder aus. Auf Flutter bezogen wird das zu einer bool Variablen, die entweder true oder false sein kann.
Der title: Eintrag sollte selbsterklärend sein, der value: Eintrag ist eine bool Variable unseres Objekts _benutzer.
onChanged wiederum löst aus, das der Wert in unserem _benutzer Objekt mit setState aktualisiert wird.
Im nächsten Teil dieses Artikels werden wir das Beispiel vervollständigen. Bis bald !
Kommentare
Kommentar veröffentlichen