Example showing how to use go_router to build persistent nested navigation (i.e. separate nested navigation trees) with a BottomNavigationBar.

nested_navigation_shell_route.dart

// This temporary implementation is now obsolete, see instead: 
// https://pub.dev/documentation/go_router/latest/go_router/StatefulShellRoute-class.html

Weird... so that must mean that despite the root Navigator being offstage, it's internal Overlay is still accessible? INTERESTING!

No, the root navigator is never offstage, only the sibling navigators in the IndexStack used for the bottom navigation. That is, at any point in time, there will only be one nested navigator “onstage”, and the parent (root) navigator will remain onstage at all times.

Ok, this line threw me off: https://gist.github.com/tolo/f7e6c30cad3ac76085d75255ba509f10#file-nested_navigation_shell_route-dart-L126

Ok, this line threw me off: https://gist.github.com/tolo/f7e6c30cad3ac76085d75255ba509f10#file-nested_navigation_shell_route-dart-L126

Right, yeah, that's the ugly bit with this workaround, which you won't get with flutter/packages#2650. But that Navigator is anyway the one created by ShellRoute, not the root one. So it's just hiding an obsolete Navigator.

Offstage widget cause main screen build twice.

Offstage widget cause main screen build twice.

It's amazing just i have 1 issue.
just burn a few hours till I found it. when the keyboard gets visible offstage gets called and then rebuild the all page, again and again, so it's impossible to use it with text field on android, on desktop it fine but still rebuilds many times

Excellent fix @tolo !

One small addition. If you are having trouble with hero animations, I'm fairly certain you can add a HeroController() observer to your nested Navigator. From what I can tell from the docs, MaterialApp usually adds this automatically.

 final heroController = HeroController();

  Widget buildNavigator(BuildContext context) {
    if (pages.isNotEmpty) {
      return Navigator(
        observers: [heroController],
        key: navigatorKey,
        pages: pages,
        onPopPage: _handlePopPage,
      );
    } else {
      return const SizedBox.shrink();
    }
  }

@davidhicks980, actually support for navigation observers (and hero controllers) is being implemented in the PR flutter/packages#2664. Hoping that will be finished soon so flutter/packages#2650 can benefit from it.

My main focus right not is to complete flutter/packages#2650 so it can be merged into go_router. @amerblackbird and @hmbenhaim, please have a look at that branch and the corresponding sample (stateful_shell_route.dart) there, and see if that works better. If not, please add a comment in flutter/packages#2650.

@amerblackbird and @hmbenhaim, please have a look at that branch and the corresponding sample (stateful_shell_route.dart) there, and see if that works better. If not, please add a comment in flutter/packages#2650.

Hi @tolo I have tried this branch and this sample it works amazing so simple and so good and perform very well. I hadn't any issues with it so far I cloned this branch and I'm using it directly once it merge I'll use the library again. Waiting for the merge. Thank you!

Happy to hear @hmbenhaim! 😊

Mate, you are a legend! Thanks a lot! 🍻

Mate, you are a legend! Thanks a lot! 🍻

🙏😊🍻

Here are my 2 cents until the PR adding support for this use case it's merged. If you updated to go_router 6.0.7+ this was introduced:

Use HeroControllerScope for nested Navigator that fixes Hero Widgets not animating in Nested Navigator.

So the above gist won't work until a small change it's made to work with 6.0.7 versions and above.
On the ScaffoldWithNavBar widget inside the BottomTabBarShellRoute the currentNavigator prop can't be casted to Navigator directly because the builder method will not return now a Navigatorbut instead a HeroControllerScope.

So in line 128 this change should be done to make the gist work:

ScaffoldWithNavBar(tabs: tabs, key: scaffoldKey,
  currentNavigator: (fauxNav as HeroControllerScope).child as Navigator,
  currentRouterState: state, routes: routes),
]);

why in StatefulWidget i call @OverRide
void initState() {
super.initState();
print("-----RUN------ ")}

• At tab:: firstly -----RUN------ call double, but since the 2nd time onwards it only calls 1 time. Please help me :(

Here are my 2 cents until the PR adding support for this use case it's merged. If you updated to go_router 6.0.7+ this was introduced:

Use HeroControllerScope for nested Navigator that fixes Hero Widgets not animating in Nested Navigator.

So the above gist won't work until a small change it's made to work with 6.0.7 versions and above. On the ScaffoldWithNavBar widget inside the BottomTabBarShellRoute the currentNavigator prop can't be casted to Navigator directly because the builder method will not return now a Navigatorbut instead a HeroControllerScope.

So in line 128 this change should be done to make the gist work:

ScaffoldWithNavBar(tabs: tabs, key: scaffoldKey,
  currentNavigator: (fauxNav as HeroControllerScope).child as Navigator,
  currentRouterState: state, routes: routes),
]);

type '_CustomNavigator' is not a subtype of type 'HeroControllerScope' in type cast