I have this page structure (or i want to have this structure):

  welcome
  ├── login
  └── createaccount
      └── simpleimageeditor
          ├── mycropeditor
          └── myfiltereditor

I have 2 goals with this.

when I am done with my filter editor page I want to do context.go(“createaccount”) and it should pop mysimpleimageeditor, mycropeditor and myfiltereditor and it should mantain welcome and createaccount pages!

when I go back to createaccount it should have the createaccount page with its state preserved! I noticed in earlier tests that when i do context.go(“createaccount”) it returns to that page but it loses the state! in order to preserve state i have to always use statefulshellroute.indexedstack?

additionally if someone can explain to me the logic of the keys, when to use parentkeys and which ones to use and when to use keys in general I am having big trouble making the right logic

  final GlobalKey<NavigatorState> rootNavigatorKey =
      GlobalKey<NavigatorState>(debugLabel: 'root');
  final GlobalKey<NavigatorState> createAccountNavigatorKey =
      GlobalKey<NavigatorState>(debugLabel: 'createAccount');

  class AppRouter {
    final AuthBloc authBloc = locator.get<AuthBloc>();
    late final GoRouter routes;
    static GlobalKey<CustomRefreshIndicatorState> clubhubRefreshKey =
        GlobalKey<CustomRefreshIndicatorState>();

    AppRouter() {
      final String initialLocation = Routes.hub.path;

      routes = GoRouter(
        navigatorKey: rootNavigatorKey,
        initialLocation: initialLocation,
        refreshListenable: GoRouterRefreshStream(authBloc.stream),
        redirect: (context, state) {
          final accessToken = authBloc.state.accessToken;
          if (accessToken?.isNotEmpty ?? false) {
            if (state.uri.toString() == Routes.welcome.path) {
              return Routes.hub.path;
            }
          } else {
            if (state.uri.toString() == Routes.hub.path) {
              return Routes.welcome.path;
            }
          }
          return null;
        },
        routes: [
          GoRoute(
            parentNavigatorKey: rootNavigatorKey,
            name: Routes.welcome.name,
            path: Routes.welcome.path,
            builder: (context, state) => const Welcome(),
            routes: [
              StatefulShellRoute.indexedStack(
                parentNavigatorKey: rootNavigatorKey,
                builder: (context, state, navigationShell) {
                  return navigationShell;
                },
                branches: [
                  StatefulShellBranch(
                    navigatorKey:
                        GlobalKey<NavigatorState>(debugLabel: 'welcomeNavigator'),
                    routes: [
                      GoRoute(
                        name: Routes.login.name,
                        path: Routes.login.name,
                        builder: (context, state) => const LoginScreen(),
                      ),
                    ],
                  ),
                  StatefulShellBranch(
                    navigatorKey: createAccountNavigatorKey,
                    routes: [
                      GoRoute(
                        name: Routes.createaccount.name,
                        path: Routes.createaccount.name,
                        builder: (context, state) => const CreateAccount(),
                        routes: [
                          GoRoute(
                            name: Routes.simpleimageeditor.name,
                            path: Routes.simpleimageeditor.name,
                            parentNavigatorKey: createAccountNavigatorKey,
                            builder: (context, state) {
                              Map<String, Object> args =
                                  state.extra as Map<String, Object>;
                              final assets = args['assetsBloc'] as AssetsBloc;
                              final selected =
                                  args['imageBloc'] as SelectedAssetBloc;

                              return SimpleImageEditor(
                                assetsBloc: assets,
                                selectedAssetBloc: selected,
                              );
                            },
                            routes: [
                              GoRoute(
                                name: Routes.mycropeditor.name,
                                path: Routes.mycropeditor.name,
                                builder: (context, state) {
                                  Map<String, Object> args =
                                      state.extra as Map<String, Object>;
                                  final imageBloc =
                                      args['image_bloc'] as SelectedAssetBloc;
                                  return MyCropEditor(imageBloc: imageBloc);
                                },
                              ),
                              GoRoute(
                                name: Routes.myfiltereditor.name,
                                path: Routes.myfiltereditor.name,
                                builder: (context, state) {
                                  Map<String, Object> args =
                                      state.extra as Map<String, Object>;
                                  final imageBloc =
                                      args['image_bloc'] as SelectedAssetBloc;
                                  final transformations =
                                      args['transformations'] as TransformConfigs;
                                  return MyFilterEditor(
                                      transformations: transformations,
                                      imageBloc: imageBloc);
                                },
                              ),
                            ],
                          ),
                        ],
                      ),
                    ],
                  ),
                ],
              ),
            ],
          ),
          StatefulShellRoute.indexedStack(
            parentNavigatorKey: rootNavigatorKey,
            builder: (context, state, navigationShell) {
              return DashboardScreen(key: state.pageKey, child: navigationShell);
            },
            branches: [
              StatefulShellBranch(
                navigatorKey:
                    GlobalKey<NavigatorState>(debugLabel: 'hubNavigator'),
                routes: [
                  GoRoute(
                    name: Routes.hub.name,
                    path: Routes.hub.path,
                    builder: (context, state) => const Hub(),
                  ),
                ],
              ),
              StatefulShellBranch(
                navigatorKey:
                    GlobalKey<NavigatorState>(debugLabel: 'feedNavigator'),
                routes: [
                  GoRoute(
                    name: Routes.feed.name,
                    path: Routes.feed.path,
                    builder: (context, state) => const Feed(),
                  ),
                ],
              ),
              StatefulShellBranch(
                navigatorKey:
                    GlobalKey<NavigatorState>(debugLabel: 'searchNavigator'),
                routes: [
                  GoRoute(
                    name: Routes.search.name,
                    path: Routes.search.path,
                    builder: (context, state) => const Search(),
                  ),
                ],
              ),
              StatefulShellBranch(
                navigatorKey:
                    GlobalKey<NavigatorState>(debugLabel: 'mapaNavigator'),
                routes: [
                  GoRoute(
                    name: Routes.mapa.name,
                    path: Routes.mapa.path,
                    builder: (context, state) => const Mapa(),
                  ),
                ],
              ),
            ],
          ),
        ],
      );
    }
  }

  class GoRouterRefreshStream extends ChangeNotifier {
    GoRouterRefreshStream(Stream<dynamic> stream) {
      notifyListeners();
      _subscription = stream.asBroadcastStream().listen(
            (dynamic _) => notifyListeners(),
          );
    }
    late final StreamSubscription<dynamic> _subscription;
    @override
    void dispose() {
      _subscription.cancel();
      super.dispose();
    }
  }

I tried everything possible. Documentation isnt very detailed unfortunately.

I want to properly do a popuntil feature while preserving the routes state when coming back