Route — was es ist, Typen und Erstellung von Routen in Flutter

Was ist Route in Flutter

Route ist die Grundlage des Flutter-Navigationssystems. Jeder Bildschirm, den der Benutzer in einer Anwendung sieht, wird durch ein Route-Objekt dargestellt, das sich im Navigator-Stack befindet. Route abstrahiert den Bildschirm vom Steuercode: Navigator fügt Route hinzu und entfernt sie, während sich innerhalb der Route die Schnittstelle befindet, die der Benutzer sieht. Diese Architektur trennt die Verantwortung zwischen Navigation und Anzeige.

Im Gegensatz zum einfachen Austausch von Widgets bietet Route Dienste, die normalen Widgets nicht zur Verfügung stehen: ModalBarrier (Abdunkeln des Hintergrunds bei geöffnetem Dialog), Steuerung der Ein- und Ausgangsanimation, Behandlung der Hardware-Zurück-Taste auf Android und Integration mit Hero-Animation für sanfte Übergänge zwischen Bildschirmen.

Laut Flutter Cookbook (2026) ist Route ein Schlüsselelement für die Hero-Animation: Ein Hero-Widget auf einer Route animiert automatisch den Übergang zu einem Hero-Widget auf der nächsten Route und erzeugt einen „fliegenden“ Elementeffekt. Dies ist möglich, weil Route während der Animation beide Bildschirme im Overlay behält.

Route als Baustein der Navigation

Route ist die Grundlage sowohl für einfache mobile Anwendungen (über Navigator 1.0) als auch für komplexe Szenarien mit Deep Links (Navigator 2.0). In Navigator 2.0 repräsentiert Route eine Page, die RouterDelegate aus der Routenkonfiguration konvertiert. Daher ist das Verständnis von Route für die Arbeit mit jedem Flutter-Navigationssystem unerlässlich — unabhängig vom gewählten Ansatz oder Paket.

Route-Typen: MaterialPageRoute und CupertinoPageRoute

Flutter bietet mehrere integrierte Route-Implementierungen, die jeweils das Verhalten an eine bestimmte Plattform anpassen. Die Wahl des richtigen Route-Typs beeinflusst die Benutzererfahrung: Material-Animation auf Android und Cupertino-Animation auf iOS erzeugen das Gefühl einer „nativen“ Anwendung.

MaterialPageRoute: Standard für Android

MaterialPageRoute ist die am häufigsten verwendete Route-Implementierung. Sie animiert den neuen Bildschirm von unten nach oben mit allmählichem Erscheinen. Beim Verlassen animiert der Bildschirm von oben nach unten und kehrt in seine ursprüngliche Position zurück. Die Symbolleiste (AppBar) und der Bildschirmkörper werden getrennt animiert, was einen Hierarchieeffekt erzeugt.

CupertinoPageRoute: iOS-Navigationsstil

CupertinoPageRoute imitiert UINavigationController von iOS. Der neue Bildschirm kommt von rechts herein und bedeckt den vorherigen. Das Hauptmerkmal ist die Unterstützung der interaktiven Wisch-zurück-Geste, implementiert über CupertinoBackGestureDetector. Diese Geste wird sogar während der Animation behandelt und bietet ein natürliches Verhalten, das iPhone-Benutzern vertraut ist.

Route-Lebenszyklus: von der Erstellung bis zur Verwerfung

Route hat einen eigenen Lebenszyklus, der sich vom Lebenszyklus eines normalen StatefulWidget unterscheidet. Das Verständnis dieses Zyklus ist für die korrekte Dateninitialisierung, Stream-Abonnements und die Ressourcenfreigabe beim Schließen eines Bildschirms erforderlich.

Phasen des Route-Lebenszyklus

Der Route-Lebenszyklus besteht aus vier Hauptphasen. Übergang — Route wird erstellt und beim Eintritt animiert (didPush wird aufgerufen). Aktiv — Route wird vollständig angezeigt und interagiert mit dem Benutzer. Inaktiv — eine andere Route bedeckt die aktuelle (Dialog, unteres Blatt), aber die Route bleibt im Stack. Verworfen — Route wird aus dem Stack entfernt und zerstört, didPop und dispose werden aufgerufen.

