I want to hide the bottom navigation bar in nested sub routes using the go_router package

Question

I have the following routes:

|_ShellRoute |_GoRoute /homescreen (requires bottom navigation) |_GoRoute /homescreen/productdetails/:id (does not requires bottom navigation) |_GoRoute /cartscreen (requires bottom navigation)

I want to hide the navigation bar when I am on productdetails screen. I dont want the navigation bar on that screen. How can I do it.

Here is the code:

Routing File:

enum AppRoute {
  home,
  product,
  cart,
}

// private navigators
final _rootNavigatorKey = GlobalKey<NavigatorState>();
final _shellNavigatorHomeKey = GlobalKey<NavigatorState>(debugLabel: 'Home');
final _shellNavigatorCartKey = GlobalKey<NavigatorState>(debugLabel: 'Cart');

final router = GoRouter(
  debugLogDiagnostics: true,
  navigatorKey: _rootNavigatorKey,
  routes: [
    // Home Route
    StatefulShellRoute.indexedStack(
      builder: (context, state, navigationShell) =>
          ScaffoldWithNavBar(navigationShell: navigationShell),
      branches: [
        StatefulShellBranch(
          navigatorKey: _shellNavigatorHomeKey,
          routes: [
            // home route
            GoRoute(
              path: '/',
              name: AppRoute.home.name,
              builder: (context, state) => const HomeScreen(),
              routes: [
                GoRoute(
                  path: 'product/:id',
                  name: AppRoute.product.name,
                  builder: (context, state) {
                    final id = state.pathParameters['id']!;
                    return ProductDescriptionScreen(id: id);
                  },
                ),
              ],
            ),
          ],
        ),

        // cart route
        StatefulShellBranch(
          navigatorKey: _shellNavigatorCartKey,
          routes: [
            GoRoute(
              path: '/cart',
              name: AppRoute.cart.name,
              builder: (context, state) => const CartScreen(),
            ),
          ],
        ),
      ],
    ),
  ],
);

Screen Where Implementing Bottom Navigation Bar

class ScaffoldWithNavBar extends StatelessWidget {
  final StatefulNavigationShell navigationShell;
  const ScaffoldWithNavBar({super.key, required this.navigationShell});

  void _goBranch(int index) {
    navigationShell.goBranch(index,
        initialLocation: index == navigationShell.currentIndex);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: navigationShell,
      bottomNavigationBar: NavigationBar(
        destinations: const [
          NavigationDestination(icon: Icon(Icons.home), label: 'Home'),
          NavigationDestination(icon: Icon(Icons.shopping_cart), label: 'Cart'),
          NavigationDestination(icon: Icon(Icons.person), label: 'Account'),
        ],
        onDestinationSelected: _goBranch,
        selectedIndex: navigationShell.currentIndex,
      ),
    );
  }
}

I am not getting any idea How to Implement it.

Here is homescreen picture: HomeScreen Image I want bottom navigation bar here and it is implemented.

and here is CartScreen: CartScreen Image I want bottom navigation bar here and it is implemented.

and here is ProductDescriptionScreen: ProductDescriptionScreen Image I don't want bottom navigation bar here. I want to remove it from this screen.

I have read some articles on how to hide or remove the bottom navigation bar while navigating to child routes, but none of the solutions are working for me. I am currently stuck and unsure of how to proceed.

Here is a link to the issue I posted on Stack Overflow, but I have not been able to resolve it yet: Bottom Navigation Bar Issue

Answer 1

The routes look like this:

_ShellRoute 
|_GoRoute /homescreen (requires bottom navigation) 
|_GoRoute /homescreen/productdetails/:id (does not requires bottom navigation) 
|_GoRoute /cartscreen (requires bottom navigation)

Sorry for messing up in start