[go_router] Pushing to StatefulShellRoute from a top level route, the builder does not show

[abdimussa87]

Is there an existing issue for this?

• I have searched the existing issues
• I have read the guide to filing a bug

Steps to reproduce

1. Define top level routes and shell routes
2. Navigate to a shell route from a top level route using context.pushNamed()
3. The bottom navigation bar isn't visible

Expected results

The shell route should load the bottom navigation bar

Actual results

The bottom navigation bar isn't visible

Code sample

Code sample

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:go_router/go_router.dart';

void main() {
  runApp(
    MyApp(),
  );
}

class MyRouter {
  static final GlobalKey<NavigatorState> _rootNavigator =
      GlobalKey<NavigatorState>(debugLabel: 'root');

  static String agentRouteName = '/agent';
  static String homeRouteName = '/home';
  static String profileRouteName = '/profile';

  static GoRouter router = GoRouter(
      navigatorKey: _rootNavigator,
      debugLogDiagnostics: kDebugMode,
      initialLocation: '/agent',
      routes: [
        GoRoute(
          name: agentRouteName,
          path: '/agent',
          builder: (context, state) {
            return AgentPage();
          },
        ),
        StatefulShellRoute.indexedStack(
          builder: (context, state, navigationShell) {
            return NavPage(navigationShell: navigationShell);
          },
          branches: [
            StatefulShellBranch(
              routes: [
                GoRoute(
                  name: homeRouteName,
                  path: '/home',
                  pageBuilder: (context, state) {
                    return NoTransitionPage(child: HomePage());
                  },
                ),
              ],
            ),
            StatefulShellBranch(
              routes: [
                GoRoute(
                  name: profileRouteName,
                  path: '/profile',
                  pageBuilder: (context, state) {
                    return NoTransitionPage(child: ProfilePage());
                  },
                ),
              ],
            ),
          ],
        ),
      ]);
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp.router(
      title: 'Reproducible code',
      debugShowCheckedModeBanner: false,
      routerConfig: MyRouter.router,
    );
  }
}

class AgentPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Agent page')),
      body: Center(
        child: ElevatedButton(
          onPressed: () => context.pushNamed(MyRouter.homeRouteName),
          child: Text('Go to home page'),
        ),
      ),
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Home page')),
      body: Text('Home Page'),
    );
  }
}

class ProfilePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Profile page')),
      body: Text('Profile Page'),
    );
  }
}

class NavPage extends StatelessWidget {
  final StatefulNavigationShell navigationShell;
  const NavPage({
    required this.navigationShell,
    super.key,
  });

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: navigationShell,
      bottomNavigationBar: NavigationBar(
        selectedIndex: navigationShell.currentIndex,
        destinations: const [
          NavigationDestination(label: 'Home Page', icon: Icon(Icons.home)),
          NavigationDestination(
              label: 'Profile Page', icon: Icon(Icons.person)),
        ],
        onDestinationSelected: _goBranch,
      ),
    );
  }

  void _goBranch(int index) {
    navigationShell.goBranch(index);
  }
}

Screenshots or Video

Screenshots / Video demonstration

Expected	Actual

Logs

Logs

[Paste your logs here]

Flutter Doctor output

Doctor output

[✓] Flutter (Channel stable, 3.10.5, on macOS 13.4.1 22F82 darwin-arm64, locale en-ET)
    • Flutter version 3.10.5 on channel stable at /Users/abdi/fvm/versions/stable
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 796c8ef792 (4 weeks ago), 2023-06-13 15:51:02 -0700
    • Engine revision 45f6e00911
    • Dart version 3.0.5
    • DevTools version 2.23.1

[✓] Android toolchain - develop for Android devices (Android SDK version 33.0.0)
    • Android SDK at /Users/abdi/Library/Android/sdk
    • Platform android-33, build-tools 33.0.0
    • ANDROID_HOME = /Users/abdi/Library/Android/sdk
    • Java binary at: /Applications/Android Studio.app/Contents/jre/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 11.0.12+0-b1504.28-7817840)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 14.1)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 14B47b
    • CocoaPods version 1.12.0

[✓] Android Studio (version 2021.2)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 11.0.12+0-b1504.28-7817840)

[✓] VS Code (version 1.80.0)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.68.0

