How do you have subpages of a StatefulShellBranch

Question

I have a NavigationBar using a StatefulShellRoute, my problem is I want the SetTimer and CountDownPages to be completely separate meaning they have no navigationbar at the bottom, the SetTimer page is where the user selects their total study time and then they go to the CountDownPage, and I am unsure how to implement this using GoRouter, right now both still have the navbar at the bottom

The code:

final goRouter = GoRouter(
  initialLocation: '/home',
  navigatorKey: _rootNavigatorKey,
  debugLogDiagnostics: true,
  routes: [
    StatefulShellRoute.indexedStack(
      builder: (context, state, navigationShell) {
        return ScaffoldWithNestedNavigation(navigationShell: navigationShell);
      },
      branches: [
        StatefulShellBranch(
          navigatorKey: _shellNavigatorHomeKey,
          routes: [
            // Shopping Cart
            GoRoute(
              path: '/home',
              builder: (BuildContext context, GoRouterState state) =>
                  const MyHomePage(),
              routes: [
                GoRoute(
                  path: 'settimer',
                  builder: (context, state) {
                    return SetTimer();
                  },
                ),
                GoRoute(
                  path: 'countdown',
                  builder: (context, state) {
                    return CountDownPage();
                  },
                ),
              ],
            ),
          ],
        ),
        StatefulShellBranch(
          navigatorKey: _shellNavigatorStatsKey,
          routes: [
            GoRoute(
              path: '/statspage',
              builder: (BuildContext context, GoRouterState state) =>
                  const StatsPage(),
            ),
          ],
        ),
        StatefulShellBranch(
          navigatorKey: _shellNavigatorMoreKey,
          routes: [
            GoRoute(
              path: '/morepage',
              builder: (BuildContext context, GoRouterState state) =>
                  const MorePage(),
            ),
          ],
        ),
      ],
    ),
  ],
);

And to navigate from SetTimer to countdown im using this in an onpressed:

 GoRouter.of(context).go('/home/countdown');

Answer 1

You need to add parentNavigatorKey: _rootNavigatorKey to GoRoute.

Code:

GoRoute(
  path: '/home',
  builder: (BuildContext context, GoRouterState state) =>
      const MyHomePage(),
  routes: [
    GoRoute(
      path: 'settimer',
      parentNavigatorKey: _rootNavigatorKey
      builder: (context, state) {
        return SetTimer();
      },
    ),
    GoRoute(
      path: 'countdown',
      parentNavigatorKey: _rootNavigatorKey
      builder: (context, state) {
        return CountDownPage();
      },
    ),
  ],
),

parentNavigatorKey - An optional key specifying which Navigator to display this route's screen onto.