Hvordan fungerer navigation i Flutter?

Question

IT Interview Practice · Accepted Answer

**Navigation** i Flutter flytter mellem skærme (sider/ruter) — ved hjælp af **Navigator** (en stakke af ruter) til grundlæggende navigation, eller deklarative routing-pakker til mere komplekse apps. At forstå navigation er essentielt for at bygge apps med flere skærme.

## Grundlæggende navigation med Navigator (en stakke)

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

## Videregive data mellem skærme

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

## Navngivne ruter og moderne routing

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

## Hvorfor det betyder noget

At forstå navigation er essentielt, fordi **de fleste apps har flere skærme**, og at bevæge sig mellem dem er fundamental for app-funktionalitet, så det er must-know Flutter-viden.

Kernekompetenceområdet — Flutter's **Navigator, der administrerer en stakke af ruter** (skærme), hvor du **push'er** for at navigere fremad (tilføjer en skærm på toppen) og **pop'er** for at gå tilbage (fjerner den øverste skærm) — er den grundlæggende mentale model for navigation, og stakke-metaforen (som matcher, hvordan brugere navigerer fremad og tilbage gennem en app) gør det intuitivt.

At forstå **grundlæggende navigation** (push/pop) er nødvendigt for enhver app med flere skærme.

At forstå **videregiveelse af data mellem skærme** (sender data fremad via konstruktører og returnerer resultater, når der pop'es, da push returnerer en Future) er essentielt, fordi skærme almindeligt skal dele data (videregive en element til en detalje-skærm, returnere et valg).

At forstå **navngivne ruter** (definerer ruter efter navn for renere organisering med mange skærme) og især **moderne deklarativ routing** (pakker som **go_router**, som anbefales til ikke-trivielle apps, der giver URL-baseret routing, deep linking, web-support og indlejret navigation) afspejler nuværende best practices — når apps vokser, håndterer deklarativ routing kompleksitet bedre end imperativ push/pop.

Da praktisk talt alle apps har flere skærme og navigering mellem dem (med datavedeegiveelse) er fundamental for app-funktionalitet, og da forståelse af Navigator-stakke-modellen, datavideregiveelse og moderne routing (go_router) er nødvendige for at bygge apps med flere skærme, er det at forstå navigation i Flutter essentielt, grundlæggende viden — en kernekompetenceområde, der er nødvendig i næsten alle Flutter-apps, og nødvendigt for at bygge de multi-skærm-oplevelser, som rigtige applikationer kræver.

Grundlæggende navigation med Navigator (en stakke)

Videregive data mellem skærme

Navngivne ruter og moderne routing

Hvorfor det betyder noget

Relaterede spørgsmål