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. Description

• Dans le cadre du développement d’applications mobiles avec Flutter, InputDecoration est une classe qui permet de définir et de personnaliser l’apparence visuelle d’un champ de texte, tel que TextField ou TextFormField.
• InputDecoration permet de définir des propriétés telles que le texte d’aide, les icônes, les bordures, les couleurs, etc.

3. Décoration

• Lorsque vous utilisez les widgets TextField ou TextFormField dans Flutter, vous pouvez spécifier une décoration visuelle en utilisant l’argument decoration.
• Cet argument prend un objet de type InputDecoration qui vous permet de personnaliser l’apparence du champ de saisie.

1. Pas de décoration

const TextField(),



2. Icon

• Si vous souhaitez ajouter une icône à votre InputDecoration pour un champ de saisie Flutter, vous pouvez utiliser la propriété prefixIcon ou suffixIcon en fonction de l’endroit où vous souhaitez positionner l’icône par rapport au texte de saisie.

1. Icon

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



2. Prefix icon

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



3. Suffix icon

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



3. Prefix

• En programmation et dans le contexte de Flutter, « prefix » fait généralement référence à un élément, texte ou widget qui est positionné à l’avant ou au début d’un autre élément, comme un champ de saisie. Il est utilisé pour ajouter des informations ou des indicateurs visuels avant le contenu principal.
• Dans le cas des champs de saisie (TextField ou TextFormField) de Flutter, le « prefix » peut être une icône, un texte ou même un widget plus complexe. Par exemple, si vous avez un champ de saisie pour entrer une quantité d’argent, vous pourriez utiliser un « prefix » pour ajouter le symbole de la devise, comme le dollar « $ ».

1. Prefix

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



2. Prefix text

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



4. Hint text

• Dans le contexte des champs de saisie (TextField ou TextFormField) dans le framework Flutter, le « hint text » (texte d’invite) est un texte informatif qui est affiché à l’intérieur du champ lorsque celui-ci est vide.
• Le but du « hint text » est de donner des indications ou des suggestions à l’utilisateur sur le type de données ou d’informations attendu dans le champ.

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



5. Suffix text

• Dans le contexte des champs de saisie (TextField ou TextFormField) dans Flutter, le « suffix text » (texte de suffixe) est un texte qui est affiché à la fin ou à droite du champ de saisie. Cela peut être utilisé pour fournir des informations supplémentaires, des unités de mesure, ou d’autres indications liées au contenu du champ.

TextField(
                decoration: InputDecoration(
                 suffixText: 'Email',
              ),



6. Label text

• Dans le contexte des champs de saisie (TextField ouTextFormField) dans Flutter, le « label text » (texte d’étiquette) est un texte qui décrit le but du champ de saisie. Il est affiché généralement au-dessus du champ de saisie pour indiquer ce que l’utilisateur est censé entrer.

1. Label text

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



2. Floating label behavior: Auto

• Dans Flutter, pour le champ de saisie TextField ou TextFormField, vous pouvez définir le comportement du libellé flottant (floating label) en utilisant la propriété floatingLabelBehavior de InputDecoration. L’option « Auto » (FloatingLabelBehavior.auto) est celle par défaut. Cela signifie que le libellé flottant basculera automatiquement entre le mode flottant et le mode fixe en fonction de l’état du champ de saisie.

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



3. Floating label behavior: Always

• Dans le contexte de Flutter, la propriété floatingLabelBehavior est utilisée avec la classe InputDecoration pour définir le comportement du libellé flottant d’un champ de saisie (TextField ou TextFormField).
• Lorsque vous définissez floatingLabelBehavior sur FloatingLabelBehavior.always, le libellé flottant restera toujours visible au-dessus du champ de saisie, qu’il soit vide ou qu’il contienne du texte.

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



4. Floating label behavior: Never

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



7. errorText

• La propriété errorText dans Flutter est utilisée pour afficher un texte d’erreur associé à un champ de saisie (TextField ou TextFormField). Vous pouvez utiliser cette propriété pour fournir un message explicatif en cas d’erreur lors de la validation des données entrées par l’utilisateur.

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



8. Helper text

• La propriété helperText dans Flutter est utilisée pour fournir un texte d’aide ou des informations contextuelles associées à un champ de saisie (TextField ou TextFormField).
• Ce texte d’aide est généralement affiché en dessous du champ de saisie pour guider l’utilisateur ou fournir des indications supplémentaires.

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



9. Counter

• La propriété counter dans Flutter est utilisée pour afficher un compteur de caractères ou d’éléments associé à un champ de saisie (TextField ou TextFormField). Ce compteur est généralement utilisé pour informer l’utilisateur sur le nombre actuel d’éléments saisis dans le champ.

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



10. Counter text

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



11. 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
  )
)



4. Style

1. 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), 
              ),



2. Couleur d’arrière plan

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



3. Hover color

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



5. Application

• App01

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



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é



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