How to hide BottomNavigationBar in specific routes using GoRouter in Flutter?

Question

https://github.com/flutter/packages/blob/main/packages/go_router/example/lib/others/custom_stateful_shell_route.dart In this code, the ButtomBar is always displayed even when details is displayed. However, I would like to hide the ButtomBar when I am viewing 'a/details'. Is there a way to do this?

One possible way to do this is to use navigationShell.shellRouteContext.routerState.matchedLocation.contains('details'). but I think there should be a simpler way. How should this be done?

Specifically, I would like to determine whether to enable or disable buttombar based on the page currently displayed in the following section.

class ScaffoldWithNavBar extends StatelessWidget {
  const ScaffoldWithNavBar({
    required this.navigationShell,
    required this.children,
    Key? key,
  }) : super(key: key ?? const ValueKey<String>('ScaffoldWithNavBar'));

  final StatefulNavigationShell navigationShell;

  /// ([AnimatedBranchContainer]).
  final List<Widget> children;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: AnimatedBranchContainer(
        currentIndex: navigationShell.currentIndex,
        children: children,
      ),
      bottomNavigationBar: BottomNavigationBar(
        items: const <BottomNavigationBarItem>[
          BottomNavigationBarItem(icon: Icon(Icons.home), label: 'Section A'),
          BottomNavigationBarItem(icon: Icon(Icons.work), label: 'Section B'),
        ],
        currentIndex: navigationShell.currentIndex,
        onTap: (int index) => _onTap(context, index),
      ),
    );
  }

What you can do is, have a Scaffold on each route, and then, if you want to have a BottomNavigationBar specfiy one in the Scaffold, if not, leave it out. Use Heros or Keys on the Scaffold and transition Widgets on BottomNavigationBar, AppBar etc. It's kind of annoying to setup, but this way you solve this declaratively — Valiumdiät, Jul 28 '23 at 02:38

score 2 · Answer 1 · answered Aug 01 '23 at 08:17

To hide bottom navigation bar on certain screens, you can make the following changes in the example you provided at: https://github.com/flutter/packages/blob/main/packages/go_router/example/lib/others/custom_stateful_shell_route.dart

First create two GlobalKeys:

final GlobalKey<NavigatorState> _rootNavigatorKey =
GlobalKey<NavigatorState>(debugLabel: 'root');
final GlobalKey<NavigatorState> _tabANavigatorKey =
GlobalKey<NavigatorState>(debugLabel: 'tabANav');

In the GoRouter you create, assign _rootNavigatorKey to navigatorKey parameter, like:

final GoRouter _router = GoRouter(
    navigatorKey: _rootNavigatorKey,
    initialLocation: '/a',
    routes: <RouteBase>[
       ...
    ]
)

and to shellRoutes where you want to hide the bottom navigation bar, like DetailsScreen add _rootNavigatorKey to parentNavigatorKey, like:

                  GoRoute(
                    path: 'details',
                    parentNavigatorKey: _rootNavigatorKey,
                    builder: (BuildContext context, GoRouterState state) =>
                    const DetailsScreen(label: 'A'),
                  ),

Now when you go or push to details screen, the bottom navigation bar will not be shown.

GoRouter.of(context).go('/a/details');

If you have more questions, you can ask me and I'll be happy to answer them.

Feyiz Oktay Aydır · Answer 2 · 2023-07-28T06:25:54.260

1

If you assign a rootKey to the 'a/details' page and perform navigation to that page using push, I believe your issue will be resolved.

GoRoute(
    path: 'details',
    parentNavigatorKey: _rootKey,
    builder: (BuildContext context, GoRouterState state) =>
    const DetailsScreen(label: 'A'),
),

and use

context.push('a/details');

do not forget to add Scaffold your DetailsScreen's build function

edited Jul 28 '23 at 06:25

answered Jul 28 '23 at 06:23

Feyiz Oktay Aydır

71
8

How to hide BottomNavigationBar in specific routes using GoRouter in Flutter?

2 Answers2