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

Flutter – How to set router.pop() properly in GoRouter when using ShellRoute

In my project I am using go_router: ^12.1.3. I am having trouble with the back button while using router.pop()/context.pop().

My route is something like /community_tab_selected/0/profile_subroute_from_community. This redirects from the Community Screen to the Profile Screen in my app. When I press the back button in Profile Screen using router.pop()/context.pop(), I want it to redirect to /community_tab_selected/0 but it redirects me to /dashboard which is base route. How can I achieve proper pop() functionality so that it pops the shell route(profile_subroute_from_community) and leads me to the route of /community_tab_selected/0

Community route

final communityTab = GoRoute(
  name: ROUTE.community_tab_selected,
  path: '/community_tab_selected/:index',
  pageBuilder: (context, state) {
    return createRoutePage(
      state.pageKey,
      DashboardPage(
        initialIndex: "1",
        communityTabParams:
            CommunityChannelPageQueryParams.fromJson(state.pathParameters),
      ),
      opaque: false,
    );
  },
  routes: [
    ShellRoute(
      builder: (context, state, child) {
        return child;
      },
      routes: [
        profileSubrouteFromCommunity,
      ],
    ),
  ],
);

ShellRoute for Profile

final profileSubrouteFromCommunity = GoRoute(
  name: ROUTE.profile_subroute_from_community,
  path: 'profile_subroute_from_community/:userid',
  pageBuilder: (context, state) {
    return createRoutePage(
      state.pageKey,
      const ProfilePage(),
      opaque: false,
    );
  },
);
Tags:

2

Answers


  1. 0

    If you want to keep you navigation history using GoRouter…
    Make sure that you are using Router.push() or context.push instead of the Router.go() or context.go()

    • push() saves the new route on top of the Navigation stack so you can return to previous routes in the Navigation stack using the pop() function..
    • go() function does also open the new route but will also delete the existing Navigation stack.
      Always use the push() if you want to keep the Navigation history.
    Login or Signup to reply.
  2. 0

    Unfortunately I ran into the same issues with StatefulShellRoute.indexedStack but the logic should be the same for ShellRoute‘s as well.

    It’s also unfortunate that I needed to rely on the native navigator than on GoRouter in this case.

    The following piece of code pops all of the ShellRoutes from the navigation stack:

    Navigator.of(context).popUntil((route) {
  final routeSettings = route.settings;
  return routeSettings.name == 'invoices';
});

    The following code pops all of the Routes until the first route is encountered: (rootNavigator: true might be optional).

    Navigator.of(context, rootNavigator: true).popUntil((route) {
  return route.isFirst;
});

    We will have to rely on the native old Navigator for this until it gets support from the Flutter team
    You can reach the whole code in this gist.

    Let me know if this makes sense for you. Hope this answer and gist becomes a reference to others as well.

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

Back To Top
Search