Flutter BottomNavigationBar with multiple navigators

Daniyar Gilimov
2 min readJun 22, 2019

The problem occured when i wanted to implement Navigation Bar with sub Pages in my Flutter project (My first project in Flutter).

It should look like as this design below:

As you see, MainTab has items {Математика, Английский язык…}, which onclick should open DetailPage with the same bottomNavigationBar.

Our first aim: to implement Sticked bottomNavigationBar.

In this case, we should just wrap our Scaffold in MainTab into Navigator as below

After wrapping our Scaffold in MainTab, all SubPages will have bottomNavigationBar, in our case PersonPage, which opens after onclick List in DetailPage, also will have bottomNavigationBar.

However in some cases, in SubPage we don’t need bottomNavigationBar. In our case, MainTab and DetailPage have floatingActionButton, which onclick should open MakeRequestPage, now without bottomNavigationBar

Our second aim: to implement NOT Sticked bottomNavigationBar.

In this case, we need BuildContext of a Rootpage (Where we have bottomNavigationBar), so when routing to subpage we should do like this:

and in a RootPage we should pass BuildContext as a parametr to our Tabs and SubPages

To make back button work, use WillPopScope() link.

It’s better to pass rootPage’s buildContext to SubPages via inheritedWidget.

Articles that helped me:

--

--