Le widget TextFormField dans Flutter

Objectif

Cet article explique comment utiliser le widget TextFormField dans Flutter en flutter.

Présentation

Le widget TextFormField est un widget dans Flutter utilisé pour collecter les entrées utilisateur dans les formulaires.
Il s’agit d’un widget de saisie de texte qui s’intègre au widget Formulaire. Il permet à l’utilisateur d’entrer du texte et fournit une validation pour les données saisies.
Il peut également inclure des fonctionnalités supplémentaires telles que la décoration, les formateurs d’entrée et les rappels pour gérer les modifications apportées à la valeur d’entrée.
Le widget TextFormField est utilisé pour recevoir les entrées de l’utilisateur dans flutter . Il s’agit d’un widget d’entrée utilisateur simple et facile dans Flutter .
Vous pouvez personnaliser le TextFormField en utilisant les propriétés de décoration, de validation et d’autres. Assurez-vous d’utiliser le widget Form dans le même widget parent pour gérer la validation du formulaire.

Comment créer TextFormField dans Flutter

Pour créer un TextFormField dans Flutter, vous pouvez utiliser le widget TextFormField fourni par la bibliothèque Flutter. Vous pouvez le faire en ajoutant le code suivant dans votre fichier Dart :

TextFormField(
  decoration: InputDecoration(
    labelText: 'Nom',
    hintText: 'Entrez votre nom',
    border: OutlineInputBorder(
      borderRadius: BorderRadius.circular(10),
    ),
  ),
  validator: (value) {
    if (value.isEmpty) {
      return 'S\'il vous plaît entrez votre nom';
    }
    return null;
  },
  onSaved: (value) {
    _nom = value;
  },
),

Dans ce code, nous avons défini un TextFormField avec une décoration d’InputDecoration qui comprend un labelText, un hintText et une bordure. Nous avons également défini un validateur pour vérifier si la valeur entrée est vide et une méthode onSaved pour enregistrer la valeur entrée.

Comment utiliser un TextFormField dans un formulaire Flutter

Pour utiliser un TextFormField dans un formulaire Flutter, vous pouvez suivre les étapes suivantes:

1-Commencer par l’importation des packages nécessaires :
```
import 'package:flutter/material.dart';
```
2-Définissez un état global pour stocker la valeur du champ de formulaire :
```
final _formKey = GlobalKey();
String _email;
```

3-Dans la méthode build, ajoutez un widget Form enveloppant les champs TextFormField :

@override
  Widget build(BuildContext context) {
    return Form(
      key: _formKey,
      child: Column(
        children: [
          TextFormField(
            validator: (value) {
              if (value.isEmpty) {
                return 'Entrez un email valide';
              }
              return null;
            },
            onSaved: (value) => _email = value,
            decoration: InputDecoration(labelText: 'Email'),
          ),
          ElevatedButton(
                onPressed: () {
                  if (_formKey.currentState!.validate()) {
                    ScaffoldMessenger.of(context).showSnackBar(
                        const SnackBar(content: Text('Données en cours')));
                  }
                },
                child: const Text('Submit'),
            ),
        ],
      ),
    );
  }

Comment gérer la saisie de l’utilisateur dans un TextFormField

Il existe plusieurs méthodes pour gérer la saisie de l’utilisateur dans un TextFormField dans Flutter. Voici les étapes à suivre pour y parvenir :

1-Créez un objet controller pour le TextFormField en utilisant le contrôleur TextEditingController. Créez un objet TextEditingController comme ci-dessous et affectez-le à la propriété controller de TextFormField. Son objet contiendra les données d’entrée.

TextEditingController userInput = TextEditingController() ;
2-Définissez la propriété de contrôleur pour le TextFormField en utilisant le contrôleur défini.
- Pour définir la propriété de contrôleur pour le TextFormField en utilisant un contrôleur prédéfini, vous pouvez utiliser le constructeur TextFormField et passer le contrôleur en tant que paramètre paramètre
- Où « myController » est le nom de votre contrôleur prédéfini.
3-Écoutez les modifications du texte en utilisant la méthode de contrôleur.addListener.
4-Validez la saisie de l’utilisateur en utilisant la méthode de contrôleur.validate.
5-Enfin, obtenez la valeur saisie en utilisant la méthode de contrôleur.text.