[✓] Connected device (2 available)
    • sdk gphone arm64 (mobile) • emulator-5554                        • android-arm64 • Android 11 (API
      30) (emulator)
    • iPhone 14 (mobile)        • 5CE9B48C-9ED1-4629-B822-FF785744D0C9 • ios           •
      com.apple.CoreSimulator.SimRuntime.iOS-16-1 (simulator)

[✓] Network resources
    • All expected network resources are available.

• No issues found!

[huycozy]

Thank you for the report. I can see this issue on the latest package version go_router: ^9.0.3.

In this case, StatefulShellRoute is not at the top level but the 2nd level, and its builder is not built. I also can reproduce this with stateful_shell_route.dart (need to modify it so that StatefulShellRoute is on the 2nd route). Updating the issue's title corresponding to this.

flutter doctor -v (stable and master)

[✓] Flutter (Channel stable, 3.10.6, on macOS 13.0.1 22A400 darwin-x64, locale en-VN)
    • Flutter version 3.10.6 on channel stable at /Users/huynq/Documents/GitHub/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision f468f3366c (5 hours ago), 2023-07-12 15:19:05 -0700
    • Engine revision cdbeda788a
    • Dart version 3.0.6
    • DevTools version 2.23.1

[✓] Android toolchain - develop for Android devices (Android SDK version 32.0.0)
    • Android SDK at /Users/huynq/Library/Android/sdk
    • Platform android-33, build-tools 32.0.0
    • ANDROID_HOME = /Users/huynq/Library/Android/sdk
    • Java binary at: /Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 17.0.6+0-17.0.6b802.4-9586694)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 14.3)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 14E222b
    • CocoaPods version 1.11.3

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 2022.2)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 17.0.6+0-17.0.6b802.4-9586694)

[✓] VS Code (version 1.80.0)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.68.0

[✓] Connected device (3 available)
    • RMX2001 (mobile) • EUYTFEUSQSRGDA6D • android-arm64  • Android 11 (API 30)
    • macOS (desktop)  • macos            • darwin-x64     • macOS 13.0.1 22A400 darwin-x64
    • Chrome (web)     • chrome           • web-javascript • Google Chrome 114.0.5735.198

[✓] Network resources
    • All expected network resources are available.

• No issues found!

[!] Flutter (Channel master, 3.13.0-3.0.pre.21, on macOS 13.0.1 22A400 darwin-x64, locale en-VN)
    • Flutter version 3.13.0-3.0.pre.21 on channel master at /Users/huynq/Documents/GitHub/flutter_master
    ! Warning: `flutter` on your path resolves to /Users/huynq/Documents/GitHub/flutter/bin/flutter, which is not inside your current Flutter SDK checkout at /Users/huynq/Documents/GitHub/flutter_master. Consider adding /Users/huynq/Documents/GitHub/flutter_master/bin to the front of your path.
    ! Warning: `dart` on your path resolves to /Users/huynq/Documents/GitHub/flutter/bin/dart, which is not inside your current Flutter SDK checkout at /Users/huynq/Documents/GitHub/flutter_master. Consider adding /Users/huynq/Documents/GitHub/flutter_master/bin to the front of your path.
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 47ba59c762 (3 hours ago), 2023-07-12 20:46:57 -0400
    • Engine revision 1b1ccdd1f5
    • Dart version 3.1.0 (build 3.1.0-302.0.dev)
    • DevTools version 2.25.0
    • If those were intentional, you can disregard the above warnings; however it is recommended to use "git" directly to perform update checks and upgrades.

[✓] Android toolchain - develop for Android devices (Android SDK version 32.0.0)
    • Android SDK at /Users/huynq/Library/Android/sdk
    • Platform android-33, build-tools 32.0.0
    • ANDROID_HOME = /Users/huynq/Library/Android/sdk
    • Java binary at: /Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 17.0.6+0-17.0.6b802.4-9586694)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 14.3)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 14E222b
    • CocoaPods version 1.11.3

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 2022.2)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 17.0.6+0-17.0.6b802.4-9586694)

[✓] VS Code (version 1.80.0)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.68.0

[✓] Connected device (3 available)
    • RMX2001 (mobile) • EUYTFEUSQSRGDA6D • android-arm64  • Android 11 (API 30)
    • macOS (desktop)  • macos            • darwin-x64     • macOS 13.0.1 22A400 darwin-x64
    • Chrome (web)     • chrome           • web-javascript • Google Chrome 114.0.5735.198

[✓] Network resources
    • All expected network resources are available.

! Doctor found issues in 1 category.

[TrustOkoroego]

