Le widget TextField dans Flutter

• 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.
• icon : Il est utilisé pour ajouter des icônes directement au TextField.

import 'package:flutter/material.dart';

Ex01

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

Ex02

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
.....
.....
}

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

Container(
            width: 300,
            child: TextField(
                decoration: InputDecoration(
                border: OutlineInputBorder(),
                labelText: 'Entrez le nom ici',
                hintText: 'Entrez le nom ici',
                 ),
                  autofocus: false,
                 )
               )

home: Scaffold(
            appBar: AppBar(
              title: const Text('Application TextField'),
            ),
            body: Center(
                .........

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

TextField(
   obscureText: true,
   decoration: InputDecoration(
   border: OutlineInputBorder(),
   labelText: 'Mot de passe',
   hintText: 'Saisir un mot de passe',
   ),
),

• Vous modifiez la couleur du texte d’entrée dans cette ligne style: TextStyle(fontSize: 25.0, color: Colors.blueAccent), , donc pour définir le blanc, utilisez simplement Colors. constante blanche au lieu de textTheme.

• const styles = theme => ({ textField : { width : '90 %', marginLeft : 'auto', marginRight : 'auto', color : 'white', paddingBottom : 0, marginTop : 0, fontWeight : 500 }, } );

• La couleur du texte peut être modifiée à l’aide de la propriété style du widget TextField. Vous pouvez également modifier la couleur du curseur en définissant la couleur sur la propriété cursorColor.
• Vous pouvez procédez comme suit:
• Sélectionnez la forme ou la zone de texte.
• Dans l’onglet Format des outils de dessin, cliquez sur Remplissage du texte > Plus de couleurs de remplissage.
• Dans la zone Couleurs, cliquez sur la couleur souhaitée dans l’onglet Standard ou mélangez votre propre couleur dans l’onglet Personnalisé.

• Pour ajouter une bordure à un TextField/TextFormField dans Flutter, vous pouvez spécifier la propriété de décoration, puis utiliser les widgets InputDecoration et OutlineInputBorder.
• Pour le faire quatre étapes:
• 1- Localisez le fichier dans lequel vous avez placé le widget TextField/TextFormField.
• 2- Dans le widget TextField/TextFormField, ajoutez le paramètre de décoration et affectez le widget InputDecoration.
• 3- Dans le widget InputDecoration, ajoutez le paramètre enabledBorder et affectez le widget OutlineInputBorder.
• 4- À l’intérieur de OutlineInputBorder, ajoutez le widget BorderSide avec le paramètre de couleur et définissez la couleur de votre choix.

• Pour ajouter un rayon de bordure ou créer une bordure arrondie autour du widget TextField/TextFormField.
• Ajoutez la propriété decoration puis utilisez le widget OutlineInputBorder.
• Le widget OutlineInputBorder accepte le paramètre borderRadius.
• Vous pouvez utiliser le paramètre borderRadius avec BorderRadius.circular(50.0) pour créer la bordure circulaire autour du TextField.

• Vous devez définir la valeur filled sur true si vous souhaitez appliquer une couleur d’arrière-plan à votre champ de texte. Sinon, la couleur de fond ne sera pas affectée.

filled: true, //Vous devez définir la valeur filled  sur truesi vous souhaitez appliquer une couleur 
            //d'arrière-plan à votre champ de texte. Sinon, la couleur de fond ne sera pas affectée.
fillColor: Color.fromARGB(28, 68, 137,255), //appliquer une couleur d'arrière-plan

• Le texte d’indication est utilisé pour donner aux utilisateurs une idée des valeurs d’entrée acceptées par le TextField.
• Vous pouvez utiliser la propriété hintText pour ajouter un indice au champ de texte qui disparaîtra lorsque vous commencerez à taper.
• La couleur par défaut est le gris, mais vous pouvez ajouter la propriété hintStyle pour modifier le style du texte:hintText:"Enter votre email"

• Par défaut, TextField ‘affiche sur une seule ligne. Mais nous pouvons spécifier le nombre maximum de lignes à supporter via la propriété maxLines.
• Cela ne limitera pas le nombre de lignes que vous pouvez ajouter, cela n’affiche que le nombre spécifié de lignes à la fois.
• Si vous souhaitez développer le champ en fonction de la quantité de texte saisi, vous pouvez définir la propriété maxLines à null.

• Pour afficher différentes dispositions de clavier pour différents types de saisie, comme des pavés numériques pour les numéros de téléphone ou un bouton “@” pour les e-mails, utilisez la propriété keyboardType. Il accepte plusieurs options comme TextInputType le numéro, la date, le téléphone, le nom et l’adresse e-mail.

• En définissant la propriété obscureText sur, true vous pouvez convertir un champ de texte brut en un champ de mot de passe, qui masque les valeurs d’entrée.
• La valeur par défaut de cette propriété affichera des points pour masquer les caractères du mot de passe. Mais vous pouvez changer cela en définissant la valeur obscuringCharacter sur ce que vous voulez ;

• La propriété maxLength accepte des valeurs entières pour spécifier le nombre maximal de caractères acceptés par le champ particulier.
• Après avoir ajouté cette propriété, si les utilisateurs saisissent une valeur avec plus de caractères que spécifié dans maxLength, cela bloquera automatiquement la saisie: TextField (maxLength : 2 ,).

• 1- Créer un simple TextField
• Par défaut, le composant TextField n’a qu’une simple ligne/séparateur en bas. Aucune autre décoration n’est donnée.
• 1- Personnaliser le TextField
• 2- Définir une bordure arrondie avec une étiquette de bordure
• 3- Définir un texte d’indice
• 4- Définir une icône de courrier électronique à la position de départ du TextField
• 5- Définir la taille de la police sur 18dp
• 6- Définir le type d’entrée sur e-mail afin que le clavier virtuel s’ajuste en conséquence (affichera le bouton @)
• 7- Appliquer une couleur d’arrière-plan (fromARGB(28, 68, 137, 255)) pour le TextField.
• 8- Ajouter un “padding” de 18 dp autour du widget textfield
Solution

class TextFieldWidget extends StatelessWidget {
  const TextFieldWidget({Key? key}) : super(key: key);
 
  @override
  Widget build(BuildContext context) {
    return const Center(
      child: TextField(
        //Set text style
        style: TextStyle(
          fontSize: 18
        ),
        keyboardType: TextInputType.emailAddress, //Définir le type de clavier pour l'adresse e-mail. Cela affichera le bouton @ sur la section principale du clavier.
        //Set decoration
        decoration: InputDecoration(
            border: OutlineInputBorder(borderRadius: BorderRadius.all(Radius.circular(16))), //Créer une bordure arrondie
            labelText: "Email", //Définissez le texte de l'étiquette qui sera affiché sur la bordure
            prefixIcon: Icon(Icons.email), // Définir l'icône d'e-mail au début du TextField
            hintText: "Enter your email ID"), //Définissez le texte d'indication qui sera affiché lorsque TextField est vide
      ),
    );
  }
}

• Travail demandé

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



Solution

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

• Travail demandé

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



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



Solution

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
}