Navigator: Was es ist, Bildschirmverwaltung in Flutter

Was ist Navigator in Flutter

Navigator ist ein Widget, das einen Stapel von Route-Objekten verwaltet und die Bildschirmnavigation in einer Flutter-Anwendung implementiert. Jeder Aufruf von push legt eine neue Route oben auf den Stapel, pop entfernt die oberste Route und kehrt zum vorherigen Bildschirm zurück. MaterialApp erstellt automatisch einen Navigator für die gesamte Anwendung und macht ihn über Navigator.of(context) zugänglich.

Im Gegensatz zu StatefulWidget, bei dem der Inhaltsaustausch über setState innerhalb eines einzelnen Widgets erfolgt, arbeitet Navigator mit ganzen Bildschirmen, die einen eigenen Lebenszyklus haben. Jede Route im Stack ist ein isolierter Zustand mit eigenem BuildContext, was Speicherlecks verhindert und die Abhängigkeitsverwaltung vereinfacht. Beim Aufruf von pop wird die ungenutzte Route zerstört und gibt Ressourcen frei.

Laut dem Flutter-Navigationsleitfaden (2026) hat sich Navigator von einer imperativen API (Navigator 1.0) zu einer deklarativen (Navigator 2.0) entwickelt. Navigator 1.0 verwendet push/pop-Methoden direkt, was für einfache Szenarien praktisch ist. Navigator 2.0 (Router) eignet sich für Anwendungen mit tiefen Links, adaptiver Navigation und Web-Routing.

Wie Navigator unter der Haube funktioniert

Intern verwendet Navigator Overlay – ein spezielles Widget, das Routes übereinander anzeigt. Jede Route erzeugt ihre eigene Position im Overlay mit einem z-Index, der ihrer Tiefe im Stack entspricht. Dies erklärt, warum beim Aufruf von push der neue Bildschirm über dem vorherigen animiert wird und beim Aufruf von pop der vorherige Bildschirm bereits zur Anzeige bereit ist: Er wurde nicht zerstört, sondern blieb im Overlay unter dem neuen Bildschirm.

Für Übergangsanimationen verwendet Navigator PageTransitionsTheme, das in ThemeData überschrieben werden kann. Plattformspezifische Animationen werden über CupertinoPageRoute für iOS (von rechts schieben) und MaterialPageRoute für Android (von unten schieben) festgelegt. Navigator wählt automatisch die richtige Animation bei Verwendung von PlatformRoute aus.

Navigator-Methoden: push, pop und pushReplacement

Navigator bietet eine Reihe von Methoden zur Verwaltung des Route-Stacks. Jede Methode löst eine bestimmte Navigationsaufgabe – von einem einfachen Übergang bis zum vollständigen Austausch des Bildschirmverlaufs. Lassen Sie uns die wichtigsten Methoden mit Anwendungsbeispielen durchgehen.

Push und Pop: Grundlegende Operationen

Die Methode push nimmt eine Route entgegen und gibt ein Future mit dem bei pop übergebenen Ergebnis zurück. Dies ermöglicht den Empfang von Daten von dem Bildschirm, zu dem navigiert wurde. Beispielsweise kann ein Datumsauswahl-Bildschirm ein DateTime über Navigator.pop(context, selectedDate) zurückgeben. Die Methode pop ohne Argumente gibt null zurück, mit einem Argument übergibt sie den Wert an den aufrufenden Bildschirm.

PushReplacement: Bildschirm ersetzen

pushReplacement ersetzt die aktuelle Route durch eine neue und entfernt die aktuelle Route aus dem Stapel. Dies ist entscheidend für Szenarien, in denen der Benutzer nicht zum vorherigen Bildschirm zurückkehren können soll. Ein typisches Beispiel ist der Login-Bildschirm: Nach erfolgreichem Login wird der aktuelle Bildschirm durch den Hauptbildschirm ersetzt, und die Zurück-Taste kehrt nicht zum Login-Formular zurück.

Benannte Routen und onGenerateRoute

Navigator unterstützt die Navigation über benannte Routen mit der Methode pushNamed. Anstatt direkt eine Route zu erstellen, gibt der Entwickler eine Zeichenfolgenkennung an, und Navigator erstellt die Route automatisch basierend auf der Konfiguration in MaterialApp. Dies vereinfacht den Code und zentralisiert die Routendefinition an einer Stelle.

