 Hello guys in this video. We are going to see how to create the bottom navigation bar So that whenever we click on any bottom navigation bar item, it should navigate to a particular page So for that we are not using any sort of dependency. There is inbuilt classes So I have already created four pages that is favorite page home page profile page settings page So let's quickly create a new page Which will be holding all these pages and which will be holding bottom navigation bar. So let's give it name main page Let's create stateful with it main Page, I will let you know why I have created this stateful with it. So let's return this scaffold and Just add the app bar. Let's add the body Your body, let's add Center and then chart text So let's just run this and cross-check it first of all go to main and instead of showing this homepage We will be showing Main page I'll save this Okay, so that's fine now, let's go to main page back and Instead of showing the center high, we have to show the page. So just before modifying this Let's do what let's use the property of the scaffold that is bottom navigation bar and give it bottom navigation bar and Here we have some important properties. So one of them is Items that is required So here we will define the items Bottom navigation bar item and here you can specify some icon. Let's give it icon I can start. Let's give it for favorite favorite Let's give it this one and yep, and Second property is there. That is also required for this That is label The label you need to pass the string. So this would be let's say a right and Since it is const so we just market cons for the time being later on we will change it and we will Remove the const. So this is for one item So it is mandatory to add at least two items in order to work with this. So let's save this and cross-check it Okay, so you can see now there are two items over here So what I do first of all I will design all these items so let me just Change this to home and just make it to home Save this Okay, so same way I will add two more profile that is for Do we have Person icon something yep, and then the next one is for settings And that's just use Settings save this Okay, so we have added four and you can see this is not visible over here. Let's go back to three and You can see it is coming over here. I'll just Come on come at this and come back here to the bottom navigation bar. I will try to use some property that is show Unselected labels false So once something is unselected it should be false and same way. There is another property We just add one more coma. I show selected labels through Save this So you can see this is visible over there But the color we need to change because of the color of this So let's do what give it a unselected I can't or item color. Let's give it colors dot gray and Selected color item Okay, and I just make it any color of your choice. Let's give it purple save And you can see what is happening. The selected item is getting this color and rest of the items are of Gray color and unselected items are not showing any text because of this property Okay So next you can see if I tap on this nothing happens, but before that there is one more property that is current index Currently by default the index is zero. That is the favorite one if I give it to one You would be able to see the home will selected I give it to It would be profile and Same way for three. It should be settings So since these indexes will change at runtime, that's why I have taken this as a stateful widget Okay, so I will maintain this as a variable value So instead of using this static value over here, we will simply say Let's give it name bottom index and I will create this variable over here on the top Go here And you can specify whatever index you want. So I just want home by default So I just give it One because it is on second place, which is index one Okay, save this Now you can see it is selected home Now what I want I want if I tap on any of these it should be selected at least Oh that there is another property on tap So on tap will take one function with a value So this value would be whatever value you are clicking on So this value we can assign to this variable. Okay, so what we can do simply say set state and simply say Bottom index is equal to value save this Let's check it out You can see now We can select these bottom navigation bar items Now we left with Changing this design so that whenever I tap on any of these items a corresponding page should open Okay, so for that I need first of all the reference of all the pages What I do I just go here. I will create one list of you can say widgets All my pages are widgets I will say pages is equal to I will say const list Because we have all the cost pages the first page. I want favorite page Second page. I want home page Third page. I want profile page fourth page is settings page Okay, so this is done Save this Now what I need to do instead of displaying the center part. I have to use here this array so I will simply say pages and On which index so we are already keeping the index of this items So I will pass this index over here. Let's save it and you can see immediately your favorite page is coming over here and For home you are able to see this home For profile. This is a profile for settings. This is a setting But we have one problem over here, so we are able to see two app bars so what we can do just go to this main page and From this we can remove the app bar With this each page would have their separate app bar But if you want to use a common app bar Then you can add your app bar over here and you can remove it from individual page So I just do it individual so that it should not be a common. So I will delete this main page app bar. I Don't want a common. So just save it And you can see now if I go to favorite the app bar is coming for favorite home profile settings Let's take a look here We have just one extra import. Let me delete this So that is all for this video if you have any doubt do comment in the comment section Otherwise like share and subscribe. Thank you