Le widget TextFormField dans Flutter

Le widget TextFormField dans Flutter

1. Objectif

   • Cet article explique comment utiliser le widget TextFormField dans Flutter en flutter.

2. Présentation

   • Le widget TextFormField est un widget dans Flutter utilisé pour collecter les entrées utilisateur dans les formulaires.
   • Il s’agit d’un widget de saisie de texte qui s’intègre au widget Formulaire. Il permet à l’utilisateur d’entrer du texte et fournit une validation pour les données saisies.
   • Il peut également inclure des fonctionnalités supplémentaires telles que la décoration, les formateurs d’entrée et les rappels pour gérer les modifications apportées à la valeur d’entrée.
   • Le widget TextFormField est utilisé pour recevoir les entrées de l'utilisateur dans flutter . Il s'agit d'un widget d'entrée utilisateur simple et facile dans Flutter .
   • Vous pouvez personnaliser le TextFormField en utilisant les propriétés de décoration, de validation et d'autres. Assurez-vous d'utiliser le widget Form dans le même widget parent pour gérer la validation du formulaire.

3. Comment créer TextFormField dans Flutter

   • Pour créer un TextFormField dans Flutter, vous pouvez utiliser le widget TextFormField fourni par la bibliothèque Flutter. Vous pouvez le faire en ajoutant le code suivant dans votre fichier Dart :

   TextFormField(
     decoration: InputDecoration(
       labelText: 'Nom',
       hintText: 'Entrez votre nom',
       border: OutlineInputBorder(
         borderRadius: BorderRadius.circular(10),
       ),
     ),
     validator: (value) {
       if (value.isEmpty) {
         return 'S\'il vous plaît entrez votre nom';
       }
       return null;
     },
     onSaved: (value) {
       _nom = value;
     },
   ),

   Dans ce code, nous avons défini un TextFormField avec une décoration d’InputDecoration qui comprend un labelText, un hintText et une bordure. Nous avons également défini un validateur pour vérifier si la valeur entrée est vide et une méthode onSaved pour enregistrer la valeur entrée.

4. Comment utiliser un TextFormField dans un formulaire Flutter

   • Pour utiliser un TextFormField dans un formulaire Flutter, vous pouvez suivre les étapes suivantes:

     1. Importer les packages nécessaires

        • Commencez par importer le package flutter/material.dart, qui contient tous les widgets et fonctionnalités nécessaires pour créer des interfaces Flutter.

        import 'package:flutter/material.dart';

     2. Définir un état global pour le formulaire

        • Créez un GlobalKey<FormState> pour identifier de manière unique le formulaire et gérer l’état du formulaire.
        • Utilisez également une variable pour stocker les données saisies dans le champ (exemple email).

        final _formKey = GlobalKey<FormState>();
        String _email = '';

        • _formKey permet de vérifier la validité du formulaire, d’accéder à ses champs et d'appeler des fonctions telles que validate ou save.

     3. Créer le widget Form dans la méthode build

        • Dans la méthode build, enveloppez les TextFormField dans un widget Form. Ce Form servira de conteneur pour les champs de texte et gérera leur validation.

        @override
          Widget build(BuildContext context) {
            return Form(
              key: _formKey,
              child: Column(
                children: [
                  TextFormField(
                    validator: (value) {
                      if (value.isEmpty) {
                        return 'Entrez un email valide';
                      }
                      return null;
                    },
                    onSaved: (value) => _email = value,
                    decoration: InputDecoration(labelText: 'Email'),
                  ),
                  ElevatedButton(
                        onPressed: () {
                          if (_formKey.currentState!.validate()) {
                            ScaffoldMessenger.of(context).showSnackBar(
                                const SnackBar(content: Text('Données en cours')));
                          }
                        },
                        child: const Text('Submit'),
                    ),
                ],
              ),
            );
          }

     4. Exemple

        

