🛢️Parcours Fioul GroupéFlutter · Chapitre 11
Accueil › Flutter › Chapitre 11
Chapitre 11 / 19

Dialog, SnackBar, Drawer & Tabs

Les retours à l'utilisateur et la navigation secondaire : boîtes de dialogue, messages éphémères, menu latéral et onglets.

1 Notion

Les boîtes de dialogue

showDialog ouvre une fenêtre modale (ex. AlertDialog) — pour confirmer une action.

showDialog(context: context, builder: (_) => AlertDialog(
  title: const Text('Confirmer'),
  content: const Text('Rejoindre cette campagne ?'),
  actions: [ TextButton(onPressed: () => Navigator.pop(context, true),
                        child: const Text('Oui')) ],
));
2 Notion

SnackBar : messages éphémères

Un message court en bas de l'écran — parfait pour confirmer un succès ou signaler une erreur.

ScaffoldMessenger.of(context).showSnackBar(
  const SnackBar(content: Text('Inscription enregistrée !')),
);
3 Notion

Le Drawer (menu latéral)

Le drawer du Scaffold ouvre un panneau latéral (menu) via l'icône hamburger.

4 Notion

Les onglets (Tabs)

TabBar + TabBarView (avec un DefaultTabController) organisent le contenu en onglets — par ex. « Ouvertes » / « Clôturées ».

🛢️ Sur le projet Fioul Groupé

Demande confirmation avant de rejoindre une campagne (showDialog), affiche un SnackBar de succès ou l'erreur renvoyée par l'API, et sépare les campagnes « ouvertes » / « clôturées » en onglets.

À retenir
  • showDialog (modale de confirmation), SnackBar (message éphémère).
  • drawer du Scaffold pour le menu latéral.
  • TabBar/TabBarView pour les onglets.
← Chapitre 10