Question 220493 in Flutter Question posted in
The official Flutter documentation can be found here.

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

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),
      ),
    );
  }
Tags:

2

Answers


  1. 0

    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

    Login or Signup to reply.
  2. 0

    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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search