5. Comment gérer la saisie de l'utilisateur dans un TextFormField

   • Pour gérer la saisie de l’utilisateur dans un TextFormField dans Flutter, vous pouvez utiliser un TextEditingController pour suivre, écouter, valider et récupérer les données saisies dans le champ de texte.
   • Il existe plusieurs méthodes pour gérer la saisie de l'utilisateur dans un TextFormField dans Flutter. Voici les étapes à suivre pour y parvenir :

     1. Créer un TextEditingController

        • Créez un objet controller pour le TextFormField en utilisant le contrôleur TextEditingController.
        • Un TextEditingController est un objet qui sert à manipuler et surveiller le contenu d’un TextFormField. Vous devez créer une instance de ce contrôleur dans votre widget afin de suivre les saisies des utilisateurs.
        • Créez un objet TextEditingController comme ci-dessous et affectez-le à la propriété controller de TextFormField. Son objet contiendra les données d'entrée.

        TextEditingController userInputController = TextEditingController() ;

     2. Cela crée un contrôleur nommé userInputController que vous pouvez associer à un TextFormField. Ce contrôleur va stocker la valeur saisie par l'utilisateur et permettre d'accéder à ses données.

6. Associer le contrôleur au TextFormField

   • Pour lier le contrôleur à votre TextFormField, vous devez passer cet objet userInputController à la propriété controller du TextFormField. Cela relie le champ de texte à votre contrôleur, permettant ainsi d'accéder et de gérer le texte saisi par l’utilisateur.

   TextFormField(
     controller: userInputController,
     decoration: InputDecoration(labelText: 'Enter text'),
   );

   • Où "userInputController" est le nom de votre contrôleur prédéfini.

7. Écouter les modifications du texte avec addListener

   • Pour réagir en temps réel aux modifications de l’utilisateur, vous pouvez utiliser la méthode addListener() sur le contrôleur. Avec cette méthode, chaque fois que l'utilisateur saisit du texte, le listener s'active, et vous pouvez déclencher des actions spécifiques, comme valider l'entrée, mettre à jour l'interface, ou enregistrer la saisie en continu :

   .addListener(() {
     print('Current input: ${userInputController.text}');
   });

8. Valider la saisie de l’utilisateur

   • Flutter fournit un validateur intégré pour les formulaires en utilisant un widget Form.
   • Flutter offre une méthode de validation pour les formulaires qui peut être utilisée dans TextFormField. Vous pouvez utiliser validator pour définir des règles spécifiques pour la saisie de l’utilisateur (par exemple, vérifier si le champ n’est pas vide ou si le format du texte est correct).

   Form(
     key: _formKey,
     child: TextFormField(
       controller: userInputController,
       decoration: InputDecoration(labelText: 'Enter text'),
       validator: (value) {
         if (value == null || value.isEmpty) {
           return 'Please enter some text';
         }
         return null;  // Renvoie null si la saisie est valide
       },
     ),
   );

   • Ici, si l’entrée ne contient pas de « @ », un message d’erreur sera affiché, et l’utilisateur sera invité à saisir une adresse e-mail correcte.
   • La validation est particulièrement utile lorsque vous travaillez avec des formulaires complexes, où plusieurs champs doivent être validés simultanément.

9. Récupérer la valeur saisie avec text

   • Pour récupérer la valeur saisie par l’utilisateur dans le TextFormField, accédez simplement à la propriété text du contrôleur.
   • Cela est particulièrement utile lorsque vous devez traiter ou envoyer les données saisies lorsque l’utilisateur appuie sur un bouton ou termine une action.

   ElevatedButton(
     onPressed: () {
       final userInput = userInputController.text;
       print("User input: $userInput");
     },
     child: Text('Submit'),
   );

   • Dans cet exemple, lorsque l’utilisateur appuie sur le bouton Submit, la valeur saisie dans le TextFormField est affichée dans la console.

10. Libirer le contrôleur

    • Lorsque le contrôleur n'est plus nécessaire, libérez-le pour éviter les fuites de mémoire. Dans une application Flutter, vous pouvez le faire dans la méthode dispose:

    @override
    void dispose() {
      userInputController.dispose();
      super.dispose();
    }