How to use context.go() method for ShellRoute in Flutter/GoRouter

Question

I have a login page, and after login homepage basically. The homepage has BottomNavigationBar, like Instagram, and It's obvious that it's not GoRoute, instead of this it's ShellRoute. So, ShellRoute has a key, but it has not path parameter, and because of this I can not use context. go or push methods.

I supposed that ShellRoute has a path but it's not.

Answer 1

Things to keep in mind while using context.go() from ShellRoute to GoRoute

1. Specify parentNavigatorKey prop in each GoRoute
2. Use context.go() to replace page , context.push() to push page to stack

Code Structure to follow:

final _parentKey = GlobalKey<NavigatorState>();
final _shellKey = GlobalKey<NavigatorState>();

|_ GoRoute
  |_ parentNavigatorKey = _parentKey   👈 Specify key here
|_ ShellRoute
  |_ GoRoute                            // Needs Bottom Navigation                  
    |_ parentNavigatorKey = _shellKey   
  |_ GoRoute                            // Needs Bottom Navigation
    |_ parentNavigatorKey = _shellKey   
|_ GoRoute                              // Full Screen which doesn't need Bottom Navigation
  |_parentNavigatorKey = _parentKey

---

Refer detailed code and explaination of bottom NavigationBar using ShellRoute and GoRouter here

Answer 2

You should

• give "initialLocation" parameter to your "GoRouter"
• give "routes" parameter to your "ShellRoute"

After doing these, you will understand why you don't need to add "path" parameter to your ShellRoute.

final GoRouter router = GoRouter(
  navigatorKey: _rootNavigatorKey,
  initialLocation: '/home',
  routes: <RouteBase>[
    /// Application shell
    ShellRoute(
      navigatorKey: _shellNavigatorKey,
      builder: (BuildContext context, GoRouterState state, Widget child) {
        return ScaffoldWithNavBar(child: child);
      },
      routes: <RouteBase>[
        /// The first screen after login.
        GoRoute(
          path: '/home',
          builder: (BuildContext context, GoRouterState state) {
            return const HomeScreen();
          },
        ),
        /// Second screen on the navigation bar
        GoRoute(
          path: '/discover',
          builder: (BuildContext context, GoRouterState state) {
            return const DiscoverScreen();
          },
          ///Post Detail Screen inside of Discover Screen
          routes: <RouteBase>[
            GoRoute(
              path: 'post_detail',
              parentNavigatorKey: _rootNavigatorKey,
              builder: (BuildContext context, GoRouterState state) {
                return const PostDetailScreen();
              },
            ),
          ],
        ),
      ],
    ),
  ],
);

You can use context.go('/discover') in your ScaffoldWithNavBar() widget, when user tap the one of the bottom navigation bar item.