Benannte Routen werden über die Eigenschaft routes in MaterialApp definiert, wobei jeder Schlüssel eine Pfadzeichenfolge und der Wert eine Funktion ist, die ein Widget zurückgibt. Für dynamische Routen (mit Parametern) wird onGenerateRoute verwendet – ein Callback, der RouteSettings empfängt und eine Route zurückgibt. Dies ermöglicht die Übergabe von Argumenten über den Parameter arguments und die Implementierung tiefer Navigation.

Laut dem Flutter-Kochbuch (2026) erfolgt die Übergabe von Argumenten über pushNamed mit dem Parameter arguments: Object?. Der empfangende Bildschirm extrahiert die Argumente über ModalRoute.of(context)!.settings.arguments, was eine typsichere Datenübertragung ohne globale Variablen oder InheritedWidget ermöglicht.

Behandlung unbekannter Routen

Die Eigenschaft onUnknownRoute in MaterialApp behandelt Fälle, in denen pushNamed mit einer nicht vorhandenen Route aufgerufen wird. Dies ist nützlich, um einen 404-Bildschirm anzuzeigen oder zur Startseite umzuleiten. In Kombination mit onGenerateRoute wird eine vollständige Abdeckung aller möglichen Navigationsszenarien gewährleistet.

Navigator 2.0 und deklarative Router-Navigation

Navigator 2.0 (auch bekannt als Router-API) ist ein deklarativer Ansatz zur Navigation, der in Flutter 2.0 eingeführt wurde. Im Gegensatz zum imperativen Navigator 1.0, bei dem der Entwickler push/pop aufruft, verwaltet Router die Navigation über den Zustand und synchronisiert automatisch die Browser-URL mit dem aktuellen Bildschirm. Dies ist besonders wichtig für Webanwendungen und Desktop-Versionen.

Die Architektur von Navigator 2.0 besteht aus drei Schlüsselkomponenten: RouteInformationParser parst die URL in eine Routenkonfiguration, RouterDelegate wandelt die Konfiguration in eine Liste von Routes um, und BackButtonDispatcher behandelt die systemeigene Zurück-Taste. Diese Architektur macht die Navigation vollständig vorhersagbar und testbar.

Zur Vereinfachung der Arbeit mit Navigator 2.0 gibt es Wrapper-Pakete: go_router (von Google empfohlen), auto_route und beamer. go_router bietet ein deklaratives DSL zur Definition von Routen mit Unterstützung für verschachtelte Navigation, Weiterleitungen und tiefe Links, ohne RouterDelegate manuell implementieren zu müssen. Laut pub.dev (2026) wird go_router in 35% der neuen Flutter-Projekte verwendet, die einen deklarativen Ansatz bevorzugen.

Navigationsbeispiel in einer Flutter-Anwendung

Betrachten wir ein Beispiel für Navigator mit benannten Routen und Datenübergabe zwischen Bildschirmen. Der Code demonstriert einen Produktlisten-Bildschirm, den Übergang zu einem Detailbildschirm und die Rückkehr mit einem Ergebnis.

// Route configuration in MaterialApp
MaterialApp(
  initialRoute: '/',
  onGenerateRoute: (RouteSettings settings) {
    if (settings.name == '/') {
      return MaterialPageRoute(
        builder: (context) => const ProductListPage(),
      );
    }
    if (settings.name == '/product') {
      final productId = settings.arguments as String;
      return MaterialPageRoute(
        builder: (context) => ProductDetailPage(productId: productId),
      );
    }
    return MaterialPageRoute(
      builder: (context) => const NotFoundPage(),
    );
  },
)

// Navigation with data passing
final result = await Navigator.pushNamed(
  context,
  '/product',
  arguments: 'product_42',
);

// Getting data on the receiving screen
final args = ModalRoute.of(context)!.settings.arguments as String;

// Replace screen after login
Navigator.pushReplacementNamed(context, '/home');

// Clear stack to main screen
Navigator.pushNamedAndRemoveUntil(
  context,
  '/home',
  (route) => false,
);

Im Beispiel übergibt Navigator.pushNamed die Produkt-ID an den Detailbildschirm. Bei der Rückkehr über Navigator.pop(context, updatedProduct) erhält der aufrufende Bildschirm die aktualisierten Daten in der Variablen result. pushReplacementNamed ersetzt den aktuellen Bildschirm nach der Autorisierung, und pushNamedAndRemoveUntil mit der Bedingung (route) => false löscht den Stapel vollständig und verhindert die Navigation zurück zu vorherigen Bildschirmen.