5

What is the best approach to handle routing with GoRoute and ShellRoute.

I have 3 screens. Setting - show full screen A - show with a Bottom Navigation (wrapped with Shelled Route) B - show with a Bottom Navigation (wrapped with Shelled Route)

The only issue I encounter in this config is a missing back button when I go to Settings screen. How can I fix it?

final goRouter = GoRouter(
  initialLocation: '/a',
  navigatorKey: _rootNavigatorKey,
  routes: [
    GoRoute( // = Do not show Bottom Navigation, just a full screen
      path: '/settings',
      pageBuilder: (context, state) => const NoTransitionPage(
        child: SettingsPage(),
      ),
    ),
    ShellRoute( // ShellRoute = Show Bottom Navigation
      navigatorKey: _shellNavigatorKey,
      builder: (context, state, child) {
        return ScaffoldWithBottomNavigation(
          tabs: tabs,
          child: child,
        );
      },
      routes: [
        GoRoute( 
          path: '/a',
          pageBuilder: (context, state) => const NoTransitionPage(
            child: HomeScreen(label: 'A', detailsPath: '/a/details'),
          ),
          routes: [
            GoRoute(
              path: 'details',
              builder: (context, state) => const DetailsScreen(label: 'A'),
            ),
          ],
        ),
        GoRoute(
          path: '/b',
          pageBuilder: (context, state) => const NoTransitionPage(
            child: HomeScreen(label: 'B', detailsPath: '/b/details'),
          ),
          routes: [
            GoRoute(
              path: 'details',
              builder: (context, state) => const DetailsScreen(label: 'B'),
            ),
          ],
        ),
      ],
    ),
  ],
);
krishnaacharyaa
  • 14,953
  • 4
  • 49
  • 88
Ensei Tankado
  • 270
  • 2
  • 12

2 Answers2

9

Present mistakes in the code.

  1. Using of context.go('/someRoute') for pushing page to the stack
  2. Not using the parentNavigatorKey prop of GoRoute.

Possible solutions:

  1. Use context.push('/someRoute') to push the page to the stack, only then you can see the back button in the pushed page.

  2. Use parentNavigatorKey property in each route and specify explicitly where the present GoRoute lies .

    • If page is child of ShellRoute : parentNavigatorKey:_shellNavigatorKey
    • If page is child of MainRoute : parentNavigatorKey:_rootNavigatorKey

Updated settings route:

GoRoute( 
      parentNavigatorKey:_rootNavigatorKey       Specify explicity that settings page lies in the Main Route 
      path: '/settings',
      pageBuilder: (context, state) => const NoTransitionPage(
        child: SettingsPage(),
      ),
    ),

Now you will get rid of the bottomNavigationBar which lies inside the ShellRoute.

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

krishnaacharyaa
  • 14,953
  • 4
  • 49
  • 88
  • 1
    Thank you very much for this response. This solves all my issues. I have applied this to my code and I've achieved everything I wanted. Thanks! – Ensei Tankado Jan 03 '23 at 17:26
4

To have a back button there is 2 paths you can follow.

  1. Using push instead of go:

If you use push the back button will take you back to the previous page.

  1. Using go to a subroute so for your case settings page needs to be sub-route of another page, which may not be feasible if there are multiple paths user can access the settings.

So i would recommend using push when navigating to the settings page

ahmetakil
  • 879
  • 6
  • 15