Quelle est la différence entre TextFormField et TextField?
Je suis nouveau sur Flutter (et Dart) et lorsque j'essaie de créer un formulaire pour modifier un objet, j'ai recherché en ligne des exemples et des didacticiels, et j'ai vu les deux utilisés.
Quelle est la différence entre les deux? Lequel devrais-je utiliser?
Réponse courte
Si vous ne savez pas de quoi vous avez besoin, utilisez un TextField. Il s'agit du widget Flutter le plus basique pour obtenir la saisie de texte d'un utilisateur. C'est celui que vous devez maîtriser en premier.
Champ de texte
L'utilisation d'un TextField est un moyen simple d'autoriser la saisie par l'utilisateur.
TextField(
decoration: InputDecoration(
hintText: 'Name'
),
);
Pour obtenir le texte que l'utilisateur a entré, vous pouvez soit être averti chaque fois qu'il y a un changement comme celui-ci:
TextField(
decoration: InputDecoration(
hintText: 'Name'
),
onChanged: (text) {
// do something with text
},
),
Ou vous pouvez utiliser un TextEditingController, comme décrit ici . Cela vous donnera accès à l'état du texte.
TextFormField
Si vous devez valider la saisie de texte utilisateur avant de l'enregistrer, vous pouvez envisager d'utiliser un TextFormField. Imaginez quelque chose comme ça:
Il y a beaucoup de vérifications de validation que vous voudrez peut-être faire sur un nom d'utilisateur et un mot de passe.
Bien sûr, vous pouvez toujours utiliser quelques TextFields, mais TextFormField a des fonctionnalités intégrées supplémentaires qui vous faciliteront la vie. En général, vous n'utiliserez un TextFormField que lorsque vous l'utiliserez à l'intérieur d'un widget Form (bien que ce ne soit pas une exigence stricte).
Voici un exemple dépouillé de la documentation :
class MyCustomForm extends StatefulWidget {
@override
MyCustomFormState createState() {
return MyCustomFormState();
}
}
class MyCustomFormState extends State<MyCustomForm> {
final _formKey = GlobalKey<FormState>();
@override
Widget build(BuildContext context) {
return Form(
key: _formKey,
child: Column(
children: <Widget>[
TextFormField(
validator: (value) {
// validation logic
},
),
RaisedButton(
child: Text('Submit'),
onPressed: () {
if (_formKey.currentState.validate()) {
// text in form is valid
}
},
),
],
),
);
}
}