Travailler avec des formulaires est une partie essentielle de toute application, qu'il s'agisse de collecter des informations auprès de l'utilisateur ou de lui permettre d'interagir avec l'application de manière plus significative. Dans Flutter, il existe plusieurs façons de travailler avec des formulaires, et dans ce chapitre, nous nous concentrerons sur l'ajout de boutons d'envoi et d'annulation à un formulaire.

Tout d'abord, commençons par créer un nouveau projet Flutter et en ajoutant un nouveau fichier appelé « form_page.dart ». Dans ce fichier, créons une nouvelle classe appelée « FormPage », qui sera un StatefulWidget. Dans cette classe, créons une variable pour notre formulaire et une fonction pour l'initialiser.

la classe FormPage étend StatefulWidget { @passer outre _FormPageState createState() => _FormPageState(); } la classe _FormPageState étend State { final _formKey = GlobalKey(); @passer outre void initState() { super.initState(); } @passer outre Construction du widget (contexte BuildContext) { retourner l'échafaudage ( barre d'application : barre d'application ( titre : Texte('Formulaire'), ), corps:Forme( clé : _formKey, enfant : Colonne ( enfants : [ // Ajoutez vos champs de formulaire ici ], ), ), ); } }

Maintenant que nous avons la structure de base de notre formulaire, nous pouvons commencer à y ajouter des champs. Par exemple, nous pouvons ajouter un TextFormField pour collecter le nom d'utilisateur. Ajoutons également un bouton de soumission et un bouton d'annulation à notre formulaire.

Colonne( enfants : [ ChampFormulaireTexte( décoration : InputDecoration(labelText : 'Nom'), validateur : (valeur) { si (valeur.isEmpty) { return 'Veuillez entrer votre nom'; } renvoie null ; }, ), Bouton surélevé ( enfant : Texte('Envoyer'), surPressé :() { si (_formKey.currentState.validate()) { // Si le formulaire est valide, afficher un Snackbar échafaudage.de (contexte) .showSnackBar(SnackBar(content: Text('Processing Data'))); } }, ), Bouton surélevé ( enfant : Texte('Annuler'), surPressé :() { // Ici vous pouvez effacer le formulaire ou revenir à la page précédente }, ), ], ),

Comme vous pouvez le constater, nous avons ajouté un TextFormField avec une simple validation pour vérifier que le champ n'est pas vide. Ensuite, nous ajoutons un RaisedButton avec une étiquette « Soumettre ». Lorsque ce bouton est enfoncé, il vérifie si le formulaire est valide. Si tel est le cas, il affiche une barre de collations avec un message indiquant que les données sont en cours de traitement.

Le bouton Annuler ne fait rien pour le moment, mais vous pouvez y ajouter des fonctionnalités, comme effacer le formulaire ou revenir à la page précédente.

Il est important de noter que Flutter propose de nombreux autres widgets que vous pouvez utiliser pour créer votre formulaire. Par exemple, vous pouvez utiliser une case à cocher, un bouton radio, un curseur, un sélecteur de date et bien d'autres. La façon de travailler avec ces widgets est très similaire à ce que nous avons montré ici, vous devriez donc pouvoir ajouter ces widgets à votre formulaire sans trop d'effort.

En résumé, travailler avec des formulaires dans Flutter est relativement simple, mais aussi très puissant. Vous pouvez créer des formulaires complexes avec une validation et une logique personnalisée sans avoir à écrire beaucoup de code. De plus, la possibilité d'ajouter des boutons de soumission et d'annulation à votre formulaire rend l'interaction de l'utilisateur avec votre application beaucoup plus agréable et intuitive.

Dans la section suivante, nous parlerons de l'utilisation de la navigation et du routage dans Flutter, qui est un autre élément essentiel de toute application. Restez à l'écoute !

Répondez maintenant à l’exercice sur le contenu :

Quel est le rôle du RaisedButton intitulé « Soumettre » dans le code du formulaire Flutter affiché ?

Tu as raison! Félicitations, passez maintenant à la page suivante

Vous avez raté! Essayer à nouveau.

Image de l'article Travailler avec des formulaires dans Flutter : stockage et soumission des données de formulaire 155

Page suivante de lebook gratuit :

Travailler avec des formulaires dans Flutter : stockage et soumission des données de formulaire

Temps de lecture estimé : 4 minutes

Téléchargez l'application pour obtenir une certification gratuite et écouter des cours en arrière-plan, même avec l'écran éteint.

+ 6,5 millions
d'étudiants

Certificat gratuit et
valide avec QR Code

48 mille exercices
gratuits

Note de 4,8/5 dans les
magasins d'applications

Cours gratuits en
vidéo, audio et texte