Flutter · Chapitre 10 — La navigation

1 Notion

Navigator : push & pop

La navigation fonctionne comme une pile : push empile un écran, pop revient au précédent.

Navigator.push(context,
  MaterialPageRoute(builder: (_) => DetailCampagne()));
// pour revenir : Navigator.pop(context);

2 Notion

Passer des données à l'écran suivant

On passe les données par le constructeur de l'écran cible.

Navigator.push(context, MaterialPageRoute(
  builder: (_) => DetailCampagne(id: c.id),
));

3 Notion

Récupérer un résultat au retour

push renvoie un Future : on await le résultat que l'écran suivant renvoie via pop(valeur).

final inscrit = await Navigator.push<bool>(context,
  MaterialPageRoute(builder: (_) => FormulaireInscription(id: c.id)));
if (inscrit == true) rafraichir();

4 Notion

Les routes nommées

Pour de plus grosses applis, on déclare des routes nommées dans MaterialApp et on navigue par leur nom (Navigator.pushNamed(context, '/detail')). Des paquets comme go_router vont plus loin.

🛢️ Sur le projet Fioul Groupé

Depuis la liste, ouvre le détail d'une campagne en lui passant son id. Depuis le détail, ouvre le formulaire d'inscription et, au retour, rafraîchis l'affichage (le volume a changé). Tu relies ainsi les écrans du parcours.

À retenir

Navigation en pile : push / pop.
Données passées par le constructeur ; résultat via pop(valeur) + await.
Routes nommées / go_router pour les grosses applis.