Bottom Navigation Bar - Flutter Widgets Tutorial

what's up guys welcome back to my channel today I'm going to be going over how to create a bottom navigation bar in flutter so the first thing that I'm going to do is set up a new flutter project alright guys so as you can see here's my freshly created flutter project and on the left here I have my iOS emulator with the default starter code so the first thing that I'm going to do is get rid of all of this okay so right now I'm going to just create a simple stateless widget for the main dart file so I'm simply going to do clasp my app this will extend the stateless widget and then inside of here we will do our override and we will create our build widget with widget build we'll pass in our build context context just like that and then here we will simply return a material app and then inside here we can pass in everything we need to so so I'm going to pass in the title as bottom navigation bar and then I'm going to say home is equal to text this will be a text widget with the text home just like that and my emulator stopped running so we'll need to restart that before we do that let me add my main function so void main and whoops wrap and we'll pass in my app just like that okay so let's run this again okay so as you can see everything is working we have main dart and this is the code we have so far it is a simple class my app which extends stateless widget we have the build we have the material app being returned and so far all we have is a title and home which is just text home and the reason that this looks like this is because we are not returning any scaffold widgets so we just have the material app that's fine for now so what I want to do is follow best practices in this tutorial so I'm not going to add the navbar to the main dart file what I'm going to do is say home and point that to nav and this nav will be its own file so let's go in here and create a new folder or a new file so we'll call this nav dart now inside of here we are going to have our nav class which will be a stateful widget and this will be our bottom navigation bar so what I'm going to do is type in St a whoops st and if in BS code it gives me this pop up here flutter stateful widget so if I hit tab it will create this for me and I'm going to name this nav just like that now I need to be sure to import my material dart package so we'll say import package : flutter slash material dart just like that and everything is now working so back in the main dart we still have an error here because we need to import this so we'll say import package cold and then our project name so bottom navbar slash Nath dart and now we do not have an error here so what we want to do is we want to return a scaffold widget instead of a container and now we have our nice white background we can give it an app bar so we'll say app bar and we'll just say V title is equal to a text widget which will be bottom nav bar just like that and then we can say body for now will be equal to text and we'll just say home so that's fine for now so now if we look like what we have we have our simple main dart file which points to our home being this nav class I mean nav class is a class which extends stateful widget we have our create state here in our nav state class here which is returning a scaffold which has our app bar and our body which at the moment is just a text widget that prints home ok so now we can start looking at how we can add a bottom navigation bar so first let's add the widget for that so we're gonna do it go below body and we are going to say bottom navigation bar just like that and there is a widget for this bottom navigation bar and as you can see it takes in a couple of properties so the first one is items so for items this will be a constant so Const will say bottom navigation bar item just like that and this will be a list so put our brackets just like that and now inside of here side of this list is where we will add all of our items so we add them as a bottom navigation bar item widgets so bottom navigation bar item just like that and then side up here we have four different things so we have icon active icon background color and title so we really only need two of them icon so we'll say icons oops icon and then we'll say icons dot home and then we also need the title so we will give it a title of home but that needs to be wrapped in a text widget okay just like that so we'll format this up and this is what we have so far so if we go over here it's giving us an error and that's because items dot length needs to be greater or equal to two so we need to have at least two items in our navigation bar which makes sense because if you had zero or one items why would you need a navigation bar so right now we just have one item which is this home so what I'm going to do is copy this I'm gonna paste it two times so we'll say one and two now there we go now we have three items in our navigation bar so let me replace this home will say messages and we'll say profile and then we can replace the icons as well we'll make you a person and for the messages we can make that a message icon okay so now this looks a lot better with home messages and profile but it still does not work so we need to implement the logic behind this navigation bar so for that we're going to come back up to the top here and write in this class nav state extend state nav this is where we are going to add our logic so first off we to add an integer and we're going to call this selected index and we're gonna set that equal to zero and basically what this is is the selected index of our navigation bar so you'll notice like I said this is a list so this is index 0 this is index 1 and this is indexed to correspondent with these so whichever index is selected we're gonna want to display that corresponding item on the screen right so this selected index variable will hold that will default it to 0 and then next we need a list of options to display on screen so we can say list they will be of type of widget we can name it which it options this will be equal to a widget list just like that and inside of here we pass in the corresponding page for each of these so when home is selected the first index here index 0 will be displayed when home is selected so for that we'll say text home oops home and then we can do the same for messages and profile so we'll just change this messages and profile so basically eventually when you hit home will display text home we hit messages will display text messages and when he hit profile we will display text profile okay so that's the first step now we need to add a function that will do this for us so below here we can say void so this function will return nothing will name this on item tap and then we're going to pass in the index of the item that's tapped and then when we have that index we want to set the state and we want to set this index as tapped to this watchit index so we can do that by saying selected index it's equal to index just like that okay so that's the second step so now whenever we tap one of these we want to call this function so let's go down here and right after the items still inside our bottom navigation bar widget it takes in some additional properties for this index so it takes in one property called current index and we'll set this to the selected index so just like that and then that won't do anything yet because we need to pass in the on tap property and on the top we want to call be on item tab function but we don't want to pass in that we just we don't want any parentheses because we don't want to call it indefinitely we want to call it when they tap so to do that we just pass in the name like that and then that right there is all we need to add for this to work but if we go test it out as you see we are now able to tap but the this icon here this text home is not changing and that's because our home where is it our our body text right here is set to home so what we need to do instead is get rid of this and we will say the body is first let's wrap it in a central widget just like that so now it will be centered in the middle but we will say the child instead of just home text we'll say it's equal to widget options dot element at we can pass in these selected index just like that so now whichever index is selected the element displayed here is whichever index is here so for example home is selected which is index 0 this is element 0 in our widget options so this will be displayed and then if we hit messages now we see messages it is displayed same for profile so this is the basics the bare minimum you can do for the bottom navigation bar well what if you don't want to display just text what if you want to display a bunch more well you can't really I mean I guess you could wrap a container and with columns and rows and all your we're just in here that would be really big and it would get way too much to handle so we're gonna do something similar to what we did here by saying home is equal to this nav class so we can do is instead of passing a text widget for this widget options we can pass in a class so I'm gonna pass in home and we haven't created this yet so let's do that now we'll go up here and we will create a new file and we can name this home screen dot dart now here is where we can add a home screen so first we're going to import our material dart package so that's from flutter slash material dart and then here we can just say class home whoops and that will extend stateless widget because we're going to want to keep this as minimal as possible as well well override that just like this our build whit pasen the context and we will return Center and here you can put whatever you want so for example we could put the text home just like this be sure to say child just like that and then back here you need to import this home screen so we're gonna do that the same way that we did this some sent copy that paste that here and then instead of navbar this is home screen dot dirt just like that and now there's no error and it is the exact same because we are still sending this to text home so let's change this up a little bit so we can see that this is indeed coming from this screen instead of the child being a text widget let's say the child is a column widget and we'll pass in children as widgets just like so and then in here I'm going do you say icon icons dot AC unit and then we'll do another icon will say icons dot and then we'll go one down just like that format that up and now when this refreshes we should see just like that our two icons here so this is successfully pointing to this home class which is rendering this on the screen and we can Center those as well because we're using a column you can use the main axis alignment property and set that to main axis alignment Center which will Center them on the screen so that's how you can go about building your bottom navigation bar just to recap what we did we have our basic main dart file we have point home to this nav and this nav class is a stateful widget which has our bar navigation bar in it so we have our widgets here which is what the user sees we then have our widget options list and then each time we tap a widget we are changing the selected index to the index in this list and this is what we are displaying to the user and we are you we are using properties on the bottom navigation bar to specify that and then we took it one step further instead of displaying text we displayed a home class which is this stateless widget right here okay so I hope you guys enjoyed this video and learn something from it if you did be sure to subscribe to my channel and give this video a like and stay tuned for more videos like this [Music]

Channel: Benjamin Carlson

Views: 31,557

Keywords: flutter, app development, bottom navigation bar, flutter widgets, flutter bottom navigation, mobile app development

Id: WG4y47qGPX4

Length: 18min 42sec (1122 seconds)

Published: Sat Jun 27 2020