Need a persistent/same Bottom Navigation Bar for all screens - Flutter

Question

I am a beginner with flutter and dart. I have been trying to implement a navigationBar on three different pages in my app. The toggling works well for an individual

Answer 1

If I understand your question correctly, you need the bottom navigation bar persisted on all three pages. There is a well-written article on how to achieve it. You can find the details here.

https://medium.com/coding-with-flutter/flutter-case-study-multiple-navigators-with-bottomnavigationbar-90eb6caa6dbf

https://github.com/bizz84/nested-navigation-demo-flutter

All credits go to the original author.

Answer 2

Use persistent_bottom_nav_bar.

persistent_bottom_nav_bar manage the Navigation stack of individual tabs and using this library you can manage hide/show BottomNavigationBar when we Push any screens

Answer 3

I created a small, super easy to use package that let you do that effect CustomNavigator. And wrote a tutorial about it on Medium you can find it here.

So it goes like this

// Here's the custom scaffold widget
// It takes a normal scaffold with mandatory bottom navigation bar
// and children who are your pages
CustomScaffold(
  scaffold: Scaffold(
    bottomNavigationBar: BottomNavigationBar(
      items: _items,
    ),
  ),

  // Children are the pages that will be shown by every click
  // They should placed in order such as
  // `page 0` will be presented when `item 0` in the [BottomNavigationBar] clicked.
  children: <Widget>[
    Page('0'),
    Page('1'),
    Page('2'),
  ],

  // Called when one of the [items] is tapped.
  onItemTap: (index) {},
);

The cool thing about this library that it works efficiently. It creates a nested navigator (which is very unpleasant to do) and uses it for navigation in your widget tree. And of course you can always use the default navigator from MaterialApp