Flutter Bottom Navigation Bar Tutorial | BottomNavigationBar Widget Guide

in today's video I'm going to be showing you guys how to work with bottom navigation bar within application we'll have a bottom navigation bar through which we'll be able to select which page we want to view and by clicking on each of these buttons we'll be able to go through our homepage profile page and setting page so by the end of this tutorial you'll have a better understanding of how to work with the bottom navigation bar within fter as a site know links to all of the resources that I use within this video as well as a link to the source code can be found in the description below so feel free to take a look at it if you're confused at any point in terms of the setup of my project I just have a material appb under which I have set the home property to be a main page widget which the main page widget is basically an empty stateful widget which returns a scaffold for its build function so we're going to be implementing everything from scratch so to get started the first thing that we're going to be doing is taking a look at how our bottom navigation bar is going to work and the way it's going to work is that our scaffold is going to have a property called bottom navigation bar which we can set to a new instance of a bottom navigation bar once this is done our bottom navigation bar basically requires us to define a bunch of parameter for it the first is going to be items and this basically refers to the items that are going to be shown on the bottom navigation bar as the actual buttons that we can click on to switch between pages so in my case what I'm going to be doing is adding to this items list a bottom navigation bar item and I'm going to set the icon for that to be icon and then icons. home like so but if I just do this we're going to be getting an error within our application and I'll do this to show you this to you guys which is that our application gives us an error saying that the items length needs to be greater than or equal to two so what I'll do is that I'll stop debugging my application and then for my items list I'll copy the same bottom navigation power item and I'll copy it again within our items list and the next thing I'm going to do is set a enable for my bottom navigation power item so the label in this case is going to be home like so and then for the other one it's going to be profile so I'll copy this come to this second one paste it here say that this label is going to be profile and then the icon here is going to be person like so and do command save once this is done I'll also Mark the list as a const and that's pretty much all we have to do so with this done I'll start debugging my application again and hopefully we shouldn't get any errors this time while the application is rebuilding itself the second thing that I'm going to be doing is just copying this bottom navigation bar item again and pasting it one more time and this time I'm going to be setting the label to be settings and then the icon here to be icons. settings like so and do command save so now we have our bottom navigation bar showing it's showing us three different items and we can see them but if I click on each of them nothing happens so now what I want to do is implement the logic of actually determining what we should do when the actual buttons get clicked so to do this the first thing that I'm going to be doing is coming to my main page State and here I am going to be creating an actual integer which I'm going to call current page and to start off I'll set this to be zero so this variable is going to be used to keep a track of the current button that we've pressed so each of these buttons within a bottom navigation bar items list has a index that corresponds to it the first item has the index zero so when this button is clicked then our current page active is going to be zero for the second item it'll be one because dot has zero based arrays and then for the third one it will be two so how can I get updated every time that one of these navigation bar items get clicked and what the actual index of that navigation bar item is well an easy way to do this is from the bottom navigation bar we have a function called on Tab which returns a value to us and this is the index of the actual bottom navigation bar item that gets clicked on and here what I can do is call set State and then I can set the current page equal to the value that gets given to us and do command save so now with this done we are going to be tracking this information but still our actual Bottom bar is not changing it's not updating when we click on the button to highlight what the active button is to update that what we are going to be doing is that we're going to be setting the actual property on bottom navigation bar which is going to be called current index and the current index is going to be our current page so if I do this now now you can see that when we click on our settings page if that's the page that is active then that's the button that is active when I click on profile it changes it to that and then if when I click on home it does that so now that this is done and our bottom navigation bar is working properly what I want to do is use this system to basically determine what is actually being shown as the body of our scaffold and this is basically the defao use case for a bottom navigation bar which allows us to basically navigate through different pages of our screen using a pom navigation bar at the bottom of our app so to do this the first thing that I'm going to be doing is that I'm going to basically create a new file under my pages and I'm going to call this homepage do dot once this is done I'm basically going to go ahead and copy and and paste the code in for this class since it's a very simple stateless widget which returns a container and the color for that container is green and then the text is home and do command save so once this is done the next thing that I'm going to do is copy all of this and since we have three items within our items list we need to have the corresponding three pages to go for to go with each of these bottom navigation bar items so to do that under pages I will create now a new page and I will call this profile page. Dart and then I'm going to create another one which I'm going to do new file settings unor page do dot then for the settings page I'll paste in the same code but this time I am going to rename this to be settings page like so and I'm going to change the color to be red and then the text here to be settings like so and do command save and then I will now come to my profile page I'll paste in the same code I will rename the symbol to be profile page now so the name of this class and then I will change the color here to be blue and then I will change the text here to be profile and do command save once this is done I will come back to my mainor page. Dart file and and for the main page State class I'm going to create a list here which is going to be a list of widgets I'm going to call these pages and I'm going to be setting this equal to a list which is going to contain an instance of each of these pages so since my first item within my item list here for my bottom navigation bar is the home bottom navigation bar item then the first item within this Pages list is going to be the homepage then I'm going to add profile page and then finally after this I am going to add settings page like so and that's pretty much it for my profile page I'm getting an error and the reason for that is because we didn't change the class name here so I'll do profile page like so command save come back and now hopefully I should be able to import the profile page and that's pretty much it so now that my lift is defined I am also going to mark this as a final since the contents within this are not going to change I'm going to add the cons modifier to each of these classes since they are stateless and then once this is done I am going to restart my application and make sure that there are no errors so our bottom navigation bar is now set up proper L and every time we click on one of these buttons it updates the index for the current active button and it stores that information in our current page so now what I can do is that for my scaffold I can set the body attribute to to be the pages list and then whatever the current active page is and command save so as soon as I do that you're going to see that now since the active index was for the homepage then we're seeing the homepage when I click on profile it updates that to profile when I click on settings it is updates that to setting and that's how this goes and that's pretty much it for today's tutorial if you had any question comments or concerns feel free to leave them down in the comments below and I'll try my best to answer them for you and as always stay happy stay healthy keep learning keep growing and I'll see you guys in the next video bye-bye

Channel: Hussain Mustafa

Views: 1,488

Keywords: flutter bottom navigation bar, flutter tutorial, flutter, Flutter, flutter bottom nav bar, bottom navigation bar flutter, flutter bottomnavigationbar, flutter mapp, every flutter widgets, all flutter widgets, flutter widgets, tutorial, Flutter Bottom Navigation Bar Tutorial, Flutter Bottom Navigation Bar, Flutter Tutorial, Flutter Tutorial For Beginners, Official bottom navigation bar guide, Bottom Navigation Bar tutorial, mobile app development, ios, android, koko

Id: xN5GhJ7QJjc

Length: 8min 12sec (492 seconds)

Published: Wed Dec 27 2023