CODEWITHSUNDEEP
androidiosflutterdartroutes
Ensei Tankado
Ensei Tankado

Reputation: 330

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

Upvotes: 6

Views: 6209

Answers (2)

krishnaacharyaa
krishnaacharyaa

Reputation: 24910

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

Upvotes: 12

ahmetakil
ahmetakil

Reputation: 908

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

Upvotes: 4

Related Questions