Back

Valider un formulaire avec Flutter

 

Valider un formulaire avec Flutter

 

  1. Objectif

    • Dans ce tutoriel, découvrez comment ajouter une validation à un formulaire
  2. Présentation

    • Un Form flutter est un composant essentiel du développement d’applications Fluter. Lorsque nous créons un formulaire, nous devons implémenter la validation, la soumission, etc. du formulaire. Dans ce tutoriel, vous apprendrez à créer, valider et utiliser un formulaire dans Flutter.
    • La page de soumission de formulaire est utilisée pour soumettre les données saisies par l’utilisateur à partir du formulaire, et cela peut être fait de plusieurs façons en un clin d’œil.
    • Les données du formulaire seront validées, et si la validation réussit, il soumettra les données. Si la validation échoue, un simple message d’erreur s’affichera pour nous informer de l’erreur.
    • La création et la validation d’un formulaire comprennent les étapes suivantes :
      • 1- Page de construction
      • 2. Ajouter des validations
      • 3. Ajouter une action pour valider le formulaire



  3. Étapes de validation du formulaire avec Flutter

    • Étape 1- Créer un formulaire avec un GlobalKey<FormState>.
      • Utilisez d’abord le Widget Form , cela fonctionnera en groupe et vous aidera à gérer facilement la validation de plusieurs champs de texte de formulaires flutter.
      • Ensuite, après avoir créé un formulaire en flutter, fournissez-lui GlobalKey<FormState> , cela vous aidera à permettre à la validation de se former dans le bon ordre et très facilement.
      • final _formKey = GlobalKey<FormState>();
        @override
          Widget build(BuildContext context) {
            // Construire un widget Formulaire (Form) en utilisant le _formKey créé ci-dessus.
            return Form(
              key: _formKey,    
              child: Column(
                children: <Widget>[
                      // Ajouter des TextFormFields et ElevatedButton ici.
                ]
             )
            );
          }
    • Étape 2- Ajoutez du TextFormField avec la validation requise.
      • Le widget TextFormField provient de la conception matérielle et peut également afficher erreur de validation , chaque fois qu’un utilisateur ne remplit pas l’exigence TextFormField,
      • nous pouvons le faire en appliquant des règles de validation à un champ de texte flutter particulier en lui fournissant des règles de propriétés de validation.
      • Si l’utilisateur saisit une entrée non valide, la fonction Validator dans Flutter la détectera et renverra un message d’erreur approprié au bas de TextField.
      • TextFormField(
          // Le validateur reçoit le texte que l'utilisateur a saisi.
          validator: (value) {
            if (value.isEmpty) {
              return 'Veuillez saisir du texte';
            }
            return null;
          },
        );
    • Étape 3- Créez un bouton où vous vérifiez la validation du formulaire flutter et soumettez-le.
      • La création d’un bouton devrait être à l’intérieur de Widget Form, à l’aide duquel l’utilisateur peut soumettre le formulaire rempli d’informations.
      • Lorsqu’un utilisateur tente de soumettre le formulaire onPressed, nous vérifierons si le champ du formulaire flutetr par l’utilisateur est conforme à la validation requise, puis si le formulaire est valide, envoyez toutes les informations de données au serveur de base de données pour être enregistrées, sinon si le formulaire est invalid alors afficher un message d’erreur approprié à l’utilisateur sous le champ de texte flutter où la validation n’est pas autorisée.
      • child: ElevatedButton(
                        onPressed: () {
                          if (_formKey.currentState!.validate()) {
                            // If the form is valid, display a Snackbar.
                            //Scaffold.of(context).showSnackBar(SnackBar(content: Text('Data is in processing.')));
                            ScaffoldMessenger.of(context).showSnackBar(const SnackBar(
                                content: Text(
                                    "Saisissez ici quelque chose à afficher sur le snack-bar")));
                          }
                        },
                        child: const Text('Submit'),
                      )),
  4. Réalisation

    • Nous allons donc créer un formulaire d’ inscription avec quelques champs :
      • Prénom
      • Nom de famille
      • Mot de passe
      • Confirmez le mot de passe
      • et un bouton d’inscription .
    • Étape 1 : Créer un formulaire avec une GlobalKey.

      • La clé globale (GlobalKey) est utilisée pour identifier de manière unique le formulaire et permet la validation du formulaire lors d’une étape ultérieure.
      • GlobalKey, il s’agit d’une clé unique sur l’ensemble de l’application. Grâce à cette clé, on peut trouver et accéder au Élément en question et récupérer ses State et Widget.
      • final _formKey = GlobalKey<FormState>();
      • Pour créer un formulaire, vous devez d’abord définir une clé globale (GlobalKey). Dans notre exemple, nous avons défini a _formKey comme une clé globale.
      • Une clé globale ou GlobalKey est une clé qui, lorsqu’elle est transmise en tant que clé dans un widget, peut différencier le widget de tous les widgets d’une arborescence de widgets.
      • Tout d’abord, nous allons créer un formulaire. Le widget de formulaire agira comme un conteneur pour regrouper et valider plusieurs champs de formulaire.
      • Pour identifier le formulaire de manière unique, nous devons fournir une GlobalKey lors de la création du formulaire.
      • Soumettre un formulaire avec Flutter

    • Étape 2 : Ajouter un TextFormField avec une logique de validation

      • L’étape suivante consiste à ajouter TextFormField. Ce widget affiche un champ de texte de conception de matériau et peut afficher les erreurs de validation lorsqu’elles se produisent.
      • L’entrée est validée en fournissant une fonction validator() au TextFormField. Si la valeur saisie par l’utilisateur n’est pas valide, la fonction de validation renverra un message d’erreur. S’il n’y a pas d’erreurs, le validateur renverra un null.
      • Dans cet exemple, nous créons un validateur qui garantit que TextFormField n’est pas vide. S’il est vide, il renverra un message d’erreur personnalisé.



Riadh HAJJI

Abonnez vous à notre chaîne YouTube gratuitement