Créer et valider un formulaire avec Flutter

Créer et valider un formulaire avec Flutter

1. Objectif

• Dans ce tutoriel flutter, nous allons apprendre à créer et valider un formulaire avec Flutter.

2. Présentation

• Les formulaires sont désormais un élément essentiel de toute application mobile ou Web. Les formulaires sont utilisés pour recueillir des informations auprès de l’utilisateur.
• Selon vos besoins, vos exigences et votre logique, vous pouvez créer un formulaire pour l’utilisateur, y compris l’authentification de l’utilisateur, la recherche, la commande, le filtrage, la réservation, etc.
• Le formulaire peut comporter des champs de texte, des cases à cocher et des boutons radio.



• Les formulaires font partie intégrante de toutes les applications mobiles et Web modernes.
• Il est utilisé pour recueillir des informations auprès des utilisateurs.
• Dans Flutter le widget Form agit comme un conteneur pour regrouper et valider plusieurs champs de formulaire.
• Lors de la création du formulaire, fournissez un fichier GlobalKey. Cela identifie de manière unique le Formet permet la validation du formulaire dans une étape ultérieure.
• Le widget form utilise le widget enfant TextFormField pour permettre aux utilisateurs de saisir le champ de texte. Ce widget affiche un champ de texte de conception de matériau et nous permet également d’afficher les erreurs de validation lorsqu’elles se produisent.





3. Créer un formulaire

• Un widget de form est fourni par flutter pour créer des formulaires.
• Il agit comme un conteneur, ce qui nous permet de regrouper plusieurs champs de formulaire.
• Le widget de form agit comme un conteneur, ce qui nous permet de regrouper et de valider les multiples champs du formulaire.
• Lorsque vous créez un formulaire, il est nécessaire de fournir le GlobalKey . Cette clé identifie le formulaire de manière unique et vous permet d’effectuer toute validation dans les champs du formulaire.

Pour créer un formulaire avec Flutter, vous pouvez utiliser les widgets TextField pour les entrées de texte, DropdownButton pour les menus déroulants, Radio pour les boutons radio, Checkbox pour les cases à cocher, et ElevatedButton pour les boutons d’action.

• Créer un formulaire avec une clé globale (GlobalKey)

• Pour créer un formulaire et pour commencer nous devons fournir une clé globale (GlobalKey).

• Définition d’une GlobalKey

• Avant tout la clé globale (GlobalKey) est utilisée pour identifier de manière unique le formulaire et permet la validation du formulaire lors d’une étape ultérieure.
• GlobalKey, il s’agit d’une clé unique sur l’ensemble de l’application. Grâce à cette clé, on peut trouver et accéder au Élément en question et récupérer ses State et Widget.
• final _formKey = GlobalKey();
• Pour créer un formulaire, vous devez d’abord définir une clé globale (GlobalKey). Dans notre exemple, nous avons défini a _formKey comme une clé globale.
• Une clé globale ou GlobalKey est une clé qui, lorsqu’elle est transmise en tant que clé dans un widget, peut différencier le widget de tous les widgets d’une arborescence de widgets.

• Exemple

• Explication du code

• Tout d’abord une classe personnalisée de nom MonFormulaire est créée.
• Ensuite une clé globale est définie à l’intérieur de cette classe avec le nom _formKey, qui contient FormState, utilisé pour recevoir les widgets de formulaire (Form).
• Certains styles personnalisés se trouvent également dans la méthode Build de cette classe et utilisent le périphérique TextFormField pour fournir des champs de formulaire tels que le nom, le numéro de téléphone, la date de naissance ou simplement un champ standard.
• InputDecoration est utilisé dans TextFormField pour styliser votre formulaire en modifiant les propriétés telles que les bordures, les étiquettes, les icônes, les conseils, les styles, etc.
• Enfin, nous avons ajouté un bouton pour soumettre le formulaire.

• Création d’un formulaire avec validation

• Les trois étapes suivantes doivent être suivies pour créer un formulaire de flottement de validation.
• Étape 1 : Tout d’abord, utilisez le widget de formulaire avec la clé globale.
• Étape 2 : Puis, utilisez TextFormField pour fournir au champ de saisie une propriété de validation.
• Étape 3 : Enfin créez un bouton qui, lorsqu’il est cliqué, valide les champs du formulaire flutter, et s’il y a une erreur, il l’affiche.

• Exemple

• Explication du code

• Pour valider les propriétés d’entrée, nous avons utilisé validator() dans TextFormField. Chaque fois que l’utilisateur saisit la mauvaise entrée, la fonction validator() renvoie une chaîne contenant un message d’erreur ; sinon, il renvoie une valeur nulle .
• Cela doit être assuré que le TextFormField n’a pas besoin d’être vide ; sinon, il renverra un message d’erreur.

4. Applications

• App-01

• Travail demandé

• Pour commencer, créer une page de connexion simple contenant les champs suivants :
• E-mail
• Nom & Prénom
• Numéro de téléphone
• Mot de passe
• Pour la validation, nous souhaitons que les utilisateurs de notre application remplissent les informations correctes dans chacun de ces champs. La logique sera définie comme telle :
• Tout d’abord, pour le champ du nom, nous souhaitons que l’utilisateur saisisse un prénom et un nom de famille valides, qui peuvent être accompagnés d’initiales.
• Pour le champ email, nous voulons un email valide qui contient quelques caractères avant le signe “@”, ainsi que le domaine email à la fin de l’email.
• Ensuite pour la validation du numéro de téléphone, l’utilisateur doit saisir 11 chiffres en commençant par le chiffre zéro.
• Enfin, pour la validation de notre mot de passe, nous attendons de l’utilisateur qu’il utilise une combinaison d’une lettre majuscule, d’une lettre minuscule, d’un chiffre et d’un caractère spécial.
• Ce n’est que lorsque la saisie de l’utilisateur correspond à ce qui précède que nous voulons accepter sa saisie avant de faire des demandes, telles que l’envoi à un serveur ou l’enregistrement dans une base de données.
Solution

import 'package:flutter/material.dart';

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

class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  final GlobalKey<FormState> _formKey = GlobalKey<FormState>();
  AutovalidateMode _autoValidate = AutovalidateMode.disabled;
  String? _name;
  String? _mobile;
  String? _email;
  void _validateInputs() {
    if (_formKey.currentState!.validate()) {
      _formKey.currentState!.save();
    } else {
      setState(() {
        _autoValidate = AutovalidateMode.always;
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Form Validation'),
        ),
        body: SingleChildScrollView(
          child: Container(
            margin: const EdgeInsets.all(15.0),
            child: Form(
              key: _formKey,
              autovalidateMode: _autoValidate,
              child: formUI(),
            ),
          ),
        ),
      ),
    );
  }

  Widget formUI() {
    return Column(
      children: <Widget>[
        TextFormField(
          decoration: const InputDecoration(labelText: 'Name'),
          keyboardType: TextInputType.text,
          validator: validateName,
          onSaved: (String? val) {
            _name = val;
          },
        ),
        TextFormField(
          decoration: const InputDecoration(labelText: 'Mobile'),
          keyboardType: TextInputType.phone,
          validator: validateMobile,
          onSaved: (String? val) {
            _mobile = val;
          },
        ),
        TextFormField(
          decoration: const InputDecoration(labelText: 'Email'),
          keyboardType: TextInputType.emailAddress,
          validator: validateEmail,
          onSaved: (String? val) {
            _email = val;
          },
        ),
        const SizedBox(
          height: 10.0,
        ),
        OutlinedButton(
          onPressed: _validateInputs,
          child: const Text('Validate'),
        )
      ],
    );
  }

  String? validateName(String? value) {
    if (value!.isEmpty) {
      return 'Name cannot be empty';
    }
    if (value.length < 3) {
      return 'Name must be more than 2 charater';
    } else {
      return null;
    }
  }

  String? validateMobile(String? value) {
    if (value!.isEmpty) {
      return 'Phone number cannot be empty';
    }
    if (value.length != 10) {
      return 'Mobile Number must be of 10 digit';
    } else {
      return null;
    }
  }

  String? validateEmail(String? value) {
    String pattern =
        r'^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$';
    RegExp regex = RegExp(pattern);
    if (value!.isEmpty) {
      return 'Email cannot be empty';
    }
    if (!regex.hasMatch(value)) {
      return 'Enter Valid Email';
    } else {
      return null;
    }
  }
}






• App-02

• Travail demandé

• Créez une application Flutter comme l’illustre le schéma suivant:



Solution

import 'package:flutter/material.dart';

void main() => runApp(MyWidget());

class MyWidget extends StatelessWidget {
  const MyWidget({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Application Flutter',
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(title: const Text("Connexion")),
        body: const LoginForm(),
      ),
    );
  }
}

class LoginForm extends StatefulWidget {
  const LoginForm({super.key});

  @override
  _LoginFormState createState() => _LoginFormState();
}

class _LoginFormState extends State&<LoginForm> {
  final _formKey = GlobalKey<FormState>();
  String? _email, _password;

  @override
  Widget build(BuildContext context) {
    return Form(
      key: _formKey,
      child: Column(
        children: [
          Padding(
            padding: const EdgeInsets.fromLTRB(40, 10, 40, 0),
            child: TextFormField(
              validator: (input) {
                if (input!.isEmpty) {
                  return 'Entrer une adresse email valide';
                }
                return null;
              },
              onSaved: (input) => _email = input!,
              decoration: const InputDecoration(labelText: 'Email'),
            ),
          ),
          Padding(
            padding: const EdgeInsets.fromLTRB(40, 6, 40, 0),
            child: TextFormField(
              validator: (input) {
                if (input!.length < 6) {
                  return 'Le mot de passe doit contenir au moins 6 caractères';
                }
              },
              onSaved: (input) => _password = input!,
              decoration: const InputDecoration(labelText: 'Mot de passe'),
              obscureText: true,
            ),
          ),
          Padding(
            padding: const EdgeInsets.fromLTRB(40, 6, 40, 10),
            child: ElevatedButton(
              onPressed: () {
                if (_formKey.currentState!.validate()) {
                  _formKey.currentState!.save();
                  // Appel API de connexion avec _email et _password
                }
              },
              child: const Text('Se connecter'),
            ),
          ),
        ],
      ),
    );
  }
}

• App-03

• Travail demandé

• Vous allez implémenter une application Flutter simple qui affiche un écran de connexion. L’écran contient deux champs de texte : Email et mot de passe.
• Votre application doive être appliquée selon la conception spécifiée comme indiqué ci-dessous



Solution

import 'package:flutter/material.dart';

void main() => runApp(MyWidget());

class MyWidget extends StatelessWidget {
  const MyWidget({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Valider Formulaire',
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(title: const Text("Connexion")),
        body: const ValiderFormulaire(),
      ),
    );
  }
}

class ValiderFormulaire extends StatefulWidget {
  const ValiderFormulaire({super.key});

  @override
  _ValiderFormulaireState createState() => _ValiderFormulaireState();
}

class _ValiderFormulaireState extends State<ValiderFormulaire> {
  final _formKey = GlobalKey<FormState>();
  bool _accepterCGU = false;

  @override
  Widget build(BuildContext context) {
    return Form(
      key: _formKey,
      child: Container(
        child: Padding(
          padding: const EdgeInsets.fromLTRB(40, 4, 40, 4),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              TextFormField(
                decoration: const InputDecoration(labelText: 'Nom'),
                validator: (value) {
                  if (value!.isEmpty) {
                    return 'Veuillez saisir votre nom';
                  }
                  return null;
                },
              ),
              CheckboxListTile(
                title: const Text('J\'accepte les CGU'),
                value: _accepterCGU,
                onChanged: (value) {
                  setState(() {
                    _accepterCGU = value!;
                  });
                },
              ),
              ElevatedButton(
                onPressed: () {
                  if (_formKey.currentState!.validate()) {
                    ScaffoldMessenger.of(context).showSnackBar(
                        const SnackBar(content: Text('Données en cours')));
                  }
                },
                child: const Text('Submit'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}