Flutter nested navigators - please provide an official working example of Flutter nested navigators between various Scaffold pages and a BottomNavigationBar

[giorgio79]

Hi Flutter team,

I was researching nested navigators, but there is nowhere a working example with Scaffolds. Could we have one in addition to the snippet posted here?

https://api.flutter.dev/flutter/widgets/Navigator-class.html#nesting-navigators

I am seeing this question all over the place:

• https://stackoverflow.com/questions/60515525/bottom-navigation-bar-with-sub-navigators-for-each-tab
• https://stackoverflow.com/questions/48098085/nesting-routes-with-flutter
• https://stackoverflow.com/questions/55716230/how-to-do-nested-navigation-in-flutter
• https://stackoverflow.com/questions/55213680/in-a-nested-navigator-structure-of-flutter-how-do-you-get-the-a-specific-naviga
• https://stackoverflow.com/questions/56890424/use-nested-navigator-with-willpopscope-in-flutter

Even this attempt has lots of issues filed: https://github.com/bizz84/nested-navigation-demo-flutter

Steps to Reproduce

1. ...
2. ...
3. ...

Logs

[HansMuller]

This issue has indeed come up frequently, for example: #18740 (comment).

CC @goderbauer

[giorgio79]

Thanks for the link @HansMuller , I read the whole thing, and It sounds like all one has to do is switch to the CupertinoTabBar to have nested navigators working fully. I dont really care what it is called (Cupertino, Material or whatever) as long as it works on all platforms. I am reading up on the Flutter CupertinoTabBar now :) I am noticing the official docs are being worked on too with Navigator 2.0 https://flutter.dev/docs/development/ui/navigation I was hoping though I dont have to research this stuff for days with many outdated paths. :)

[giorgio79]

Ouch https://codelabs.developers.google.com/codelabs/flutter-cupertino/#0
"Why write a Cupertino app? The Material design language was created for any platform, not just Android. When you write a Material app in Flutter, it has the Material look and feel on all devices, even iOS. If you want your app to look like a standard iOS-styled app, then you would use the Cupertino library.
You can technically run a Cupertino app on either Android or iOS, but (due to licensing issues) Cupertino won't have the correct fonts on Android. For this reason, use an iOS-specific device when writing a Cupertino app."

Will try anyway. Wonder what "Cupertino won't have the correct fonts on Android" means though.

[giorgio79]

Ok, looks like I found finally sg that looks promising! The Navigator class is pretty cool. Hail Mr Pepe :P https://medium.com/@Mr_Pepe/nested-navigation-with-a-bottom-navigation-bar-using-flutter-d3c5086fbcdc Although I see a comment that says Hero does not work here. I guess we cannot have everything,

The official latest nested navigator does not seem to work like this for me
https://gist.github.com/johnpryan/bbca91e23bbb4d39247fa922533be7c9

[giorgio79]

Just tested the "official" example at https://api.flutter.dev/flutter/widgets/Navigator-class.html
It is not functional after a copy and paste...
The Homepage does not do anything

Guys, any QA or peer review is happening on these API docs? A navigator example without tabbed navigation? Lol

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return DefaultTextStyle(
      style: Theme.of(context).textTheme.headline4,
      child: Container(
        color: Colors.white,
        alignment: Alignment.center,
        child: Text('Home Page'),
      ),
    );
  }
}

[ducpt2]

+1 for the official real world example, i came from React Native dev and it cost me several days and still can not sastify with flutter navigator. There is something i want to create in my project:

Root Stack Navigator >> Switch Navigator (login flow) >> Bottom Tab Navigator >> Stack Navigator (1 tab is 1 stack navigator).

And i just want every screen in my project can easy navigate to another screen (or tab, or open drawer...) like Navigator.pushNamed('/detail') , i don't want to create my route when i push it up.
I saw someone make it with Provider in root, but i don't think it is good idea.
If someone can make the sample it will be great. Thanks.

[giorgio79]

Found a working official example it seems
Nav 2 is coming as per https://flutter.dev/docs/development/ui/navigation
https://medium.com/flutter/learning-flutters-new-navigation-and-routing-system-7c9068155ade

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