Bottom Navigation Bar | Flutter Step by Step Tutorial with Example

today you will learn how to create a bottom navigation bar in flutter go to the scaffold and right bottom navigation bar bottom navigation bar arguments will take the bottom navigation bar widget which takes items as an argument type two square brackets and it will create a list inside the list we will pass bottom navigation bar item widget which actually looks like a button that we press inside the bottom navigation bar let's pass an icon and title if you following with me you press the command save you will get this error actually they are just asking us to pass at least two or more bottom navigation bar items so let's create two more bottom navigation bar item now restart the app the error will be gone now look at the bottom navigation bar you are looking at two types of icons one is selected and the other two are the unselected items remember that selected and unselected actually when we tap on an icon it becomes selected and other will be unselected we count from left to right from 0 to onward when we talk about index of the items so 0 1 2 these are the three items now you tell me which index is selected it's zero let's select the index one for that we pass the current index argument value of bottom navigation bar one now our second item is selected change it to the two and our third index is selected we want to dynamically change this current index when we tap on the button for that purpose we use ontap property of the bottom navigation bar widget where we can receive the index of the items that user tapping okay now it's time to convert the stateless widget into a stateful widget and create the state variable myindex let's assign the ontap index variable to myvariable and wrap it with the set state method so we rebuild the ui when button pressed now we have tapped the index position inside the state variable my index and it's time to assign this my index to the current index now when we tap on the navigation bar button the button will get selected at this point i just want to tell you that you can change the bottom navigation bar type from fixed to shifting suddenly you will see a wide bottom navigation bar let's go to the bottom navigation bar items and pass two different colors to the background colors of these items now when we tap on these icons its style is going to be change lets change the type to the fixed change background color of the bottom navigation bar to the indigo you can pass the false value to the selected label and unselected label to hide the label in the bar but don't remove the label strings because it will cause problem you can change the icon size colors and other properties here let's change the scaffold content by using the my index variable we want to show the three different ui elements when we press the three different buttons for that purpose we create a list of three different text widgets we use scaffold body to show the content inside the body here we type center and inside the center we make a text widget with hello let's show our three text widget on the screen when we press the navigation button for that purpose we use our widgets list and my index state variable to change the value of the ui let's save this and preview the ui now our navigation bar working perfectly now what if we want to show the scaffold screen when we tap on the button so here i just have created these three screens replace the text with these screens test the app everything working fine we can remove the double tap bars by just commenting the main app bar right now each screen state get destroyed when we switch the solution is simple go to the main scaffold body and use index tag widget which take widget list as children and my index as index now if i change the state of my scaffold screen and switch the screen the state remains same thanks for watching

Channel: Hussain Humdani

Views: 23,560

Keywords: tutorial, Flutter Bottom Navigation Bar Tutorial, Flutter Bottom Navigation Bar, Flutter Tutorial, Flutter Tutorial For Beginners, Official bottom navigation bar guid, Bottom Navigation Bar tutorial

Id: 2UG4rdsCZKU

Length: 4min 24sec (264 seconds)

Published: Sat Mar 19 2022