Back

InputDecoration pour TextField et TextFormField

 

InputDecoration pour TextField et TextFormField

 

  1. Objectif

    • Être capable d’utiliser le texte d’indication et d’étiquette sur le widget TextField
  2. Décoration

    • Pas de décoration
      • const TextField(),

        InputDecoration pour TextField et TextFormField

    • Icon
      • Icon

        • TextField(
                          decoration: const InputDecoration(
                              icon: Icon(Icons.favorite) //label style
                              ),
                        ),

          InputDecoration pour TextField et TextFormField

      • Prefix icon

        • TextField(
                          decoration: const InputDecoration(
                              prefixIcon: Icon(Icons.favorite) //label style
                              ),
                        ),
          

          InputDecoration pour TextField et TextFormField

      • Suffix icon

        • TextField(
                          suffixIcon: const InputDecoration(
                              prefixIcon: Icon(Icons.favorite) //label style
                              ),
                        ),
          

          InputDecoration pour TextField et TextFormField




    • Prefix
      • Prefix

        • TextField(
                          decoration: InputDecoration(
                            prefix: Container(
                            width: 30,height: 10,color: Colors.blueAccent,)),
                        ),

          InputDecoration pour TextField et TextFormField

      • Prefix text

        • TextField(
                          decoration: InputDecoration(
                            prefixText: 'Utilisateur: '
                        ),

          InputDecoration pour TextField et TextFormField

    • Hint text
      • TextField(
                        decoration: InputDecoration(
                          hintText: "Entrer votre Email", 
                      ),

        InputDecoration pour TextField et TextFormField

    • Suffix text
      • TextField(
                        decoration: InputDecoration(
                         suffixText: 'Email',
                      ),

        InputDecoration pour TextField et TextFormField

    • Label text
      • Label text

        • TextField(
                          decoration: InputDecoration(
                            labelText: "Nom d'utilisateur", //babel text
                        ),

          InputDecoration pour TextField et TextFormField

      • Floating label behavior: Auto

        • TextField(
                          decoration: InputDecoration(
                            labelText: "Nom d'utilisateur",
                            floatingLabelBehavior: FloatingLabelBehavior.auto,
                        ),

          InputDecoration pour TextField et TextFormField

      • Floating label behavior: Always

        • TextField(
                          decoration: InputDecoration(
                            labelText: "Nom d'utilisateur",
                            floatingLabelBehavior: FloatingLabelBehavior.always,
                        ),

          InputDecoration pour TextField et TextFormField1

      • Floating label behavior: Never

        • TextField(
                          decoration: InputDecoration(
                            labelText: "Nom d'utilisateur",
                            floatingLabelBehavior: FloatingLabelBehavior.never,
                        ),

    • errorText
      • TextField(
                        decoration: InputDecoration(
                          errorText: "Nom d'utilisateur",
                      ),

        InputDecoration pour TextField et TextFormField

    • Helper text
      • TextField(
                        decoration: InputDecoration(
                          helperText: 'Nom d'utilisateur',
                      ),

        InputDecoration pour TextField et TextFormField9

    • Counter
      • TextField(
                        decoration: InputDecoration(
                          counter: Container(width: 30, height: 10, color: Colors.blueAccent,),
                      ),

        InputDecoration pour TextField et TextFormField9

    • Counter text
      • TextField(
                        decoration: InputDecoration(
                          counterText:'Nom d'utilisateur',
                      ),

        InputDecoration pour TextField et TextFormField9

    • Définissez le texte de l’étiquette et de l’indice sur le widget TextFiled :
      • TextField( 
          decoration: InputDecoration( 
              labelText: "Username", //babel text
              hintText: "Entrer votre Email", //hint text
              prefixIcon: Icon(Icons.people), //prefix iocn
              hintStyle: TextStyle(fontSize: 18, fontWeight: FontWeight.bold), //hint text style
              labelStyle: TextStyle(fontSize: 13, color: Colors.redAccent), //label style
          )
        )

        InputDecoration pour TextField et TextFormField

  3. Style

    • Couleur du texte

      • L’exemple ci-dessous montre hintStyle, mais il fonctionne de la même manière pour définir un TextStyle pour labelStyle, counterStyle, errorStyle, prefixStyle, suffixStyle et helperStyle.
      • TextField(
                        decoration: InputDecoration(
                          hintText: "Entrer votre Email",
                          hintStyle: TextStyle(color: Colors.blueAccent), 
                      ),

        InputDecoration pour TextField et TextFormField

    • Couleur d’arrière plan

      • TextField(
                        decoration: InputDecoration(
                          filled: true,
                          fillColor: Colors.blue.shade100, 
                      ),

    • Hover color

      • TextField(
                        decoration: InputDecoration(
                          filled: true,
                          fillColor: Colors.blue.shade100,
                          border: OutlineInputBorder(), 
                      ),

        InputDecoration pour TextField et TextFormField4

  4. Application

    • App01
      • Réaliser une application flutter simple basée sur l’image ci-dessous
        • Travail demandé

          InputDecoration pour TextField et TextFormField

          Solution
          import 'package:flutter/material.dart';
          
          void main() => runApp(const MyApp());
          
          class MyApp extends StatelessWidget {
            const MyApp({super.key});
          
            @override
            Widget build(BuildContext context) {
              return const MaterialApp(
                debugShowCheckedModeBanner: false,
                home: Home(),
              );
            }
          }
          
          class Home extends StatefulWidget {
            const Home({super.key});
          
            @override
            _HomeState createState() => _HomeState();
          }
          
          class _HomeState extends State {
            TextEditingController username = TextEditingController();
            TextEditingController password = TextEditingController();
            @override
            void initState() {
              username.text = ""; //initail value of text field
              password.text = "";
              super.initState();
            }
          
            @override
            Widget build(BuildContext context) {
              return Scaffold(
                  appBar: AppBar(
                    title: const Text("Hint et Label d'un TextField"),
                    backgroundColor: const Color.fromARGB(255, 67, 64, 255),
                  ),
                  body: Container(
                    padding: const EdgeInsets.all(20),
                    child: Column(
                      children: [
                        TextField(
                          controller: username,
                          decoration: const InputDecoration(
                            labelText: "Nom d'utilisateur", //babel text
                            hintText: "Entrer votre Email", //hint text
                            prefixIcon: Icon(Icons.people), //prefix iocn
                            hintStyle: TextStyle(
                                fontSize: 18,
                                fontWeight: FontWeight.bold), //hint text style
                            labelStyle: TextStyle(
                                fontSize: 13, color: Colors.blueAccent), //label style
                          ),
                        ),
          
                        Container(height: 20), //space between text field
          
                        TextField(
                            controller: password,
                            decoration: const InputDecoration(
                              prefixIcon: Icon(Icons.lock),
                              labelText: "Mot de passe",
                              hintText: "Saisir votre mot de passe",
                              hintStyle:
                                  TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
                              labelStyle:
                                  TextStyle(fontSize: 13, color: Colors.deepPurpleAccent),
                            )),
                      ],
                    ),
                  ));
            }
          }
          
    • App02
      • Réaliser une application flutter simple basée sur l’image ci-dessous
        • Travail demandé

          InputDecoration pour TextField et TextFormField

          Solution
          import 'package:flutter/material.dart';
          void main() => runApp(const MyApp());
          
          class MyApp extends StatelessWidget {
            const MyApp({super.key});
          
            @override
            Widget build(BuildContext context) {
              return const MaterialApp(
                debugShowCheckedModeBanner: false,
                home: Home(),
              );
            }
          }
          
          class Home extends StatefulWidget {
            const Home({super.key});
          
            @override
            _HomeState createState() => _HomeState();
          }
          
          class _HomeState extends State {
            TextEditingController username = TextEditingController();
            TextEditingController password = TextEditingController();
            @override
            void initState() {
              username.text = ""; //initail value of text field
              password.text = "";
              super.initState();
            }
          
            @override
            Widget build(BuildContext context) {
              return Scaffold(
                  appBar: AppBar(
                    title: const Text("Hint et Label d'un TextField"),
                    backgroundColor: const Color.fromARGB(255, 67, 64, 255),
                  ),
                  body: Container(
                    padding: const EdgeInsets.all(20),
                    child: Column(
                      children: [
                        TextField(
                          decoration: InputDecoration(
                            contentPadding: const EdgeInsets.all(40),
                            filled: true,
                            fillColor: Colors.blue.shade100,
                            border: const OutlineInputBorder(),
                            labelText: 'label',
                            labelStyle: const TextStyle(color: Colors.redAccent),
                            hintText: 'hint',
                            hintStyle: const TextStyle(color: Colors.blueAccent),
                            helperText: 'help',
                            helperStyle: const TextStyle(color: Colors.greenAccent),
                            counterText: 'counter',
                            counterStyle: const TextStyle(color: Colors.purpleAccent),
                            icon: const Icon(Icons.star),
                            prefixIcon: const Icon(Icons.favorite),
                            suffixIcon: const Icon(Icons.park),
                          ),
                        ),
                        Container(height: 20), //space between text field
          
                        TextField(
                            controller: password,
                            decoration: const InputDecoration(
                              prefixIcon: Icon(Icons.lock),
                              labelText: "Mot de passe",
                              hintText: "Saisir votre mot de passe",
                              hintStyle:
                                  TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
                              labelStyle:
                                  TextStyle(fontSize: 13, color: Colors.deepPurpleAccent),
                            )),
                      ],
                    ),
                  ));
            }
          }
          



Riadh HAJJI

Abonnez vous à notre chaîne YouTube gratuitement