How to hide bottom navigation when we navigate to a child route on `ShellRoute`?

Question

I am trying to create the following navigation:

|_ShellRoute
  |_GoRoute /a (needs bottomNav)
    |_GoRoute /a/nested/:id (does not need bottomNav)
  |_GoRoute /b (needs bottomNav)
  |_GoRoute /c (needs bottomNav)

However when I navigate to /a/nested/1 the bottom navigation still shows.

My route code (I am using type safe routes, but I think this stills applies to "normal" go_router):

final rootNavigatorKey = GlobalKey<NavigatorState>();

final router = GoRouter(
  routes: $appRoutes,
  initialLocation: '/a',
  navigatorKey: rootNavigatorKey,
);

final shellNavigatorKey = GlobalKey<NavigatorState>();

@TypedShellRoute<BottomShellRoute>(routes: [
  TypedGoRoute<ARoute>(path: '/a', routes: [
    TypedGoRoute<ANestedRoute>(path: 'nested/:id'),
  ]),
  TypedGoRoute<BRoute>(path: '/b'),
  TypedGoRoute<CRoute>(path: '/c'),
])
class BottomShellRoute extends ShellRouteData {
  const BottomShellRoute();

  static final GlobalKey<NavigatorState> $navigatorKey = shellNavigatorKey;

  @override
  Widget builder(BuildContext context, GoRouterState state, Widget navigator) => BottomShellScreen(
        location: state.location,
        child: navigator,
      );
}

Any idea how to make this route not show the bottom navigation?

Answer 1

One way to approach this would be to "hide" the bottom nav bar on certain routes. Meaning that the bottom nav bar is going to always be in the widget tree, just hidden from view.

This logic would live within the BottomShellScreen widget's build method.

Widget build(BuildContext context) {
   if (location == '/a/nested/:id'){
      return const SizedBox.shrink();
   }

   return ...;
}

Answer 2

I'm using go_router, and in my case I just have to set parentNavigatorKey: rootNavigatorKey on the nested route.