AlertDialog et CupertinoAlertDialog dans Flutter

Objectif

Dans ce tutoriel, nous allons apprendre à créer des boîtes de dialogue d’alerte dans Flutter.

Présentation

Les widgets AlertDialog et CupertinoAlertDialog sont des pop-ups permettant d’afficher un message d’alerte à destination de l’utilisateur. Ils permettent de focaliser son attention.
La boîte de dialogue d’alerte informe l’utilisateur de la situation qui nécessite un accusé de réception. La boîte d’alerte est une invite qui demande la confirmation de l’utilisateur.
Une boîte de dialogue d’alerte est une fonctionnalité utile qui informe l’utilisateur d’informations importantes pour prendre une décision ou lui permet de choisir une action spécifique ou une liste d’actions.
Dans Flutter, AlertDialog est un widget qui informe l’utilisateur des situations nécessitant un accusé de réception. La boîte de dialogue d’alerte Flutter contient un titre facultatif qui s’affiche au-dessus du contenu et une liste d’actions affichées sous le contenu.
Pour permettre leur affichage, une méthode nommée showDialog peut être appelée. Elle attend obligatoirement un paramètre définissant un contexte grâce à BuildContext. Celui-ci renverra l’objet AlertDialog ou CupertinoAlertDialog.
Les messages pouvant être juste informatifs et ne nécessitant pas toujours de réponse de l’utilisateur, un clic effectué en dehors du pop-up le fermera par défaut. Pour éviter ce comportement, notamment quand une action est attendue, le paramètre barrierDismissible peut prendre la valeur false. Dès lors, l’utilisateur sera forcé de passer par une des actions prévues et ne pourra plus fermer le dialogue en appuyant en dehors.

Propriétés d’AlertDialog

Titre : Il est toujours recommandé de rendre notre titre de dialogue aussi court que possible. Il sera facilement compréhensible pour l’utilisateur.
Action : Il est utilisé pour afficher le contenu de l’action à effectuer.
Contenu : le corps du widget alertDialog est défini par le contenu.
Forme : Il est utilisé pour définir la forme de notre boîte de dialogue, qu’elle soit circulaire, incurvée et bien d’autres.

Syntaxe

AlertDialog est un widget qui peut être affiché en appelant la fonction showDialog() . Voici la syntaxe pour cela.

showDialog( context: context, builder: (context) { return const AlertDialog(); }, );

context : Le contexte permet d’accéder à l’arborescence des widgets et est requis pour afficher un nouveau widget au-dessus des autres.
builder : Fonction qui retourne l’instance de l’AlertDialog. C’est ici que l’AlertDialog est construit avec son contenu (titre, message, boutons, etc.).

AlertDialog

Les boîtes de dialogue AlertDialog sont de style Material Design. Elles possèdent un constructeur qui attend un paramètre nommé content qui est, bien souvent, un texte, mais qui peut aussi être une icône ou une image.
Afin de pouvoir interagir avec l’utilisateur, le paramètre action peut être mis en place. Il attend une liste de widgets.
Pour le côté esthétique, il est possible de définir une valeur de backgroundColor, de choisir une elevation ou encore de modifier l’apparence du contour avec shape.
Pour afficher une boîte de dialogue, vous devez appeler la fonction showDialog(), qui modifie l’état de l’application. Vous devez fournir la fonction showDialog() avec un contexte et une fonction itemBuilder. Cette fonction itemBuilder doit renvoyer un objet de type Dialog.

Les types AlertDialog

Nous pouvons classer la boîte de dialogue d’alerte en plusieurs types, qui sont indiqués ci-dessous :
1- Boîte de dialogue d’alerte de base (Alert dialog)

Étapes pour afficher AlertDialog
Étape 1 : Assurez-vous d’avoir un fichier StatelessWidget(ou autre).

import 'package:flutter/material.dart';
void main() => runApp(const MyWidget());
class MyWidget extends StatelessWidget {
  const MyWidget({super.key});
  @override
  Widget build(BuildContext context) {
    return Container();
  }
}

Étape 2 : Créez une méthode et renvoyez le widget showDialog.

