Flutter : Comment créer un formulaire et une SnackBar ?

Avec ce tutoriel Flutter, je vais vous présenter la manière de construire un formulaire avec vérification pour éviter que la saisie soit non-nulle associé à un message d’alerte via une SnackBar d’alerte. Comme d’habitude je partage le code dans ce billet consacré à Flutter.

Le formulaire avec validation

Les applications demandent souvent aux utilisateurs de saisir des informations dans un champ de texte. Par exemple, vous pouvez demander aux utilisateurs de saisir un identifiant et un mot de passe pour valider l’accès à un espace privé.

Pour que votre application soit sûres et faciles à utiliser, vous devez vérifier si les informations fournies par l’utilisateur sont valides. Si l’utilisateur a correctement rempli le formulaire, traitez les informations. Si l’utilisateur soumet des informations incorrectes, affichez un message d’erreur convivial pour lui faire savoir ce qui ne s’est pas passé.

C’est à ce moment qu’intervient la SnackBar.

Champ formulaire Flutter stylé

Le code du champ de formulaire :

TextFormField(
  maxLength: 25,
  decoration: const InputDecoration(
      labelText: 'Champ de formulaire',
      hintText: 'Entrer du texte',
      border: OutlineInputBorder()),
  validator: (value) {
    if (value.isEmpty) {
      return 'Veuillez saisir un texte';
    }
    return null;
  },
)

La SnackBar

Elle permet d’informer brièvement vos utilisateurs lorsque certaines actions ont lieu. Par exemple, lorsqu’un utilisateur glisse un message dans une liste, vous pouvez l’informer que le message a été supprimé.

Vous pourriez même leur donner une option pour annuler l’action.

Snackbar de validation suite à action sur le bouton

Le code du bouton de validation et de la snackbar de confirmation :

child: RaisedButton(
  onPressed: () {
    // Retourne true si le formulaire est valide, sinon false
    if (_formKey.currentState.validate()) {
      // Affiche le Snackbar si le formulaire est valide
      Scaffold.of(context).showSnackBar(
          SnackBar(content: Text('Traitement en cours')));
    }
  },
  child: Text('Envoyer'),
)

Construire un formulaire et une SnackBar d’alerte

Dans l’exemple que je vous propose dans ce tutoriel Flutter, vous allez apprendre comment ajouter une validation à un formulaire qui comporte un seul champ de texte en suivant les étapes suivantes :

  • Créer un formulaire avec une clé globale.
  • Ajouter un champ de type TextFormField avec une logique de validation.
  • Créez un bouton pour valider et soumettre le formulaire.
  • Afficher une SnackBar lorsque la saisie est valide (non-nulle)
  • Fournir une action facultative

Voici le code complet du tuto Flutter :

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Formulaire et Snackbar',
      theme: ThemeData(
        primarySwatch: Colors.orange,
      ),
      home: MyHomePage(title: 'Formulaire et Snackbar'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Container(
        child: MyCustomForm(),
      ),
    );
  }
}

class MyCustomForm extends StatefulWidget {
  @override
  MyCustomFormState createState() {
    return MyCustomFormState();
  }
}

class MyCustomFormState extends State<MyCustomForm> {
  final _formKey = GlobalKey<FormState>();

  @override
  Widget build(BuildContext context) {
    // Construire le formulaire avec _formKey créé au-dessus
    return Form(
      key: _formKey,
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          TextFormField(
            validator: (value) {
              if (value.isEmpty) {
                return 'Veuillez saisir un texte';
              }
              return null;
            },
          ),
          Padding(
            padding: const EdgeInsets.symmetric(vertical: 16.0),
            child: RaisedButton(
              onPressed: () {
                // Retourne true si le formulaire est valide, sinon false
                if (_formKey.currentState.validate()) {
                  // Affiche le Snackbar si le formulaire est valide
                  Scaffold.of(context).showSnackBar(
                      SnackBar(content: Text('Traitement en cours')));
                }
              },
              child: Text('Envoyer'),
            ),
          ),
        ],
      ),
    );
  }
}

Retrouvez le code de ce tuto sur GitLab

J’espère que ce projet vous aidera à mieux comprendre comment construire un formulaire et une SnackBar avec Flutter. N’hésitez pas à ajouter vos commentaires ou questions ci-dessous, je me ferai un plaisir d’y répondre.

 

 

 

Photo by Josh Hild from Pexels


Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *