androidiosflutterdartroutes

Go router: Use GoRoute and ShellRoute

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

I have 3 screens:

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'),
            ),
          ],
        ),
      ],
    ),
  ],
);
Solution

  • 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