Pour afficher une alerte, vous devez appeler la fonction showDialog() , qui contient le contexte et la fonction itemBuilder . La fonction itemBuilder renvoie un objet de type dialog, AlertDialog.
la méthode showDialog, qui permet d’afficher la boîte de dialogue au-dessus du contexte actuel de l’application. Cela prendra soin d’ajouter le calque sombre et transparent lors de l’affichage de la boîte de dialogue.
Vous pouvez créer un bouton ( ElevatedButton/ TextButton) et ajouter la méthode showDialog comme ci-dessous dans la méthode onPressed à afficher lorsque vous appuyez sur le bouton :

ElevatedButton(
              style: ElevatedButton.styleFrom(
                minimumSize: const Size(30.0, 36.0),
                padding: const EdgeInsets.all(25.0),
                shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(10.0)),
              ),
              onPressed: () {
                showDialog(
                    context: context,
                    barrierDismissible: false,
                    builder: (BuildContext context) {
                      return AlertDialog(
                        title: const Text('Information'),
                        content:
                            const Text("Ceci est un message d'AlertDialog"),
                        actions: [
                          TextButton(
                              onPressed: () {
                                Navigator.of(context).pop();
                              },
                              child: const Text('Fermer'))
                        ],
                      );
                    });
              },
              child: const Text('Ouvrir une AlertDialog')),

À l’appui sur le bouton rouge (ElevatedButton), onPressed appelle la méthode showDialog (). Pour forcer l’utilisateur à interagir avec la fenêtre d’information, la propriété barrierDismissible est passée à false: barrierDismissible: false.

Le builder retourne une instance d’AlertDialog qui possède un titre (title), un contenu (content) et un comportement (actions): return AlertDialog(title: const Text('Information'),...

Dans cette dernière propriété, afin de rester cohérent, un bouton au style Material Design est implanté. Le choix se porte sur un TextButton.

Le dialogue pop-up possédant déjà une élévation, il est préférable d’éviter d’en rajouter une nouvelle à l’intérieur avec un ElevatedButton par exemple. Le TextButton est un bouton « à plat », il se prête donc parfaitement à l’exercice.

Ce bouton appelle, via onPressed, la méthode Navigator.of(context) .pop().

Code complet

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter AlertDialog'),
    );
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.start,
          children: [
            const SizedBox(
              height: 20.0,
            ),
            ElevatedButton(
                style: ElevatedButton.styleFrom(
                  minimumSize: const Size(30.0, 36.0),
                  padding: const EdgeInsets.all(25.0),
                  shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.circular(10.0)),
                ),
                onPressed: () {
                  showDialog(
                      context: context,
                      barrierDismissible: false,
                      builder: (BuildContext context) {
                        return AlertDialog(
                          title: const Text('Information'),
                          content:
                              const Text("Ceci est un message d'AlertDialog"),
                          actions: [
                            TextButton(
                                onPressed: () {
                                  Navigator.of(context).pop();
                                },
                                child: const Text('Fermer'))
                          ],
                        );
                      });
                },
                child: const Text('Ouvrir une AlertDialog')),
          ],
        ),
      ),
    );
  }
}

2- Boîte de dialogue d’alerte simple ( Simple dialog)

Des boîtes de dialogue simples peuvent afficher des éléments immédiatement exploitables lorsqu’ils sont sélectionnés. Ils n’ont pas de boutons de texte.
Comme les dialogues simples sont interrompus, ils doivent être utilisés avec parcimonie. Alternativement, les menus déroulants offrent des options de manière non modale et moins perturbatrice.
L’exemple suivant montre une boîte de dialogue simple.

3- Boîte de dialogue d’alerte de confirmation (Confirmation dialog)

Le widget AlertDialog dans Flutter est utilisé pour obtenir la confirmation des utilisateurs pour toute action critique qu’ils ont demandé d’effectuer. Par exemple, vous pouvez afficher la boîte de dialogue d’alerte lorsqu’un utilisateur souhaite supprimer/retirer des données importantes de son compte.
La boîte de dialogue d’alerte de confirmation demande à l’utilisateur de confirmer un choix particulier avant d’avancer dans l’application. Par exemple, lorsqu’un utilisateur souhaite supprimer ou retirer un contact du carnet d’adresses.
Une boîte de dialogue de confirmation est une boîte de dialogue qui demande aux utilisateurs d’approuver l’opération demandée. Il apparaît généralement avec des paires de boutons comme Oui/Non, OK/Annuler, D’accord/Pas d’accord.
Application:

Travail demandé

Exemple:

L’exemple d’application comporte un bouton et une boîte bleu. Lorsque vous appuyez sur le bouton, une boîte de dialogue de confirmation s’affiche.

Si l’utilisateur sélectionne « Oui« , la boîte sera supprimée puis la boîte de dialogue disparaîtra. Le bouton devient alors désactivé.
Si l’utilisateur sélectionne « Non« , la boîte de dialogue se ferme et rien d’autre ne se passe.

Voici à quoi ça ressemble

InputDecoration pour TextField et TextFormField4

Solution proposée

Code complet

// main.dart
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 const MaterialApp(
      // Remove the debug banner
      debugShowCheckedModeBanner: false,
      title: 'apcpedagogie.com',
      home: HomePage(),
    );
  }
}

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

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

class _HomePageState extends State {
  // Déterminez si la case rouge est affichée ou non
  bool _isShown = true;

  void _delete(BuildContext context) {
    showDialog(
        context: context,
        builder: (BuildContext ctx) {
          return AlertDialog(
            title: const Text('Veuillez confirmer'),
            content: const Text('Êtes-vous sûr de retirer la boîte ?'),
            actions: [
              // Le bouton "Oui"
              TextButton(
                  onPressed: () {
                    // Retirez la boîte
                    setState(() {
                      _isShown = false;
                    });

                    // Fermer la boîte de dialogue
                    Navigator.of(context).pop();
                  },
                  child: const Text('Oui')),
              TextButton(
                  onPressed: () {
                    // Fermer la boîte de dialogue
                    Navigator.of(context).pop();
                  },
                  child: const Text('Non'))
            ],
          );
        });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('apcpedagogie.com'),
      ),
      body: Center(
        child: Column(
          children: [
            const SizedBox(
              height: 30,
            ),
            ElevatedButton(
                // Ce bouton est activé uniquement si _isShown = true
                style:
                    ElevatedButton.styleFrom(padding: const EdgeInsets.all(20)),
                onPressed: _isShown == true ? () => _delete(context) : null,
                child: const Text('Supprimer la boîte bleu')),
            const SizedBox(
              height: 30,
            ),
            if (_isShown == true)
              Container(
                width: 200,
                height: 200,
                color: Colors.blueAccent,
              )
          ],
        ),
      ),
    );
  }
}

4- Boîtes de dialogue plein écran (Full-screen dialog)

Les boîtes de dialogue plein écran regroupent une série de tâches, telles que la création d’une entrée de calendrier avec le titre, la date, le lieu et l’heure de l’événement. Parce qu’elles occupent tout l’écran, les boîtes de dialogue plein écran sont les seules boîtes de dialogue sur lesquelles d’autres boîtes de dialogue peuvent apparaître.
En utilisant la méthode showDialog, nous ne pouvons pas afficher la boîte de dialogue en plein écran. Si nous voulons afficher la boîte de dialogue en plein écran, nous devons utiliser la méthode showGeneralDialog fournie par Flutter SDK.
paramètres de la méthode showGeneralDialog

Certains paramètres intéressants sont disponibles dans la méthode showGeneralDialog.

barrierColor — Modifie l’ombre portée en dehors de la boîte de dialogue.
transitionDuration — Durée de l’animation
barrierDismissible — Fermer la boîte de dialogue en cliquant à l’extérieur de l’itinéraire actuel

showGeneralDialog(
      context: context,
      barrierDismissible: true,
      barrierLabel: MaterialLocalizations.of(context)
          .modalBarrierDismissLabel,
      barrierColor: Colors.black45,
      transitionDuration: const Duration(milliseconds: 200),
      pageBuilder: (BuildContext buildContext,
          Animation animation,
          Animation secondaryAnimation) {
        return Center(
          child: Container(
            width: MediaQuery.of(context).size.width - 10,
            height: MediaQuery.of(context).size.height -  80,
            padding: EdgeInsets.all(20),
            color: Colors.white,
            child: Column(
              children: [
                RaisedButton(
                  onPressed: () {
                    Navigator.of(context).pop();
                  },
                  child: Text(
                    "Save",
                    style: TextStyle(color: Colors.white),
                  ),
                  color: const Color(0xFF1BC0C5),
                )
              ],
            ),
          ),
        );
      });

Flutter

AlertDialog et CupertinoAlertDialog dans Flutter