Dialogs et Bottom Sheets Flutter

Dialogs

Flutter permet d’ouvrir des popups grâce à showDialog(context, builder)

Plusieurs type de fenêtre de dialogue sont disponibles :

SimpleDialog : un title et une liste d’options SimpleDialogOption
AlertDialog (et CupertinoDialogAction) : un title, un content et une liste d’actions
Dialog

final choice = await showDialog<bool>(
  context: context,
  builder: (context) {
    return AlertDialog(
      title: const Text('Attention'),
      content: const Text('Êtes-vous vous sûr ?'),
      actions: [
        ElevatedButton(
          onPressed: () => Navigator.of(context).pop(false),
          child: const Text('Non'),
        ),
        ElevatedButton(
          onPressed: () => Navigator.of(context).pop(true),
          child: const Text('Oui'),
        ),
      ],
    );
  },
);
print('Confirmation : $choice')

BottomSheets

ModalBottomSheet

showModalBottomSheet(context,builder) permet d’ouvrir une BottomSheet.

final result = await showModalBottomSheet(
  context: context,
  enableDrag: true,
  builder: (context) {
    return Padding(
      padding: const EdgeInsets.all(8.0),
      child: ListView(
        children: [
          Padding(
            padding: const EdgeInsets.all(12.0),
            child: Text('Partager avec', style: textTheme.headlineMedium),
          ),
          Wrap(
            children: [
              ShareOptionView(
                label: 'Email',
                icon: Icons.mail,
                onSelection: () => Navigator.of(context).pop(ShareOptions.mail),
              ),
              ShareOptionView(
                label: 'Twitter',
                icon: Icons.flutter_dash,
                onSelection: () => Navigator.of(context).pop(ShareOptions.twitter),
              ),
              ShareOptionView(
                label: 'SMS',
                icon: Icons.message,
                onSelection: () => Navigator.of(context).pop(ShareOptions.sms),
              ),
            ],
          ),
        ],
      ),
    );
  },
);

Cf. DraggableBottoSheet

Packages pour des sheet plus évoluées :

Postframe callback

Il peut arriver de vouloir ouvrir une popup “automatiquement” dès l’ouverture d’un écran, pour cela il est possible d’appeler addPostFramCallback. Ce callback ne sera executé qu’une seule fois.

 WidgetsBinding.instance!.addPostFrameCallback(
  (timeStamp) => _openOnboardingPopup(),
);