Le widget TextField dans Flutter

Comment personnaliser un TextField dans Flutter ?

• Par défaut, un TextField est décoré d'un soulignement. Vous pouvez ajouter une étiquette, une icône, un texte d'indication en ligne et un texte d'erreur en fournissant un InputDecoration comme propriété de décoration du TextField.
• Pour supprimer entièrement la décoration (y compris le soulignement et l'espace réservé à l'étiquette), définissez InputDecoration sur null.

  • Qu'est-ce que InputDecoration dans Flutter ?

    • InputDecorator affiche les éléments visuels d'un champ de texte Material Design autour de son enfant d'entrée. Les éléments visuels eux-mêmes sont définis par un objet InputDecoration et leur disposition et leur apparence dépendent des paramètres baseStyle , textAlign , isFocused et isEmpty .

    TextField(
      // Paramètre obscureText à true pour masquer le mot de passe saisi.
      obscureText: true,
      // Personnalisation de l'apparence du TextField en utilisant InputDecoration.
      decoration: InputDecoration(
        // Ajout d'une bordure extérieure au champ de saisie.
        border: OutlineInputBorder(),
        // Texte d'étiquette affiché au-dessus du TextField.
        labelText: 'Mot de passe',
        // Texte d'indication affiché à l'intérieur du TextField comme suggestion.
        hintText: 'Saisir un mot de passe',
      ),
    ),

Comment changer la police TextField dans Flutter ?

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

Comment stylisez-vous les étiquettes TextField ?

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

Comment changer la couleur du TextField?

• 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é.

  

Comment décorer la bordure TextField dans Flutter ?

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

  

Comment ajouter un rayon de bordure ou une bordure arrondie à TextField ou TextFormField?

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

Comment changer la couleur d'arrière-plan d'un TextField dans Flutter ?

• 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

Comment ajouter du texte d'indice d'un TextField?

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

Comment ajouter de la prise en charge multiligne pour un TextField?

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

Comment modifier les claviers en fonction du type d'entrée pour un TextField?

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

Comment convertir un TextField normal en TextField de mot de passe?

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

Comment limiter nombre de caractères d'un TextField?

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

App 01

• 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.
• 2- Personnaliser le TextField
  • 1- Définir une bordure arrondie avec une étiquette de bordure
  • 2- Définir un texte d'indice
  • 3- Définir une icône de courrier électronique à la position de départ du TextField
  • 4- Définir la taille de la police sur 18dp
  • 5- Définir le type d'entrée sur e-mail afin que le clavier virtuel s'ajuste en conséquence (affichera le bouton @)
  • 6- Appliquer une couleur d'arrière-plan (fromARGB(28, 68, 137, 255)) pour le TextField.
  • 7- 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
        ),
      );
    }
  }

App 02

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

App 03

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

App 04

• Travail demandé

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

  https://voodoocasino.co.uk/ src="https://apcpedagogie.com/wp-content/uploads/2023/12/le-widget-textfield-dans-flutter.jpg" alt="Le widget TextField dans Flutter" width="244" height="440" class="alignnone size-full" />

App 05

• Travail demandé

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

  

• App 06

  • Travail demandé

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