Comment afficher la boîte de dialogue dans Flutter

Dans Flutter, tout est un widget. Ainsi, la boîte de dialogue est également un widget de conception de matériaux. Cependant, nous n’utilisons généralement pas ce widget directement. À la place, nous utilisons AlertDialog ou SimpleDialog.

Le widget de dialogue d’alerte ou le widget de dialogue simple implémente les fonctionnalités du widget de dialogue.

Mais il y a un autre point à considérer ici.

Nous avons besoin de la fonction « showDialog() » pour afficher la boîte de dialogue Matériel sur la page ou l’écran. Ensuite, la boîte de dialogue apparaît sur le contenu actuel de l’écran.

En conséquence, l’animation matérielle a également lieu. L’animation entre dans l’écran et sort. Et ces activités sont définies par le comportement de la méthode « showDialog() ».

Vérifions d’abord cette partie du code.

enum ViewDialogsAction { yes, no }

class ViewDialogs {
  static Future<ViewDialogsAction> yesOrNoDialog(
    BuildContext context,
    String title,
    String body,
  ) async {
    final action = await showDialog(
      context: context,
      barrierDismissible: false,
      builder: (BuildContext context) {
        return AlertDialog(
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(20),
          ),
...
// le code est incomplet par souci de concision

Habituellement, nous utilisons un StatefulBuilder ou un StatefulWidget personnalisé pour utiliser le Dialog.

Pourquoi?

Parce que si besoin de mettre à jour le Dialog dynamiquement, nous voulons utiliser la méthode “setState()”.

Pour comprendre comment fonctionne le Dialogue, voyons des images consécutives. Après cela, nous essaierons de comprendre comment cela fonctionne.

Dialog in Flutter first example

Maintenant, si nous appuyons sur le « Bouton d’action flottante » ci-dessous, la boîte de dialogue apparaîtra à l’écran. De plus, le Dialogue peut contenir des informations importantes sur la base desquelles l’Utilisateur décidera de sa prochaine étape.

Par conséquent, lorsque la boîte de dialogue apparaît à l’écran, les autres fonctions ne fonctionneront plus. Il recommencera à fonctionner lorsque l’utilisateur fermera la boîte de dialogue.

Comme nous l’avons vu dans le code ci-dessus, la méthode « showDialog() » prend le paramètre « context » et « builder ». Plus important encore, le paramètre « constructeur » renvoie le widget de boîte de dialogue d’alerte.

Dialog in Flutter second example

Comme nous le voyons dans l’image ci-dessus, la boîte de dialogue d’alerte informe l’utilisateur qui a besoin d’un accusé de réception.

Les actions sont affichées sous le contenu. Selon les actions, la page suivante apparaît.

Dialog in Flutter third example

Comment créer une boîte de dialogue contextuelle en flutter ?

La boîte de dialogue apparaît à cause de la fonction « showDialog() ».

Premièrement, nous avons besoin d’une classe Dialog personnalisée comme la suivante.

import 'package:flutter/material.dart';

enum ViewDialogsAction { yes, no }

class ViewDialogs {
  static Future<ViewDialogsAction> yesOrNoDialog(
    BuildContext context,
    String title,
    String body,
  ) async {
    final action = await showDialog(
      context: context,
      barrierDismissible: false,
      builder: (BuildContext context) {
        return AlertDialog(
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(20),
          ),
          title: Text(title),
          content: Text(body),
          actions: <Widget>[
            TextButton(
              onPressed: () => Navigator.of(context).pop(ViewDialogsAction.no),
              child: const Text('Not Necessary'),
            ),
            TextButton(
              onPressed: () => Navigator.of(context).pop(ViewDialogsAction.yes),
              child: const Text(
                'Want to be Notified',
                style: TextStyle(
                  color: Colors.blueAccent,
                ),
              ),
            ),
          ],
        );
      },
    );
    return (action != null) ? action : ViewDialogsAction.no;
  }
}

Cependant, pour utiliser cet objet Dialog personnalisé, nous avons besoin de l’aide d’un autre widget avec état.

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

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

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

class _HomePageState extends State<HomePage> {
  static const String title = 'Alert Dialog Sample';
  bool tappedYes = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text(title),
      ),
      body: Center(
        child: Text(
          tappedYes ? 'You\'re Subscribed...' : 'You\'re not Subscribed yet...',
          style: const TextStyle(
            fontSize: 40.0,
          ),
        ),
      ),
      floatingActionButton: FloatingActionButton.extended(
        onPressed: () async {
          final action = await ViewDialogs.yesOrNoDialog(
            context,
            'Subscription',
            'Waant to be notified about the '
                'upcoming events and shows? Please subscribe to '
                'our News Channel.',
          );
          if (action == ViewDialogsAction.yes) {
            setState(() => tappedYes = true);
          } else {
            setState(() => tappedYes = false);
          }
        },
        label: const Text('Show me Notification'),
      ),
    );
  }
}

Pour un extrait de code complet, veuillez visiter le référentiel GitHub respectif.

Nous devons nous souvenir d’un point clé. Le contenu ne doit pas être trop volumineux. Il doit tenir sur l’écran. Sinon, il débordera. Ce n’est certainement pas souhaitable.

Si le contenu est trop volumineux, nous devons utiliser le widget de défilement, tel que SingleChildScrollView. Dans ce cas, nous éviterons le débordement.

Cependant, d’autres widgets de défilement tels que ListView, GridView et CustomScrollView ne fonctionneront pas.

Si l’utilisateur se voit proposer plusieurs choix, envisagez d’utiliser SimpleDialog. Tout comme le dialogue d’alerte, nous pouvons passer le SimpleDialog en tant que widget enfant à la méthode showDialog, qui affiche la boîte de dialogue.