Hi,
I am facing the same issue in 10.0.0 . Any workaround pending when this is fixed?

[AlaaEldeenYsr]

Hi,
I am facing the same issue, please help @huycozy

[c0pp1ce]

Isn't this expected behavior? You should use goNamed in order to navigate to a specific location with its full stack (the parent routes).
When using pushNamed you simply push the specified page onto the current stack, but not any of its parents.

Since the nested navigator that adds the shell is defined in the routes tree I would assume that it is required to use go if you would want to have the shell.

Is there a specific reason for you to use pushNamed instead of goNamed ?

[AlaaEldeenYsr]

The reason is that i don't want to remove the back stack. When you use go instead of push you replace all the current stack of pages with a new page.
@c0pp1ce

[c0pp1ce]

I know. And guess thats also the reason why push does not work in your use case.

But you could rearrange your routes so that your shell route is a child of the other route. Then you can simply use go.

[AlaaEldeenYsr]

@c0pp1ce Wow, Thank so much. As you mentioned i rearranged my routes and with go it worked out of the box !

[abdimussa87]

I know. And guess thats also the reason why push does not work in your use case.

But you could rearange your routes so that your shell route is a child of the other route. Then you can simply use go.

This is not a desired solution for my usecase. What I'm dealing with is there are 2 roles. A user role will be shown the shell route as the first page, while an Admin role will first be shown a page where it contains the user's it has created and when a user is clicked then it'll show the shell route. So you can think of the admin having a layer before the shell route. Therefore, pushing the shell route from the admin page should show the shell route and when backed out, should go back to admin page.

[c0pp1ce]

You can still rearrange you routes in order to achieve your desired behavior while using go.

If you need some guidance, I could show you an example of a working solution. But since that is using query parameters instead of proper state management (for roles, users) I wont post it here (its simply quite messy 😄).

Anyway, a more abstract way to get it done:

1. Extract the StatefulShellRoute into its own variable.
2. Setup your routes in way that you can reuse the StatefulShellRoute from 1. within them.

An example:

/login
/app
    /users
        (StatefulShellRoute)
    (StatefulShellRoute)

3. Implement proper redirecting logic to secure the admin-only routes. In the example that would be done in /app. Redirect to the route for normal users if admin access rights are missing. Redirect to /app/users or /app/(ShelLRoute) if /app is accessed if that route has no page to display.
4. Now all that is left would be to make sure that the logic within the StatefulShellRoute works for both paths. Any go that is called from pages inside of it will need to make sure they use the correct paths. The easiest way would probably be to use a helper function like this:

/// Assuming the StatefulShellRoute has two branches: /account, /other.
void branchRelativeGo(BuildContext context, String location) {
    final String location = GoRouterState.of(context).location;
    final parts = location.split("/");
    /// Using contains so it works with query parameters.
    final indexOfInitialBranchLocation = parts.indexWhere(
      (element) => element.contains("account") || element.contains("other"),
    );
    /// Path to the shell. In the example either /app or /app/users
    final shellPath = parts.removeRange(indexOfInitialBranchLocation, parts.length).join("/");
    
    context.go("$shellPath$location");
}

It then could be used like

onTap: () => branchRelativeGo(context, "/account");

So you would need to specify the locations starting with the initial branch location.

Problems

This approach, as can be seen already, does come with some boilerplate. Even more boilerplate code is required if there are sibling routes of the StatefulShellRoute that can be reached from a child route of the StatefulShellRoute using go since you would not to remember from where you came for a potential go back to shell.

Edit

I do think this would be much easier to implement if popping pages would trigger the redirects.

[omar-hanafy]

TheStatefulShellRoute is also affected by deeplinks. when I test

adb shell 'am start -a android.intent.action.VIEW \
    -c android.intent.category.BROWSABLE \
    -d "http://example/menu"' \
    com.example

it removes the back stack and replaces all the current stack of pages with a new page (menu).
while using GoRouter.of(context).push respects StatefulShellRoute.
The Deeplink behavior here is the same as using context.go also pops the pages that opened from deep link throw exception cuz now it's the last page of the stack.

[JaveedIshaq]

Isn't this expected behavior? You should use goNamed in order to navigate to a specific location with its full stack (the parent routes). When using pushNamed you simply push the specified page onto the current stack, but not any of its parents.

Since the nested navigator that adds the shell is defined in the routes tree I would assume that it is required to use go if you would want to have the shell.

