Avec ce tutoriel Flutter, je vais vous présenter la manière de construire un formulaire avec vérification pour éviter que la saisie soit non-nulle associé à un message d’alerte via une SnackBar d’alerte. Comme d’habitude je partage le code dans ce billet consacré à Flutter.
Le formulaire avec validation
Les applications demandent souvent aux utilisateurs de saisir des informations dans un champ de texte. Par exemple, vous pouvez demander aux utilisateurs de saisir un identifiant et un mot de passe pour valider l’accès à un espace privé.
Pour que votre application soit sûres et faciles à utiliser, vous devez vérifier si les informations fournies par l’utilisateur sont valides. Si l’utilisateur a correctement rempli le formulaire, traitez les informations. Si l’utilisateur soumet des informations incorrectes, affichez un message d’erreur convivial pour lui faire savoir ce qui ne s’est pas passé.
C’est à ce moment qu’intervient la SnackBar.
Le code du champ de formulaire :
TextFormField(
maxLength: 25,
decoration: const InputDecoration(
labelText: 'Champ de formulaire',
hintText: 'Entrer du texte',
border: OutlineInputBorder()),
validator: (value) {
if (value.isEmpty) {
return 'Veuillez saisir un texte';
}
return null;
},
)
La SnackBar
Elle permet d’informer brièvement vos utilisateurs lorsque certaines actions ont lieu. Par exemple, lorsqu’un utilisateur glisse un message dans une liste, vous pouvez l’informer que le message a été supprimé.
Vous pourriez même leur donner une option pour annuler l’action.
Le code du bouton de validation et de la snackbar de confirmation :
child: RaisedButton(
onPressed: () {
// Retourne true si le formulaire est valide, sinon false
if (_formKey.currentState.validate()) {
// Affiche le Snackbar si le formulaire est valide
Scaffold.of(context).showSnackBar(
SnackBar(content: Text('Traitement en cours')));
}
},
child: Text('Envoyer'),
)
Construire un formulaire et une SnackBar d’alerte
Dans l’exemple que je vous propose dans ce tutoriel Flutter, vous allez apprendre comment ajouter une validation à un formulaire qui comporte un seul champ de texte en suivant les étapes suivantes :
- Créer un formulaire avec une clé globale.
- Ajouter un champ de type TextFormField avec une logique de validation.
- Créez un bouton pour valider et soumettre le formulaire.
- Afficher une SnackBar lorsque la saisie est valide (non-nulle)
- Fournir une action facultative
Voici le code complet du tuto Flutter :
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Formulaire et Snackbar',
theme: ThemeData(
primarySwatch: Colors.orange,
),
home: MyHomePage(title: 'Formulaire et Snackbar'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Container(
child: MyCustomForm(),
),
);
}
}
class MyCustomForm extends StatefulWidget {
@override
MyCustomFormState createState() {
return MyCustomFormState();
}
}
class MyCustomFormState extends State<MyCustomForm> {
final _formKey = GlobalKey<FormState>();
@override
Widget build(BuildContext context) {
// Construire le formulaire avec _formKey créé au-dessus
return Form(
key: _formKey,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
TextFormField(
validator: (value) {
if (value.isEmpty) {
return 'Veuillez saisir un texte';
}
return null;
},
),
Padding(
padding: const EdgeInsets.symmetric(vertical: 16.0),
child: RaisedButton(
onPressed: () {
// Retourne true si le formulaire est valide, sinon false
if (_formKey.currentState.validate()) {
// Affiche le Snackbar si le formulaire est valide
Scaffold.of(context).showSnackBar(
SnackBar(content: Text('Traitement en cours')));
}
},
child: Text('Envoyer'),
),
),
],
),
);
}
}
Retrouvez le code de ce tuto sur GitLab
J’espère que ce projet vous aidera à mieux comprendre comment construire un formulaire et une SnackBar avec Flutter. N’hésitez pas à ajouter vos commentaires ou questions ci-dessous, je me ferai un plaisir d’y répondre.
Mise à jour : 12 octobre 2019
Photo by Josh Hild from Pexels