Méthode onChange() dans TextFormField

La propriété onChanged de TexteTextFormField dans Flutter est une fonction de rappel qui est appelée chaque fois que le texte dans le champ de formulaire change. La fonction prend en argument la nouvelle valeur du texte et vous pouvez utiliser cette valeur pour mettre à jour l’état de votre application.
Pour obtenir des données d’entrée utilisateur à changement instantané dans le TextFormField , la méthode onChange() est utilisée. Vous utilisez setState() à l’intérieur comme ci-dessous.

onChanged: (value) { setState(() { String name = value; }); },

Exemples

Voici quelques exemples d’utilisation de l’onChanged propriété dans un TextFormField dans Flutter :

Mise à jour d’une variable locale :

String _text = ""; TextFormField( onChanged: (value) { setState(() { _text = value; }); }, )

Validation de l’entrée au fur et à mesure que l’utilisateur tape:

TextFormField( onChanged: (value) { if (value.length > 10) { setState(() { _error = "Value is too long"; }); } else { setState(() { _error = null; }); } }, )

TextFormField( onChanged: (value) { if (value.length < 3) { setState(() { _errorText = "Input must be at least 3 characters"; }); } else { setState(() { _errorText = ""; }); } }, )

Filtrage des entrées :

TextFormField( onChanged: (value) { setState(() { _text = value.toUpperCase(); }); }, )

Mise à jour de plusieurs champs :

String _field1 = ""; String _field2 = ""; TextFormField( onChanged: (value) { setState(() { _field1 = value; _field2 = value; }); }, )

Recherche dans une liste d’éléments à mesure que l’utilisateur tape :

List _items = ['apple', 'banana', 'cherry']; List _filteredItems = []; TextFormField( onChanged: (value) { setState(() { _filteredItems = _items.where((item) => item.startsWith(value)).toList(); }); }, )

Applications

Travail demandé

Réaliser une application Flutter avec un formulaire contenant deux 'TextFormField' comme le montre l'image suivant:

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 MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Homepage(),
    );
  }
}

class Homepage extends StatefulWidget {
  @override
  State<Homepage> createState() => _HomepageState();
}

class _HomepageState extends State<Homepage> {
  @override
  Widget build(BuildContext context) {
    return SafeArea(
        child: Scaffold(
      body: Center(
          child: Padding(
              padding: const EdgeInsets.all(40),
              child: Column(
                mainAxisAlignment: MainAxisAlignment.start,
                children: [
                  TextFormField(
                    style: const TextStyle(color: Colors.blue),
                    cursorColor: Colors.blue,
                    decoration:
                        buildInputDecoration(Icons.person, "Utilisateur"),
                  ),
                  const SizedBox(
                    height: 10.0,
                  ),
                  TextFormField(
                    style: const TextStyle(color: Colors.blue),
                    cursorColor: Colors.blue,
                    decoration: buildInputDecoration(Icons.email, "Email"),
                  ),
                ],
              ))),
    ));
  }
}

// TextFormField Border Decoration
InputDecoration buildInputDecoration(IconData icons, String hinttext) {
  return InputDecoration(
    hintText: hinttext,
    prefixIcon: Icon(icons, color: Colors.blue),
    border: InputBorder.none,
    filled: true,
    fillColor: Colors.blue.withOpacity(.08),
    enabledBorder: OutlineInputBorder(
        borderSide: BorderSide(color: Colors.blue.withOpacity(.05)),
        borderRadius: BorderRadius.circular(30).copyWith(
            topRight: Radius.circular(0), topLeft: Radius.circular(0))),
    focusedBorder: OutlineInputBorder(
      borderSide: BorderSide(color: Colors.blue.withOpacity(.05)),
      borderRadius: BorderRadius.circular(30)
          .copyWith(topRight: Radius.circular(0), topLeft: Radius.circular(0)),
    ),
  );
}

Les cours

Les cours

Flutter

Le widget TextFormField dans Flutter