Flutter: How to make Flutter Side Drawer (Side Menu) work with Bottom Navigation Bar (Bottom Tab Bar)

There are a lot of tutorials and articles available for Flutter Drawer and Bottom Navigation Bar, but nothing shows a correct way to create an app that can open the same page from Drawer and Bottom Navigation Bar without losing each other.

Few will get confused “ why we should call the same page from the drawer and from the bottom navigation ?”. There are so many reasons and the “client requirements” or “UI requirements” can be the main reasons.

Please kindly note that this article assumes that you have basic knowledge of flutter, side drawers, and navigation bars. In case you are not familiar, you can refer to Flutter Docs, Side Drawer, and Bottom Navigation.

So let’s get started.

First, create your flutter app and, delete all the unwanted codes, and change your main.dart file as following.

Then, create a folder named as screens under libs/ and create a dart file and named it as home.dart and modify it as below.

This will show a simple page with a centered text called as “Home page”

And then create search.dart and profile.dart files in the same folder libs/screens and modify them as same as the above home.dart file.

And then create a folder under libs/ and named it as tabs. Then create bottom_tabs.dart file under libs/tabs and modify it as the following.

Here. The class TabNavigationItem has three constructor parameters and those will include the page which should redirect when the tab item tapped, the title, and the icon of the tab item. And the List<TabNavigationItem> is included with TabNavigationItems.

Then create tabspage.dart file under libs/tabs folder and modify it as below.

Here, as mentioned in the _TabsPageState, when a user taps on a tab item, the index of the tab item will be assigned as the _selectedIndex and according to that _selectedIndex, Bottom Navigation Bar will load the page body.

And then create a folder under libs/ and named it as sidemenu and then create a file called sidemenu.dart under libs/sidemenu. Then modify it as below.

Here, before you add an image to DrawerHeader make sure that you have included it in your pubspec.yml

sidemenu.dart file will create your side menu in the app and UI can be changed as you like. On tap on List Tile, it will be navigated to the tabs page with the selectedIndex parameter value.

As mentioned in the TabsPage it will redirect to the page according to the passed selectedIndex value and bottom navigation will be worked at the same time with the side drawer navigation!!.

Before it happens, we will need to do change our home.dart as below again and as well as same to the search.dart and profile.dart .

As mentioned in the sidemenu.dart and tabspage.dart files, if the selectedIndex is 0, it will navigate to the Home page, if it’s 1 it will navigate to Search page and if it’s 2 it will navigate to the profile page.

That’s All!!!

you can find the Github project via:

https://github.com/prabhashibuddhima/tabsdrawer

Thanks for reading this article! if you have any questions, feel free to comment down.

Cheers!!