Die Lebenszyklusmethoden von Route können in einer benutzerdefinierten Implementierung überschrieben werden. Beispielsweise wird didPop aufgerufen, wenn Route aus dem Stack entfernt wird — hier können Sie Entwurfsdaten speichern. didChangeNext wird aufgerufen, wenn sich die nächste Route im Stack geändert hat — nützlich zum Aktualisieren der UI bei Änderungen des Navigationsverlaufs.

Laut Flutter API Route.didPop (2026) ist es wichtig, den Lebenszyklus von Route nicht mit dem Lebenszyklus von State innerhalb von Route zu verwechseln. StatefulWidget innerhalb von Route hat seinen eigenen initState und dispose, die während der Übergangs- bzw. Verworfen-Phase aufgerufen werden. Route lebt länger als ihr interner State — Route bleibt im Overlay, auch wenn ihre Widgets vorübergehend von einer anderen Route versteckt werden.

Datenübergabe via Route zwischen Bildschirmen

Route bietet Mechanismen zur Datenübergabe sowohl bei der Eingabe (bei der Erstellung) als auch bei der Ausgabe (bei Abschluss). Die korrekte Datenübergabe via Route macht globale Variablen und InheritedWidget überflüssig und macht die Navigation typsicher und vorhersagbar.

Um Daten an einen neuen Bildschirm zu übergeben, verwenden Sie den Konstruktor des empfangenden Widgets oder den arguments-Parameter in Navigator.pushNamed. Innerhalb von Route sind die Daten über RouteSettings.arguments zugänglich, die im Route-Objekt gespeichert sind. Dieser Ansatz funktioniert für alle Route-Typen — MaterialPageRoute, CupertinoPageRoute und benutzerdefinierte Implementierungen.

Um Daten zurückzugeben, verwenden Sie das zweite Argument von Navigator.pop(context, result). Navigator.push gibt Future zurück, das mit dem an pop übergebenen Wert abgeschlossen wird. Wenn pop ohne Argument aufgerufen wird, wird Future mit null abgeschlossen. Dieser Mechanismus ist analog zu startActivityForResult in Android und Completion Handler in iOS, aber über Dart Futures implementiert.

Datenübergabe über den Route-Konstruktor

Beim direkten Aufruf von Navigator.push mit MaterialPageRoute werden die Daten über den Konstruktor des Zielbildschirms übergeben. MethodChannel wird nicht verwendet — dies ist eine reine Dart-Interaktion. Dieser Ansatz wird für die typsichere Übergabe komplexer Objekte bevorzugt.

Beispiel für die Erstellung einer benutzerdefinierten Route

Betrachten wir ein Beispiel für die Erstellung einer benutzerdefinierten Route mit eigener Animation und Datenübergabe. PageRouteBuilder ermöglicht die Definition von Ein- und Ausgangsanimationen mit vollständiger Kontrolle über die Animationskurve und -dauer.

// Benutzerdefinierte Route mit Slide-Animation
Navigator.push(context, PageRouteBuilder(
  pageBuilder: (context, animation, secondaryAnimation) {
    return DetailPage(productId: '42');
  },
  transitionsBuilder: (context, animation, secondaryAnimation, child) {
    const begin = Offset(0.0, 0.3);
    const end = Offset.zero;
    final tween = Tween(begin: begin, end: end);
    final offsetAnimation = animation.drive(tween);
    return SlideTransition(position: offsetAnimation, child: child);
  },
  transitionDuration: const Duration(milliseconds: 400),
));

// Daten vom Bildschirm zurückgeben
ElevatedButton(
  onPressed: () => Navigator.of(context).pop({'selected': true, 'id': '42'}),
  child: const Text('Auswählen'),
);

// Ergebnis auf dem aufrufenden Bildschirm abrufen
final result = await Navigator.push(context, MaterialPageRoute(
  builder: (context) => const SelectionPage(),
));
if (result != null) {
  print('Ausgewählt: ${result['selected']}');
}

Im Beispiel definiert PageRouteBuilder eine benutzerdefinierte Slide-von-unten-Animation mit Transparenz. transitionDuration legt die Geschwindigkeit der Animation fest. Der Code demonstriert auch die Ergebnisübergabe: Der Detailbildschirm gibt eine Map mit der Auswahl des Benutzers zurück, und der aufrufende Bildschirm erhält diese Daten über das Future von push. Route gewährleistet vollständige Isolation: Entwürfe auf dem Detailbildschirm beeinflussen den Listenstatus nicht.