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(),



• Icon

• Icon

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



• Prefix icon

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



• Suffix icon

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








• Prefix

• Prefix

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



• Prefix text

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



• Hint text

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



• Suffix text

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



• Label text

• Label text

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



• Floating label behavior: Auto

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



• Floating label behavior: Always

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



• Floating label behavior: Never

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



• errorText

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



• Helper text

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



• Counter

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



• Counter text

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



• 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
  )
)



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



• 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(), 
              ),



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