Comment fonctionne la navigation dans Flutter ?

Question

Accepted Answer

**Navigation** dans Flutter permet de se déplacer entre les écrans (pages/routes) — en utilisant le **Navigator** (une pile de routes) pour la navigation basique, ou des packages de routage déclaratif pour les applications plus complexes. Comprendre la navigation est essentiel pour construire des applications multi-écrans.

## Navigation basique avec Navigator (une pile)

```dart
// the Navigator manages a STACK of routes (screens)
// PUSH a new screen onto the stack (navigate to it)
Navigator.push(
  context,
  MaterialPageRoute(builder: (context) => SecondScreen()),
);

// POP — go back (remove the top screen, return to the previous)
Navigator.pop(context);
```

```text
Think of navigation as a STACK of screens:
  → PUSH adds a screen on top (navigate forward)
  → POP removes the top screen (go back)
  → the back button / gesture also pops
```

## Passer des données entre les écrans

```dart
// pass data forward (via the constructor)
Navigator.push(context, MaterialPageRoute(
  builder: (context) => DetailScreen(itemId: 42),
));

// return data back when popping
Navigator.pop(context, result);          // return a result
final result = await Navigator.push(...); // receive it (push returns a Future)
```

## Routes nommées et routage moderne

```dart
// NAMED routes — define routes by name (cleaner for many screens)
Navigator.pushNamed(context, '/details');
// configured in MaterialApp(routes: {...})

// MODERN: declarative routing packages (go_router) for complex apps:
//   → URL-based routing, deep linking, web support, nested navigation
//   → go_router is the recommended approach for non-trivial apps
```

## Pourquoi c'est important

Comprendre la navigation est essentiel car **la plupart des applications ont plusieurs écrans**, et se déplacer entre eux est fondamental pour la fonctionnalité de l'application, c'est donc une connaissance incontournable de Flutter.

Le concept central — le **Navigator de Flutter gérant une pile de routes** (écrans), où vous **push** pour naviguer vers l'avant (ajouter un écran au-dessus) et **pop** pour revenir en arrière (retirer l'écran du sommet) — est le modèle mental fondateur de la navigation, et la métaphore de pile (correspondant à la façon dont les utilisateurs naviguent vers l'avant et vers l'arrière dans une application) la rend intuitive.

Comprendre la **navigation basique** (push/pop) est nécessaire pour toute application multi-écrans.

Comprendre le **passage de données entre les écrans** (envoyer les données vers l'avant via les constructeurs et retourner les résultats lors du pop, car push retourne un Future) est essentiel car les écrans ont souvent besoin de partager des données (passer un élément à un écran de détails, retourner une sélection).

Comprendre les **routes nommées** (définir les routes par nom pour une organisation plus propre avec de nombreux écrans) et surtout le **routage déclaratif moderne** (packages comme **go_router**, qui est recommandé pour les applications non triviales, fournissant un routage basé sur les URL, le deep linking, le support web et la navigation imbriquée) reflète les meilleures pratiques actuelles — à mesure que les applications grandissent, le routage déclaratif gère mieux la complexité que le push/pop impératif.

Puisque pratiquement toutes les applications ont plusieurs écrans et que naviguer entre eux (avec passage de données) est fondamental pour la fonctionnalité de l'application, et puisque comprendre le modèle de pile du Navigator, le passage de données et le routage moderne (go_router) est nécessaire pour construire des applications multi-écrans, comprendre la navigation dans Flutter est une connaissance essentielle et fondatrice — une capacité centrale nécessaire dans pratiquement chaque application Flutter et indispensable pour construire les expériences multi-écrans que les applications réelles exigent.