‍

Most of the Apps you use nowadays have BottomNavigationBar. Instagram, Twitter, and even the Medium App. The BottomNavigationBar in flutter is a part of the scaffold Widget.

Let's start:-

‍

Step 1:- Delete all the default code generated by flutter!

‍

Step 2:- Create 3 new files. HomePage, SearchPage, SettingsPage

‍

Step 2:- In all the 3 created Files add stateless widgets with a simple appbar and a body inside the scaffold!

‍

Step 3:- Go to the main.dart file, and create StatefulWidget, name it as MyApp. Inside the MyApp widget create a Variable as

int _CurrentIndex = 0;

‍

Then create a new method name onTapped with a int variable named index

void OnTapped(int index) { setState(() { _CurrentIndex = index; }); }

After that create a new List of screens.

List Screens = [  HomePage(),  SearchPage(),  SettingsPage(),];

then create a scaffold with a body and BottomNavigationBar. But BottomNavigationBar as a seperate widget. Like this 👇

‍

‍

After this import all the files that you created in main.dart. Over all your main.dart should look like this

And all the 3 files that you created initilly should look like this!

‍

‍

You can access all the code here in this GitHub repository👇

https://github.com/Rishikesh-278/BottomNavigationBar/tree/master/bottomnavigationbar/lib

Thanks for reading. If you like my article you can support me through buymeacoffee

‍