Wie funktioniert Navigation in Flutter?

Question

Accepted Answer

**Navigation** in Flutter wechselt zwischen Bildschirmen (Seiten/Routes) — mit dem **Navigator** (ein Stack von Routes) für grundlegende Navigation, oder deklarative Routing-Pakete für komplexere Apps. Das Verständnis von Navigation ist essentiell für die Entwicklung von Multi-Screen-Apps.

## Grundlegende Navigation mit Navigator (ein 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
```

## Datentransfer zwischen Bildschirmen

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

## Named Routes und modernes 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
```

## Warum es wichtig ist

Das Verständnis von Navigation ist essentiell, weil **die meisten Apps mehrere Bildschirme haben**, und das Wechseln zwischen ihnen ist fundamental für die App-Funktionalität — daher ist es ein Muss-Know Flutter-Wissen.

Das Kernkonzept — Flutters **Navigator verwaltet einen Stack von Routes** (Bildschirmen), wobei Sie **push** verwenden, um vorwärts zu navigieren (einen Bildschirm oben hinzufügen) und **pop**, um zurückzugehen (den obersten Bildschirm entfernen) — ist das grundlegende mentale Modell für Navigation, und die Stack-Metapher (wie Nutzer in einer App vorwärts und zurück navigieren) macht sie intuitiv.

Das Verständnis von **grundlegender Navigation** (push/pop) ist notwendig für jede Multi-Screen-App.

Das Verständnis von **Datentransfer zwischen Bildschirmen** (Daten weitergeben über Konstruktoren und Ergebnisse bei Pop zurückgeben, da push ein Future zurückgibt) ist essentiell, weil Bildschirme häufig Daten teilen müssen (ein Element an einen Detail-Bildschirm übergeben, eine Auswahl zurückgeben).

Das Verständnis von **Named Routes** (Routes nach Name definieren für saubere Organisation bei vielen Bildschirmen) und besonders von **modernem deklarativem Routing** (Pakete wie **go_router**, empfohlen für nicht-triviale Apps, bietet URL-basiertes Routing, Deep Linking, Web-Unterstützung und verschachtelte Navigation) spiegelt aktuelle Best Practices wider — wenn Apps wachsen, handhabt deklaratives Routing Komplexität besser als imperativer Push/Pop.

Da praktisch alle Apps mehrere Bildschirme haben und das Wechseln zwischen ihnen (mit Datentransfer) fundamental für die App-Funktionalität ist, und da das Verständnis des Navigator-Stack-Modells, Datentransfer und modernes Routing (go_router) notwendig ist, um Multi-Screen-Apps zu entwickeln, ist das Verständnis von Navigation in Flutter essentielles, grundlegendes Wissen — eine Kernfähigkeit, die in fast jeder Flutter-App benötigt wird und notwendig für die Entwicklung der Multi-Screen-Erfahrungen ist, die echte Anwendungen erfordern.