Flutter-App- Navigation mit GoRouter optimieren

GoRouter ist das offiziell empfohlene Routing-Paket für Flutter. Es bietet eine Vielzahl von Funktionen, wie URL-basierte Navigation, Deep Links, Auth-Guards und verschachtelte Routen. All dies kann mit sauberem und lesbarem Code umgesetzt werden.

Grundlegende Einrichtung

Um GoRouter in einer Flutter-App zu verwenden, müssen Sie es zunächst in Ihre pubspec.yaml-Datei aufnehmen. Anschließend können Sie den Router mit den gewünschten Routen konfigurieren.

final router = GoRouter(
  initialLocation: '/',
  routes: [
    GoRoute(
      path: '/',
      builder: (context, state) => const HomePage(),
    ),
    GoRoute(
      path: '/profil/:benutzerId',
      builder: (context, state) {
        final benutzerId = state.pathParameters['benutzerId']!;
        return ProfilSeite(benutzerId: benutzerId);
      },
    ),
  ],
);

Navigation

GoRouter bietet verschiedene Möglichkeiten, zwischen den Routen zu navigieren. Sie können beispielsweise mit context.push eine neue Route aufrufen oder mit context.go eine bestehende Route ersetzen.

// Aufrufen einer neuen Route
context.push('/einstellungen');

// Ersetzen einer bestehenden Route
context.go('/startseite');

Auth-Guard

GoRouter bietet auch die Möglichkeit, Auth-Guards zu implementieren. Dies ermöglicht es, unauthentifizierte Benutzer automatisch auf die Login-Seite umzuleiten.

final router = GoRouter(
  refreshListenable: authBenachrichtiger,
  redirect: (context, state) {
    final istAuthentifiziert = authBenachrichtiger.istAuthentifiziert;
    final istLoginSeite = state.matchedLocation == '/login';
    if (!istAuthentifiziert && !istLoginSeite) {
      return '/login?redirect=${state.uri}';
    }
    if (istAuthentifiziert && istLoginSeite) {
      return '/';
    }
    return null;
  },
  routes: [
    GoRoute(path: '/login', builder: (_, __) => const LoginSeite()),
    GoRoute(path: '/', builder: (_, __) => const Startseite()),
  ],
);

## Zusammenfassung

GoRouter bietet eine Vielzahl von Funktionen, um die Navigation in Flutter-Apps zu gestalten. Mit diesem Paket können Entwickler URL-basierte Navigation, Deep Links, Auth-Guards und verschachtelte Routen umsetzen. Es ist das offiziell empfohlene Routing-Paket für Flutter und sollte für jede App mit mittlerer Komplexität oder höher verwendet werden.