How to persist BottomNavigationBar when using Flutter navigation and routes

I have added an answer to the post that you linked: https://stackoverflow.com/a/59133502/6064621

The answer below is similar to the one above, but I've also added unknown routes here:

What you want can be achieved by using a custom Navigator.

The Flutter team did a video on this, and the article they followed is here: https://medium.com/flutter/getting-to-the-bottom-of-navigation-in-flutter-b3e440b9386

Basically, you will need to wrap the body of your Scaffold in a custom Navigator:

class _MainScreenState extends State<MainScreen> {  final _navigatorKey = GlobalKey<NavigatorState>();  // ...  @override  Widget build(BuildContext context) {    return Scaffold(      body: Navigator(        key: _navigatorKey,        initialRoute: '/',        onGenerateRoute: (RouteSettings settings) {          WidgetBuilder builder;          // Manage your route names here          switch (settings.name) {            case '/':              builder = (BuildContext context) => HomePage();              break;            case '/page1':              builder = (BuildContext context) => Page1();              break;            case '/page2':              builder = (BuildContext context) => Page2();              break;            default:              throw Exception('Invalid route: ${settings.name}');          }          // You can also return a PageRouteBuilder and          // define custom transitions between pages          return MaterialPageRoute(            builder: builder,            settings: settings,          );        },      ),      bottomNavigationBar: _yourBottomNavigationBar,    );  }}

Within your bottom navigation bar, to navigate to a new screen in the new custom Navigator, you just have to call this:

_navigatorKey.currentState.pushNamed('/yourRouteName');

If you don't used named routes, then here is what you should do for your custom Navigator, and for navigating to new screens:

// Replace the above onGenerateRoute function with this oneonGenerateRoute: (RouteSettings settings) {  return MaterialPageRoute(    builder: (BuildContext context) => YourHomePage(),    settings: settings,  );},

_navigatorKey.currentState.push(MaterialPageRoute(  builder: (BuildContext context) => YourNextPage(),));

To let Navigator.pop take you to the previous view, you will need to wrap the custom Navigator with a WillPopScope:

@overrideWidget build(BuildContext context) {  return Scaffold(    body: WillPopScope(      onWillPop: () async {        if (_navigatorKey.currentState.canPop()) {          _navigatorKey.currentState.pop();          return false;        }        return true;      },      child: Navigator(        // ...      ),    ),    bottomNavigationBar: _yourBottomNavigationBar,  );}

And that should be it! No need to manually handle pop too much or manage a custom history list.

wrap your body inside the IndexedStack widget. Like this:

body: IndexedStack(      index: selectedIndex,      children: _children, //define a  widget children list    ),

Here's a link https://medium.com/flutter/getting-to-the-bottom-of-navigation-in-flutter-b3e440b9386

Have you tried this?

    return Scaffold(      backgroundColor: Colors.white,      appBar: EmptyAppBar(),      body: _displayedPage[_selectedIndex],      bottomNavigationBar: _createBottomNavigationbar,    );

Then you make a widget list of all the Screens you want:

List<Widget> _displayedPage = [LatestReadingPage(), HomeScreen(), ExampleScreen()];