Go Router Flutter Web: Nested recursive router to same id navigating to the new screen but State of previous route is not maintained

64 Views Asked by At

Go router version - 13.0.1

  1. There is movie list each movie has it's own id and on clicking movie it open movie detail page.

  2. Each movie detail has mutiple casts and on each cast when we click we open cast detail page.

  3. Inside cast detail page it has multiple movies done by the cast and again when we click on that movie based on movie id the process again start from step 2.

Flutter doctor:

╰─$ flutter doctor -v              
[✓] Flutter (Channel stable, 3.16.8, on macOS 14.3 23D56 darwin-arm64, locale en-IN)
    • Flutter version 3.16.8 on channel stable at /Users/harshalchaudhari/tools/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 67457e669f (12 days ago), 2024-01-16 16:22:29 -0800
    • Engine revision 6e2ea58a5c
    • Dart version 3.2.5
    • DevTools version 2.28.5

[✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
    • Android SDK at /Users/harshalchaudhari/Library/Android/sdk
    • Platform android-34, build-tools 34.0.0
    • ANDROID_HOME = /Users/harshalchaudhari/Library/Android/sdk
    • Java binary at: /Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 17.0.7+0-17.0.7b1000.6-10550314)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 15.0.1)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 15A507
    • CocoaPods version 1.12.1

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 2023.1)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin can be installed from:
       https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
       https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 17.0.7+0-17.0.7b1000.6-10550314)

[✓] VS Code (version 1.85.2)
    • VS Code at /Users/harshalchaudhari/Documents/Visual Studio/Visual Studio Code.app/Contents
    • Flutter extension can be installed from:
       https://marketplace.visualstudio.com/items?itemName=Dart-Code.flutter

[✓] Connected device (2 available)
    • macOS (desktop) • macos  • darwin-arm64   • macOS 14.3 23D56 darwin-arm64
    • Chrome (web)    • chrome • web-javascript • Google Chrome 121.0.6167.85

[✓] Network resources
    • All expected network resources are available.

• No issues found!

Go router setup:

static GoRouter goRouter = GoRouter(
    navigatorKey: _rootNavigatorKey,
    initialLocation: RouteName.login,
    debugLogDiagnostics: true,
    routes: [
      StatefulShellRoute.indexedStack(
        builder: (context, state, navigationShell) {
          return ScaffoldWithNestedNavigation(navigationShell: navigationShell);
        },
        branches: [
          StatefulShellBranch(
            navigatorKey: _homeRouterKey,
            routes: [
              GoRoute(
                path: RouteName.home,
                builder: (ctx, state) {
                  return const HomeScreen();
                },
                routes: [
                  GoRoute(
                    name: RouteName.movie,
                    path: "${RouteName.movie}/:${RouteParam.id}",
                    builder: (ctx, state) {
                      final movieId = state.pathParameters[RouteParam.id] ?? "";
                      return MovieDetailScreen(key: ValueKey(movieId), movieId: movieId);
                    },
                    routes: [
                      GoRoute(
                        name: RouteName.youtubeVideo,
                        path: "${RouteName.youtubeVideo}/:${RouteParam.videoId}",
                        builder: (ctx, state) {
                          final id = state.pathParameters[RouteParam.videoId] ?? "";
                          return YoutubeVideo(id: id);
                        },
                      )
                    ],
                  ),
                  GoRoute(
                    name: RouteName.tv,
                    path: "${RouteName.tv}/:${RouteParam.id}",
                    builder: (ctx, state) {
                      final seriesId = state.pathParameters[RouteParam.id] ?? "";
                      return TvDetailScreen(key: ValueKey(seriesId), seriesId: seriesId);
                    },
                    routes: [
                      GoRoute(
                        name: RouteName.tvSeriesYoutubeVideo,
                        path: "${RouteName.tvSeriesYoutubeVideo}/:${RouteParam.videoId}",
                        builder: (ctx, state) {
                          final id = state.pathParameters[RouteParam.videoId] ?? "";
                          return YoutubeVideo(id: id);
                        },
                      )
                    ],
                  ),
                  GoRoute(
                    name: RouteName.person,
                    path: "${RouteName.person}/:${RouteParam.id}",
                    builder: (ctx, state) {
                      final personId = state.pathParameters[RouteParam.id] ?? "";
                      return PersonDetailScreen(key: ValueKey(personId), personId: personId);
                    },
                  ),
                ],
              ),
            ],
          )
        ],
      ),
      GoRoute(
        path: RouteName.login,
        redirect: (ctx, s) {
          return shouldRedirectToHomeScreenIfLoggedIn(ctx, s);
        },
        builder: (ctx, state) {
          return AuthenticationScreen();
        },
      ),
    ],
  );

Expecting: If again movie is appearing with movie id in cast detail page open its movie detail page again. and maintain previous pages states like below.
movie detail -> cast detail -> movie detail -> cast detail -> movie detail

0

There are 0 best solutions below