Is there a specific reason for you to use pushNamed instead of goNamed ?

thanka a lot, You saved my day

[patrikheinonen]

@c0pp1ce How would you do it you wanted the backbutton to show when navigating from a shell route to a login screen that is at top level. You would have to use context.push and not context go right?

And if you dont use GoRouter.optionURLReflectsImperativeAPIs = true; which is adviced against, the url wont be updated when doing context.push. Also I heard that context.push should be avoided alltogether. There is a lot of confusion around this for me.

[c0pp1ce]

@patrikheinonen I think this is off-topic, I am unsure if it should be discussed here.

Anyway, I would first ask why there is a need for a back button on a login page. But yes, you will need to make sure the stack of pages matches your needs - either through fitting route structure or by using push.

[lizhuoyuan]

@c0pp1ce I have some pages like :

• splash page
• StatefulShellRoute
• other page

now, I open app , splash page ->StatefulShellRoute
then i go to "other page" , I want to back to StatefulShellRoute
I want to StatefulShellRoute alive

[c0pp1ce]

@lizhuoyuan You have several options. What is the purpose of other page ? You can use push or you can place it as a sub-route of your StatefulShellRoute.

[ThangVuNguyenViet]

I know. And guess thats also the reason why push does not work in your use case.

But you could rearrange your routes so that your shell route is a child of the other route. Then you can simply use go.

@c0pp1ce Most of the examples in go_router aren't enough to guide rearranging. I can't figure out how to handle the simple following case:

screen A -> screen C
screen A -> screen B -> screen C

screen C can be go-ed from 2 routes, A and B. I don't know how to specifically declare that in go_router_builder. That's why we need to push shell page, not just go

Take the example below. This will cause the error $CRouteExtension is declared twice

TypedGoRoute<ARoute>(
  path: '/a',
  routes: [
    TypedGoRoute<BRoute>(
      path: 'b',
      routes: [
        TypedGoRoute<CRoute>(path: 'c'),
      ]
    ),
    TypedGoRoute<CRoute>(path: 'c')
  ]
)

[c0pp1ce]

@ThangVuNguyenViet

General approach

You should first decide if you actually need to use go (e.g. if you are building for web or you need to be able to deep-link to that screen or its a shellRoute and you need the shell to always be visible ...).

If that is the case you have two options. The first one would be to arrange the routes in a way that the parent-child relations enable the behaviour that you need. The second one would be to define multiple routes that display the same widget/screen.

Concerning your specific problem

I am not a huge fan of code generation. Your problem validates this opinion once again. Code gen is hard to get right after all.

You tried to go with the second option in order to achieve the desired behaviour. Thats fine. More importantly it works without any problems when using go_router directly. I have never used go_router_builder so I am not able to provide any help for it.

However, I would try to do something like this:

final cRoute = TypedGoRoute<CRoute>(path: 'c');

TypedGoRoute<ARoute>(
  path: '/a',
  routes: [
    TypedGoRoute<BRoute>(
      path: 'b',
      routes: [
        cRoute,
      ]
    ),
    cRoute,
  ]
)

[ThangVuNguyenViet]

@c0pp1ce thanks for the reply
Shouldn't it be something like this if it's done without the builder?

GoRoute(
  path: '/a',
  builder: (context, state) => APage(),
  routes: [
    GoRoute(
      path: 'b',
      builder: (context, state) => BPage(),
      routes: [
        GoRoute(
          path: 'c',
          builder: (context, state) => CPage(),
        ),
      ],
    ),
    GoRoute(
      path: 'c',
      builder: (context, state) => CPage(),
    ),
  ],
),

And when we wanna go to C from A, we use context.go('/a/c'). If it's from B, we use context.go('/a/b/c'), right?
And if we need to name the routes returning CPage(), we'll have to name them something like cFromA, cFromB, right?

If they are true, then things get bloated very quickly

[c0pp1ce]

Exactly.

Yes, if you want to assign the paths to variables you would need to name them differently. Sadly, go_router does not seem to support relative routes which would make this even simpler. (#108177)

[ThangVuNguyenViet]

@c0pp1ce the #139471 issue I just filed is kinda related to this one. I can't find a way to go to a route that's in a shell route, and it plays the transition animation of the route and the shell route. IMO, that supports the idea of pushing a route should push the ShellRoute as well.
Would really appreciate that you'd check it out

[github-actions]

This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of flutter doctor -v and a minimal reproduction of the issue.