BOTTOM NAV BAR • Flutter Widget of the Day #09

[Music] hey what up guys welcome back to another quick flutter tutorial the widget of the day is the bottom navigation bar which is the little menu that you see at the bottom of all of your apps so this is a must know if you are a app developer so let me show you how to use this by jumping into the code now just to keep everyone on the same page i've just got a main function that has my app and we are pointing to this home page which is a stateful widget and i've just got a blank scaffold so just some basic setting up and in the body let's just start by giving it a text widget in the middle and let's quickly make this font size big aster that we all can see now in the scaffold if you look at some of the options the bottom navigation bar is the one we're going to do so let's fill it out now inside the bottom navigation bar you're going to need to specify the items so these are the different menus that you can have at the bottom of your screen so you can see here if i hover over this it's requiring a list of bottom navigation bar items so let's fill out this icon the first one let's just give it an icon of home and i'm just going to save this so that i can show you what the errors mean because i think that's pretty helpful so you can see here it failed because the item's length is meant to be greater or equal to two so we need at least two of these items so i'm just going to copy in and create a total of three which gives us one more error it says item label should not be null so we have to give it a label which is just some string let's say home and for now just to get this to work let's just copy the same item three times and sweet so there is our bottom navigation bar and currently we can't really click around let's change these icons so the second one let's say it's a message icon third one can be an account page now one thing that i should note is if you have i think more than three of these items then something happens where the navigation bar sort of disappears i think the color changed or something so i don't know if this is a bug or not but a way around this is to specify this type i think if you have more than three like the type changes so we want to just specify this to be fixed and there it is again so let's make all of these buttons unique awesome so now that we have it set up we want this to be functional so if you look under the bottom navigation bar you should be able to see a current index property so for this one it's just an integer so if i say zero that's going to be the very first one which is home if i say it's one you can see that now the message tab is highlighted and if i say two then the settings one is highlighted and so on so this is how we're going to navigate around so obviously this is not going to be a fixed number so let's create a separate integer called selected index and we will initialize it to b0 at the beginning cool so what that means is we want to just be able to change this selected index to navigate around so if you look under the options you can see an untapped function and let's create our own method so let's call it navigate bottom bar and create this method up top now when we navigate we're going to need to know the index that the user is tapping so that's why i have the integer index in there so if the user does tap on it then let's set the state and change our selected index to the index that the user has tapped so let's give this a go hopefully we're able to click around and yes that works now cool now the final bit that we need to do is we need to change the text in the middle so right now it's just saying hello let's show different pages depending on which bottom navigation bar item we selected so i'm going to create a list of widgets and let's call it pages and so in the pages i'm just going to copy in what we had earlier so if i just comment this body out for a second i have four pages they all say hello so let's just change these up first one can say home page second one can say message page settings page and account page so in this list in the body we want to give it the page but at the selected index yeah we can now click around and display different pages so on a very basic level that's how you use a bottom navigation bar but just before we finish i do want to show you some good coding practices like usual if you want to build your app from this point onwards what i would recommend is to create a folder and let's call it pages so that you have different files representing each page to keep your code nice and organized so in your pages folder let's create four different files call it home.message.settings.dart and account dot dot so these are your different pages so if we go to the first one so home dot dot let's make sure to import our material.dart file and create a stateless widget which we will call user home and if we come back to our pages let's just copy the first guy and paste him in here so again this is just a basic text widget saying home page now what this does is it encapsulate the code so now if i come back to my list of pages i can just say user home so make sure that the file that we just created is imported at the top and let's copy the user home and do the exact same thing for the other pages so let's change it to user message message page user settings settings page and user account account page so this will make your code much more cleaner and usable so if we come back to our list of pages we've got the user home now we can now put in the user message user settings and user account and if you want to change anything then you can go to the individual files to make changes to the different pages so hopefully that was helpful let me know below if you have any questions i'll come around and help you out but other than that that's how you use a navigation bar which is a must-have for every app developer so thanks for watching and i'll catch you guys in the next one later [Music]

Channel: Mitch Koko

Views: 40,161

Keywords:

Id: qk-a_Qgc6b0

Length: 6min 4sec (364 seconds)

Published: Wed Oct 13 2021