Utiliser TextEditingController dans Flutter

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.

• 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

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"),
                ),
              ),
            ],
          )),
    );
  }
}

• 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();
  }
}

• 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();
  }
}

• 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();
  }
}