Hoe werkt navigatie in Flutter?

Question

Accepted Answer

**Navigatie** in Flutter verplaatst tussen schermen (pagina's/routes) — met behulp van de **Navigator** (een stack van routes) voor basisnavigatie, of declaratieve routeringspakketten voor complexere apps. Het begrijpen van navigatie is essentieel voor het bouwen van apps met meerdere schermen.

## Basisnavigatie met Navigator (een stack)

```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
```

## Gegevens tussen schermen doorgeven

```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)
```

## Benoemde routes en moderne routering

```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
```

## Waarom het belangrijk is

Het begrijpen van navigatie is essentieel omdat **de meeste apps meerdere schermen hebben**, en navigeren tussen deze is fundamenteel voor de functionaliteit van de app, dus het is essentiële Flutter-kennis.

Het kernbegrip — Flutter's **Navigator die een stack van routes (schermen) beheert**, waar je **push** gebruikt om vooruit te navigeren (een scherm bovenop toevoegen) en **pop** om terug te gaan (het bovenste scherm verwijderen) — is het fundamentele mentale model voor navigatie, en de stack-metafoor (overeenkomend met hoe gebruikers vooruit en terug navigeren door een app) maakt het intuïtief.

Het begrijpen van **basisnavigatie** (push/pop) is nodig voor elke app met meerdere schermen.

Het begrijpen van **gegevens tussen schermen doorgeven** (gegevens vooruit verzenden via constructors en resultaten terugsturen bij poppen, aangezien push een Future retourneert) is essentieel omdat schermen vaak gegevens moeten delen (een item naar een detailscherm sturen, een selectie terugsturen).

Het begrijpen van **benoemde routes** (routes per naam definiëren voor schonere organisatie met veel schermen) en vooral **moderne declaratieve routering** (pakketten zoals **go_router**, aanbevolen voor niet-triviale apps, biedt URL-gebaseerde routering, deep linking, webondersteuning en geneste navigatie) weerspiegelt huidige best practices — naarmate apps groeien, declaratieve routering handelt complexiteit beter af dan imperatief push/pop.

Aangezien vrijwel alle apps meerdere schermen hebben en navigeren tussen deze (met gegevensdoorgifte) fundamenteel is voor de functionaliteit van de app, en aangezien het begrijpen van het Navigator stack-model, gegevensdoorgifte en moderne routering (go_router) nodig is om apps met meerdere schermen te bouwen, is het begrijpen van navigatie in Flutter essentieel, fundamenteel kennis — een kernvermogen dat in vrijwel elke Flutter-app nodig is en nodig voor het bouwen van de multi-screen-ervaringen die echte applicaties vereisen.