TextField – comment créer un champ de texte ?

Un TextField est un champs de saisie qui prend des données alphanumériques, telles que le nom, le mot de passe, l’adresse, etc. En fait, c’est un élément GUI qui permet à l’utilisateur de fournir des informations textuelles.

Il peut s’agir d’un champ de texte d’une seule ligne ou de plusieurs lignes.

Les champs de texte dans Flutter permettent aux utilisateurs d’insérer du texte dans l’application. Nous pouvons utiliser le widget TextField pour créer des formulaires, envoyer des messages, créer une recherche et bien plus encore.

Nous pouvons également ajouter des attributs avec TextField, tels qu’un label, une icône, un texte d’erreur en utilisant InputDecoration.

Le comportement par défaut de TextField est que, lorsque vous cliquez dessus, un clavier glisse du bas de l’écran du mobile. Lorsque vous saisissez du texte à l’aide d’un clavier, le texte s’affiche dans le champs de texte.

Si nous voulons supprimer toutes les propriétés de décoration, nous devons définir la décoration sur null.

En fait, vous pouvez accéder à la valeur saisie en attachant un TextEditingController au contrôleur TextField. Ou vous pouvez également accéder à la valeur en utilisant la fonction onChanged() de TextField.

Le widget TextField ne prend pas directement en charge la largeur et la hauteur. Par conséquent, nous utiliserons un widget comme Container.

Un exemple simple du widget TextField.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'TextField',
      home: HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('TextField'),
      ),
      body: Center(
        child: TextField(),
      ),
    );
  }
}

Quelques propriétés

• 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 : afficher le texte de label lors de la sélection du champ de texte.
• hintText : Pour afficher un texte d’indication dans le champ de texte.

Définir la largeur et le nombre de lignes d’un TextField

Afin de définir la largeur d’un TextField, vous pouvez l’envelopper dans un Container , un SizedBox ou un widget ContrainedBox. Cependant, la hauteur du widget parent n’affectera pas la hauteur du champ de texte qu’il contient.

De plus, la plupart des champs de texte sont sur une seule ligne. Cependant, il peut y avoir des situations où il est nécessaire de fournir à l’utilisateur plusieurs lignes.

Container(
              width: 200.0,
               child: TextField(
                 maxLines: 5, // 5 lignes ou plus
                 keyboardType: TextInputType.text,
               ),
               ),

maxLines : cela ne signifie pas qu’après 5 lignes de texte, la saisie de texte n’est plus possible.

Cependant, nous pouvons limiter le nombre de caractère avec maxLength.

Container(
              width: 200.0,
               child: TextField(
                 maxLines: 5,
                 maxLength: 50,
                 keyboardType: TextInputType.text,
               ),
               ),

keyboardType : pour déterminer quel type de clavier nous voulons utiliser. Flutter possède différentes variantes, selon l’utilisation :

.text en général pour le texte.
.datetime pour la date et l’heure.
.multiline pour le texte de plusieurs lignes.
.number pour les nombres sans point décimal.
.phone pour les numéros de téléphone.
.url pour les adresses Web.
.values pour les valeurs enum définies.
.numberWithOptions () pour les valeurs numériques spéciales.

En fait, le type de clavier que le développeur met à la disposition de l’utilisateur dépend de lui. Mais il ne faut pas oublier que le clavier n’est pas un élément de Flutter, il est mis à disposition par la plateforme (Android / iOS) .

Le style du texte

Bien entendu, nous pouvons également modifier l’apparence du texte. Cela se fait comme ailleurs dans Flutter via TextStyle. Des polices importées à la coloration, ce widget fournit un certain nombre d’options pour concevoir le texte.

body: Container(
        width: 200.0,
        child: TextField(
          maxLines: 5,
          maxLength: 50,
          keyboardType: TextInputType.text,
          style: TextStyle(
            fontSize: 32,
            color: Colors.green,
            fontWeight: FontWeight.bold,
          ),
        ),
      ),

Nous avons un texte sur plusieurs lignes, en gras et d’une couleur personnalisée.

hintText : le texte d’indication donne aux utilisateurs une idée des valeurs acceptées par le champ de texte.

TextField(
        decoration: InputDecoration(
          hintStyle: TextStyle(color: Colors.cyanAccent),
          hintText: "Nom",
        ),
      )

obscureText : utilisé pour masquer le texte comme les mots de passe, etc. Si vous définissez cette valeur sur true, le texte saisi s’affichera en points.

Container(
          padding: EdgeInsets.all(20),
            child:TextField(
              obscureText: true,
            )
            )