Le widget TextField dans Flutter

Le widget TextField dans Flutter

  1. Objectif

    • Apprendre à utiliser un widget TextField en flutter et ses propriétés en détail
  2. Présentation

    • Dans Flutter,le widget TextField est utilisé pour obtenir une entrée en caractères alphanumériques de l’utilisateur de l’application.
    • TextField permet à l’utilisateur de l’application d’entrer des données dans l’application.
    • Le widget TextField est le plus souvent utilisé pour créer des formulaires de saisie d’application où le développeur doit demander plusieurs types d’informations à l’utilisateur.
    • Nous pouvons également ajouter plusieurs attributs avec TextField, tels que l’étiquette, l’icône, le texte d’indication en ligne et le texte d’erreur en utilisant un InputDecoration comme décoration. Si nous voulons supprimer entièrement les propriétés de décoration, il est nécessaire de définir la décoration sur null .
    • Certains des attributs les plus couramment utilisés avec le widget TextField sont les suivants :
      • decoration : pour afficher la décoration autour du champ de texte.
      • border : crée une bordure rectangulaire arrondie par défaut autour du champ de texte.
      • labelText : pour afficher le texte de l’étiquette lors de la sélection du champ de texte.
      • hintText : pour afficher le texte de l’indice dans le champ de texte.
  3. Créer un TextField dans Flutter

    • Le code suivant explique un exemple de démonstration du widget TextFiled dans Flutter.
    • Commencer par créer un nouveau projet dont le nom “exemple_text_field”
    • Dans le fichier “main.dart” importer le package material.dart dans l’application .
      • import 'package:flutter/material.dart';
    • Appeler la classe principale MyApp en utilisant la fonction void main run app.
      • Ex01

        void main() {
          runApp(const MyApp());
        }
        Ex02

        void main() => runApp(const MyApp());
    • Créer la classe de widget principale nommée MyApp qui s’étend avec le widget sans état.
      • class MyApp extends StatelessWidget {
        .....
        .....
        }
    • Créer un widget Scaffold -> Widget center ->Widget column dans la zone de construction du widget dans la classe précédemment crée.
      • class MyApp extends StatelessWidget {
          const MyApp({Key? key}) : super(key: key);
          @override
          Widget build(BuildContext context) {
            return MaterialApp(
                home: Scaffold(
                    body: Center(
                        child: Column(
                            mainAxisAlignment: MainAxisAlignment.center,
                            children: const []))));
          }
        }
    • Créer un widget Conteneur puis placer-y le widget TextField .
    • Le widget TextField ne supportait pas directement la largeur et la hauteur.
    • Container(
                  width: 300,
                  child: TextField(
                      decoration: InputDecoration(
                      border: OutlineInputBorder(),
                      labelText: 'Entrez le nom ici',
                      hintText: 'Entrez le nom ici',
                       ),
                        autofocus: false,
                       )
                     )
      Capture d’écran Avant sélection

      Le widget TextField dans Flutter

      Après sélection

      Le widget TextField dans Flutter

    • Ajouter un AppBar à l’exemple précédent
    • Capture d’écran

      Le widget TextField dans Flutter

      Code à ajouter

      home: Scaffold(
                  appBar: AppBar(
                    title: const Text('Application TextField'),
                  ),
                  body: Center(
                      .........
    • Voyons le code source complet qui contient le widget TextField.
      import 'package:flutter/material.dart';
      void main() => runApp(const MyApp());
      class MyApp extends StatelessWidget {
        const MyApp({Key? key}) : super(key: key);
        @override
        Widget build(BuildContext context) {
          return MaterialApp(
              home: Scaffold(
                  appBar: AppBar(
                    title: const Text('Application TextField'),
                  ),
                  body: Center(
                      child: Column(
                          mainAxisAlignment: MainAxisAlignment.center,
                          children: [
                        // ignore: sized_box_for_whitespace
                        Container(
                            width: 300,
                            child: const TextField(
                              decoration: InputDecoration(
                                border: OutlineInputBorder(),
                                labelText: 'Entrez le nom ici',
                                hintText: 'Entrez le nom ici',
                              ),
                              autofocus: false,
                            ))
                      ]))));
        }
      }
  4. Applications

    • App 01
      • Travail demandé

        • 01- Réaliser une application flutter contenant une interface utilisateur similaire à la capture d’écran suivante :
        • Le widget TextField dans Flutter

      • Correction

        • import 'package:flutter/material.dart';
          
          void main() {
            runApp(MaterialApp(
              home: MyApp(),
            ));
          }
          
          class MyApp extends StatefulWidget {
            @override
            _State createState() => _State();
          }
          
          class _State extends State {
            @override
            Widget build(BuildContext context) {
              return Scaffold(
                  appBar: AppBar(
                    title: const Text('Application 01 textField Flutter'),
                  ),
                  body: Padding(
                      padding: const EdgeInsets.all(10),
                      child: Column(
                        children: const [
                          TextField(
                            decoration: InputDecoration(
                              border: OutlineInputBorder(),
                              labelText: 'Utilisateur',
                            ),
                          )
                        ],
                      )));
            }
          }
      • App 02
        • Travail demandé

          • 01- Réaliser une application flutter contenant une interface utilisateur similaire à la capture d’écran suivante :
          • Le widget TextField dans Flutter

          • 02- Un clique à l’intérieur de l’une des zones de texte, permet d’afficher un clavier en bas de l’écran, l’étiquette va dans le coin supérieur gauche de la bordure et le texte d’indication affiché dans le champ. La capture d’écran ci-dessous l’explique plus clairement :
          • Le widget TextField dans Flutter

        • Correction

          • import 'package:flutter/material.dart';
            
            void main() {
              runApp(const MyApp());
            }
            
            class MyApp extends StatelessWidget {
              const MyApp({Key? key}) : super(key: key);
            
              @override
              Widget build(BuildContext context) {
                return const MaterialApp(
                  home: Home(),
                );
              }
            }
            
            class Home extends StatefulWidget {
              const Home({Key? key}) : super(key: key);
            
              @override
              _HomeState createState() => _HomeState();
            }
            
            class _HomeState extends State {
              TextEditingController username = TextEditingController();
              TextEditingController password = TextEditingController();
              @override
              void initState() {
                username.text = ""; //innitail value of text field
                password.text = "";
                super.initState();
              }
            
              @override
              Widget build(BuildContext context) {
                return Scaffold(
                    appBar: AppBar(
                      title: const Text('Utiliser les TextField',
                          style: TextStyle(color: Color.fromARGB(255, 7, 49, 233))),
                      backgroundColor: const Color.fromARGB(255, 64, 249, 255),
                    ),
                    body: Container(
                      padding: const EdgeInsets.all(20),
                      child: Column(
                        children: [
                          TextField(
                              controller: username,
                              decoration: InputDecoration(
                                labelText: "Nom d'utilisateur",
                                prefixIcon: const Icon(Icons.people),
                                border: mes_bordures(),
                                enabledBorder: mes_bordures(),
                                focusedBorder: mes_focusborder(),
                              )),
                          Container(height: 20),
                          TextField(
                              controller: password,
                              decoration: InputDecoration(
                                prefixIcon: const Icon(Icons.lock),
                                labelText: "Mot de passe",
                                enabledBorder: mes_bordures(),
                                focusedBorder: mes_focusborder(),
                              )),
                        ],
                      ),
                    ));
              }
            
              // ignore: non_constant_identifier_names
              OutlineInputBorder mes_bordures() {
                //return type is OutlineInputBorder
                return const OutlineInputBorder(
                    //Outline border type for TextFeild
                    borderRadius: BorderRadius.all(Radius.circular(10)),
                    borderSide: BorderSide(
                      color: Colors.redAccent,
                      width: 3,
                    ));
              }
            
              // ignore: non_constant_identifier_names
              OutlineInputBorder mes_focusborder() {
                return const OutlineInputBorder(
                    borderRadius: BorderRadius.all(Radius.circular(10)),
                    borderSide: BorderSide(
                      color: Colors.greenAccent,
                      width: 3,
                    ));
              }
            
              //create a function like this so that you can use it wherever you want
            }