Handle sub route navigation

[chunlee-thong]

I have a route that looks like this. verify and add-info is a subroute of signup.

• signup
  • verify
  • add-info

When the user reaches the add-info route and clicks the back button, I want to navigate to signup instead of verify.
How to achieve this behavior?

[csells]

You bet. The docs here describe how to do that: https://pub.dev/packages/go_router#sub-routes

[chunlee-thong]

But what if I want to press the back button on AppBar in add-info and go back to verify?

[KuoyHuot]

I'm confused. How can I navigate from verify back to the top level of the stack (signup) when users press the android back button?

[csells]

Then you make add-info a sub-route of verify.

[csells]

What happens when you apply the instructions at https://pub.dev/packages/go_router#sub-routes ? What have you got so far? What behavior are you not getting that you expect?

[KuoyHuot]

I've followed the instruction hopefully correctly. What I get is when I press the android back button I go back from add-info to verify . What I want is to go back from add-info to signup.

my router:

• signup
  • verify
    • add-info

[csells]

What does the code for your list of routes look like?

[KuoyHuot]

this is my route list

final GoRouter router = GoRouter(
  initialLocation: MainMenuScreen.routePath,
  routes: [
    GoRoute(
      path: MainMenuScreen.routePath,
      pageBuilder: (context, state) => MaterialPage<void>(
        key: state.pageKey,
        child: const MainMenuScreen(),
      ),
      routes: [
        GoRoute(
          path: GameplayScreen.routePath,
          pageBuilder: (context, state) => CustomTransitionPage<void>(
            key: state.pageKey,
            child: const GameplayScreen(),
            transitionsBuilder:
                (context, animation, secondaryAnimation, child) {
              return child;
            },
          ),
        ),
        GoRoute(
          path: GameResultScreen.routePath,
          pageBuilder: (context, state) => CustomTransitionPage<void>(
            key: state.pageKey,
            child: const GameResultScreen(),
            transitionsBuilder:
                (context, animation, secondaryAnimation, child) {
              return child;
            },
          ),
        ),
      ],
    ),
  ],
  errorPageBuilder: (context, state) => MaterialPage<void>(
    key: state.pageKey,
    child: const MainMenuScreen(),
  ),
);

I want to go from MainMenuScreen -> GameplayScreen -> GameResultScreen. While in GameResultScreen, when user press the android back button I want to go back to MainMenuScreen. Basically I want to pop the GameplayScreen when navigating to GameResultScreen

[csells]

that should already work. play and result are both sub-routes of main, so if you're on result, the Android Back button should take you to main. if that's not the case, please log a bug with a minimal repro project.

[KuoyHuot]

It works now. I just need to use go to navigate instead of push.

[csells]

Correct. go builds up the entire stack of pages, replacing the current state. push creates the last page it matches and pushes that onto the existing stack.