Back

Utiliser TextEditingController dans Flutter

Utiliser TextEditingController dans Flutter

  1. Objectif

    • Être capable d’utiliser TextEditingController sur TextField ou TextFormField dans Flutter,
    • Classe Flutter TextEditingController pour les TextFormField

  2. Présentation

    • TextEditingController est un widget utilisé dans Flutter pour contrôler et synchroniser la saisie de texte dans un champ de saisie. Il peut être utilisé pour lire et mettre à jour le contenu d’un champ de saisie, ainsi que pour gérer les événements de saisie tels que la sélection de texte et la navigation dans le champ.
    • Un TextEditingController est un type de contrôleur spécifique utilisé pour gérer l’état et la logique d’un champ de saisie de texte dans Flutter.
    • Il peut être associé à un champ de saisie de texte via la propriété “controller” et peut être utilisé pour récupérer ou définir le contenu du champ de saisie, ainsi que pour gérer des événements tels que la sélection de texte et la modification du contenu.
    • Un TextEditingController peut également être utilisé pour vider le contenu du champ de saisie ou pour définir un texte pré-rempli.
    • A TextEditingController est essentiellement une classe qui écoute son assignation TextField et met à jour son propre état interne à chaque fois que le texte dans les TextFieldmodifications.
    • TextEditingController peut être utilisé avec le dwidget TextField pour ajouter plusieurs fonctionnalités.
    • Un TextEditingController peut être utilisé pour fournir une valeur initiale pour un TextField. Si vous construisez un TextField avec un contrôleur qui a déjà text , le TextField utilisera ce texte comme valeur initiale.
    • N’oubliez pas de supprimer le TextEditingController lorsqu’il n’est plus nécessaire. Cela garantira que nous supprimons toutes les ressources utilisées par l’objet.




  3. Comment utiliser TextEditingController dans Flutter

    • Si vous avez un widget de texte modifiable, vous devez stocker la valeur quelque part. L’approche la plus simple consiste à utiliser une variable d’état pour stocker la valeur du texte. Il existe un autre moyen puissant en définissant a TextEditingController comme contrôleur de a TextField ou TextFormField.
    • Créer un TextEditingController
      • Pour créer un TextEditingController dans Flutter, vous pouvez utiliser la classe TextEditingController. Il est généralement recommandé de créer un TextEditingController en dehors de la fonction build, dans la zone de déclaration de variables, pour s’assurer qu’il est conservé en mémoire lorsque la fonction build est appelée à nouveau.
      • Pour utiliser TextEditingController, nous devons suivre les étapes suivantes:
      • 1- Créer un contrôleur d’édition de texte
        • Pour créer un nouveau TextEditingController, appelez simplement le constructeur: TextEditingController({ String text }).
        • Vous pouvez l’appeler sans le paramètre, ce qui signifie que le texte initial est vide. Habituellement, il est stocké en tant que variable d’état : final _myController = TextEditingController().
        • vous pouvez également définir la valeur initiale en passant le textparamètre: final _myController = TextEditingController(text: 'apcpedagogie.com').
        • Une autre façon de créer un TextEditingController consiste à utiliser un constructeur nommé fromValue qui accepte a TextEditingValue comme paramètre obligatoire: TextEditingController.fromValue(TextEditingValue value).
          • Exemple:

              final _myController = TextEditingController.fromValue(TextEditingValue(text: 'apcpedagogie.com',));
            //Pour la suppression
            @override
              void dispose() {
                _myController.dispose();
                super.dispose();
              }
      • 2- Créer une fonction qui s’exécute chaque fois que le texte est modifié
      • 3- Liez la fonction au TextEditingController dans la fonction initState(). C’est pour créer le lien entre le contrôleur et la fonction
      • 4- Supprimez le TextEditingController à l’intérieur de dispose() pour le nettoyage des ressources
      • 5- Liez le contrôleur au TextField via l’ attribut controller
    • Exemple de code complet :
      • import 'package:flutter/material.dart';
        
        void main() {
          runApp(const ExempleTextFieldController());
        }
        
        class ExempleTextFieldController extends StatefulWidget {
          const ExempleTextFieldController({Key? key}) : super(key: key);
        
          @override
          State<StatefulWidget> createState() {
            return TextFieldWidget();
          }
        }
        
        class TextFieldWidget extends State<ExempleTextFieldController> {
          //Créer un nouveau TextEditingController
          final emailTextFieldController = TextEditingController();
          final copieEmailTextFieldController = TextEditingController();
        
        //Fonction qui s'exécute lorsque le texte est modifié
          @override
          void initState() {
            super.initState();
            //Link controller to the function to be executed on change
            emailTextFieldController.addListener(() {
              setState(() {
                copieEmailTextFieldController.text = emailTextFieldController.text;
              });
            });
          }
        
          @override
          void dispose() {
            //Supprimer le contrôleur lorsque le widget est supprimé
            emailTextFieldController.dispose();
            copieEmailTextFieldController.dispose();
            super.dispose();
          }
        
          @override
          Widget build(BuildContext context) {
            return MaterialApp(
              debugShowCheckedModeBanner: false,
              theme: ThemeData(primarySwatch: Colors.blue),
              home: Scaffold(
                  appBar: AppBar(title: const Text('TextField Example')),
                  body: Column(
                    children: [
                      Padding(
                        padding: const EdgeInsets.all(20),
                        child: TextField(
                          controller:
                              emailTextFieldController, //Lier controller avec TextField
                          style: const TextStyle(fontSize: 18),
                          keyboardType: TextInputType.emailAddress,
                          decoration: const InputDecoration(
                              border: OutlineInputBorder(),
                              labelText: "Email",
                              prefixIcon: Icon(Icons.email),
                              hintText: "Entrez votre email"),
                        ),
                      ),
                      Padding(
                        padding: const EdgeInsets.only(left: 20, right: 20),
                        child: TextField(
                          controller:
                              copieEmailTextFieldController, //Lier controller toavec TextField
                          style: const TextStyle(fontSize: 18),
                          keyboardType: TextInputType.emailAddress,
                          decoration: const InputDecoration(
                              border: OutlineInputBorder(),
                              labelText: "Copie Email",
                              prefixIcon: Icon(Icons.email),
                              hintText: "Entrez votre email"),
                        ),
                      ),
                    ],
                  )),
            );
          }
        }
        

        Utiliser TextEditingController dans Flutter

  4. Applications

    • App01
      • Travail demandé

        • Dans cet application, nous créons une instance de TextEditingController appelée “myController” dans la classe _MyTextFieldState. Nous l’attachons ensuite à un champ de saisie en utilisant la propriété “controller” de TextField.
        • Lorsque l’utilisateur saisit du texte dans le champ de saisie, la propriété “text” de myController est mise à jour en conséquence. Nous avons également un bouton “Show Text” qui imprime le contenu du TextEditingController dans la console lorsqu’il est appuyé.
        • Enfin, nous utilisons la méthode dispose() pour libérer les ressources de myController lorsque nous n’en avons plus besoin.
        • Solution
          import 'package:flutter/material.dart';
          
          void main() => runApp(MyApp());
          
          class MyApp extends StatelessWidget {
            @override
            Widget build(BuildContext context) {
              return MaterialApp(
                home: Scaffold(
                  body: Padding(
                    padding: EdgeInsets.all(16.0),
                    child: MyTextField(),
                  ),
                ),
              );
            }
          }
          
          class MyTextField extends StatefulWidget {
            @override
            _MyTextFieldState createState() => _MyTextFieldState();
          }
          
          class _MyTextFieldState extends State<MyTextField> {
            final myController = TextEditingController();
          
            @override
            Widget build(BuildContext context) {
              return Column(
                children: <Widget>[
                  TextField(
                    controller: myController,
                  ),
                  RaisedButton(
                    child: Text('Show Text'),
                    onPressed: () {
                      print(myController.text);
                    },
                  ),
                ],
              );
            }
            @override
            void dispose() {
              myController.dispose();
              super.dispose();
            }
          }
          
          
    • App02
      • Travail demandé

        • Créer une application Flutter basique qui affiche un champ de saisie de texte et un bouton “Submit”. Lorsque l’utilisateur saisit du texte dans le champ de saisie et appuie sur le bouton “Submit”, le texte saisi est imprimé dans la console.
        • Il est important de noter que lorsque vous utilisez un TextEditingController, il est important de libérer les ressources en appelant la méthode dispose() lorsque le widget n’est plus utilisé pour éviter les fuites de mémoire.
        • Solution
          class MyTextField extends StatefulWidget {
            @override
            _MyTextFieldState createState() => _MyTextFieldState();
          }
          
          class _MyTextFieldState extends State<MyTextField> {
            final myController = TextEditingController();
          
            @override
            Widget build(BuildContext context) {
              return Column(
                children: <Widget>[
                  TextField(
                    controller: myController,
                  ),
                  RaisedButton(
                    child: Text('Submit'),
                    onPressed: () {
                      print(myController.text);
                    },
                  ),
                ],
              );
            }
          
            @override
            void dispose() {
              myController.dispose();
              super.dispose();
            }
          }
          
    • App03
      • Travail demandé

        • 1- Créez un nouveau projet Flutter vide.
        • 2- Dans le fichier main.dart, créez une nouvelle classe Stateful appelée “MyTextField”.
        • 3- Dans la classe “MyTextField”, créez une variable “myController” de type TextEditingController.
        • 4- Dans la méthode build, ajoutez un champ de saisie de texte en utilisant le widget TextField, en utilisant “myController” comme valeur de la propriété “controller”.
        • 5- Ajoutez un bouton “Submit” en utilisant le widget RaisedButton. Lorsque l’utilisateur appuie sur ce bouton, faites en sorte qu’il affiche le contenu du champ de saisie dans la console.
        • 6- Exécutez l’application sur un émulateur ou un appareil physique, et vérifiez que vous pouvez saisir du texte dans le champ de saisie et que le contenu saisi est affiché dans la console lorsque vous appuyez sur le bouton “Submit”.
        • 7- Ajoutez une fonction dispose() dans la classe _MyTextFieldState pour disposer de myController.
        • 8- Testez à nouveau pour vérifier que tout fonctionne correctement.
        Solution
        class MyTextField extends StatefulWidget {
          @override
          _MyTextFieldState createState() => _MyTextFieldState();
        }
        
        class _MyTextFieldState extends State<MyTextField> {
          final myController = TextEditingController();
        
          @override
          Widget build(BuildContext context) {
            return Column(
              children: <Widget>[
                TextField(
                  controller: myController,
                ),
                RaisedButton(
                  child: Text('Submit'),
                  onPressed: () {
                    print(myController.text);
                  },
                ),
              ],
            );
          }
        
          @override
          void dispose() {
            myController.dispose();
            super.dispose();
          }
        }



Riadh HAJJI

Abonnez vous à notre chaîne YouTube gratuitement