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

Go router: Use GoRoute and ShellRoute – Flutter

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

2

Answers


  1. 0

    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

    Login or Signup to reply.
  2. 0

    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

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

Back To Top
Search