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

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

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.

Tags:

3

Answers


  1. 0

    You can follow the sample code here , and after the GoRouter settings, you don’t need the ShellRoute’s path.
    After login, you just context.go(‘YOUR BottomNavigationBar’s FIRST PAGE’).
    In the sample code, just use context.go(‘/a’) and everything will work well!

    Login or Signup to reply.
  2. 0

    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.

    Login or Signup to reply.
  3. 0

    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

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

Back To Top
Search