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:

Importer les packages nécessaires

Commencez par importer le package flutter/material.dart, qui contient tous les widgets et fonctionnalités nécessaires pour créer des interfaces Flutter.

import 'package:flutter/material.dart';

Définir un état global pour le formulaire

Créez un GlobalKey<FormState> pour identifier de manière unique le formulaire et gérer l’état du formulaire.
Utilisez également une variable pour stocker les données saisies dans le champ (exemple email).

final _formKey = GlobalKey<FormState>(); String _email = '';

_formKey permet de vérifier la validité du formulaire, d’accéder à ses champs et d’appeler des fonctions telles que validate ou save.

Créer le widget Form dans la méthode build

Dans la méthode build, enveloppez les TextFormField dans un widget Form. Ce Form servira de conteneur pour les champs de texte et gérera leur validation.

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

Exemple

Créer un formulaire avec Flutter

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

Pour gérer la saisie de l’utilisateur dans un TextFormField dans Flutter, vous pouvez utiliser un TextEditingController pour suivre, écouter, valider et récupérer les données saisies dans le champ de texte.
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 :

Créer un TextEditingController

Créez un objet controller pour le TextFormField en utilisant le contrôleur TextEditingController.
Un TextEditingController est un objet qui sert à manipuler et surveiller le contenu d’un TextFormField. Vous devez créer une instance de ce contrôleur dans votre widget afin de suivre les saisies des utilisateurs.
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 userInputController = TextEditingController() ;

Cela crée un contrôleur nommé userInputController que vous pouvez associer à un TextFormField. Ce contrôleur va stocker la valeur saisie par l’utilisateur et permettre d’accéder à ses données.

Associer le contrôleur au TextFormField

Pour lier le contrôleur à votre TextFormField, vous devez passer cet objet userInputController à la propriété controller du TextFormField. Cela relie le champ de texte à votre contrôleur, permettant ainsi d’accéder et de gérer le texte saisi par l’utilisateur.

TextFormField( controller: userInputController, decoration: InputDecoration(labelText: 'Enter text'), );

Où « userInputController » est le nom de votre contrôleur prédéfini.

Écouter les modifications du texte avec addListener

Pour réagir en temps réel aux modifications de l’utilisateur, vous pouvez utiliser la méthode addListener() sur le contrôleur. Avec cette méthode, chaque fois que l’utilisateur saisit du texte, le listener s’active, et vous pouvez déclencher des actions spécifiques, comme valider l’entrée, mettre à jour l’interface, ou enregistrer la saisie en continu :

.addListener(() { print('Current input: ${userInputController.text}'); });

Valider la saisie de l’utilisateur

Flutter fournit un validateur intégré pour les formulaires en utilisant un widget Form.
Flutter offre une méthode de validation pour les formulaires qui peut être utilisée dans TextFormField. Vous pouvez utiliser validator pour définir des règles spécifiques pour la saisie de l’utilisateur (par exemple, vérifier si le champ n’est pas vide ou si le format du texte est correct).

Form( key: _formKey, child: TextFormField( controller: userInputController, decoration: InputDecoration(labelText: 'Enter text'), validator: (value) { if (value == null || value.isEmpty) { return 'Please enter some text'; } return null; // Renvoie null si la saisie est valide }, ), );

Ici, si l’entrée ne contient pas de « @ », un message d’erreur sera affiché, et l’utilisateur sera invité à saisir une adresse e-mail correcte.
La validation est particulièrement utile lorsque vous travaillez avec des formulaires complexes, où plusieurs champs doivent être validés simultanément.

Récupérer la valeur saisie avec text

Pour récupérer la valeur saisie par l’utilisateur dans le TextFormField, accédez simplement à la propriété text du contrôleur.
Cela est particulièrement utile lorsque vous devez traiter ou envoyer les données saisies lorsque l’utilisateur appuie sur un bouton ou termine une action.

ElevatedButton( onPressed: () { final userInput = userInputController.text; print("User input: $userInput"); }, child: Text('Submit'), );

Dans cet exemple, lorsque l’utilisateur appuie sur le bouton Submit, la valeur saisie dans le TextFormField est affichée dans la console.

Libirer le contrôleur

Lorsque le contrôleur n’est plus nécessaire, libérez-le pour éviter les fuites de mémoire. Dans une application Flutter, vous pouvez le faire dans la méthode dispose :

@override void dispose() { userInputController.dispose(); super.dispose(); }

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

Flutter

Le widget TextFormField dans Flutter