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

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

Define top level routes and shell routes
Navigate to a shell route from a top level route using context.pushNamed()
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

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

[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!

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.

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

@huycozy

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

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 ?

@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.

@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')
  ]
)

@ThangVuNguyenViet

@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,
  ]
)

@c0pp1ce

@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

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)

@c0pp1ce

@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

[go_router] Refactored RouteMatchList and imperative APIs (#5497)

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.

[go_router] Refactored RouteMatchList and imperative APIs (flutter#5497)

Navigation Menu

Repository navigation

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

Is there an existing issue for this?

Steps to reproduce

Expected results

Actual results

Code sample

Screenshots or Video

Logs

Flutter Doctor output

11 remaining items

General approach

Concerning your specific problem

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

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

Description

Is there an existing issue for this?

Steps to reproduce

Expected results

Actual results

Code sample

Screenshots or Video

Logs

Flutter Doctor output

Activity

huycozy commented on Jul 13, 2023

TrustOkoroego commented on Jul 29, 2023

AlaaEldeenYsr commented on Aug 20, 2023

c0pp1ce commented on Aug 26, 2023

11 remaining items

ThangVuNguyenViet commented on Nov 14, 2023

c0pp1ce commented on Nov 15, 2023

General approach

Concerning your specific problem

ThangVuNguyenViet commented on Nov 16, 2023

c0pp1ce commented on Nov 16, 2023

ThangVuNguyenViet commented on Dec 4, 2023

github-actions commented on Jan 16, 2024

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions