Flutter Bottom Navigation Bar Explained Step by Step

while this page has this bottom navigation part so we'll focus on building this bottom negation part and after building that we'll build this page anyway so bottom navigation bar should include this one four items so these four items they should have their related routes or four pages so once you click on them it will take you each of the page okay all right so to build this button navigation bar first we need this list of routes or list of pages okay so that's what we need well now to do that first we'll go ahead and create a new file but now this new file i'll put it in a new folder so here uh within this pages file i'll create a new folder and over here i'll call it nav say nav pages okay now within map pages first i'll build a file dart file i'll call it main page okay main page dot dart all right so what is this this one would do well actually this main page.dart file it would hold everything in this screen as you can see so it would also it also means that it would hold this four items on the bottom navigation bar okay so this page would hold everything and once you click on each of the item it will take us to a new page based on the click from this page will go to new pages all right so now saying that so this is also our main page for displaying everything as well as this page okay so this button or this item means this page so now what do we need to do we need to go ahead and create these four pages so we'll simply go ahead and create them very quickly so what do we do would come over here and create new file so the other file i'll call it bar item.dart okay well the name is coming from here it's a bar item search item or search page and my page okay all right uh well i think we could refactor the name here with the bar item page okay all right now over here i'll declare other two pages or files dart files so one is search page dot dart and the other one is uh my page dot dart okay cool now here within it we'll just simply have some very simple content to show based on the click okay all right so what we'll do now we'll go ahead and create some stateless class over here okay all for search one i'll write here search page okay now within it we need to import some of the libraries and then here within it say i'll return a child as a text okay and here i'll write search page okay now over here i want to center it so i'll wrap it around another center widget okay now we are pretty good with this the world i will just copy this part so we're done for search page now we'll go to my page and here we do stateless class and we'll just copy paste what we did early now over here we need to import this class uh this library over here and over here we'll call it my page okay all right um and we also need to put it down there okay now the error should be gone and here we need to have this return statement all right so if you want to reorganize your code you can do option command l on mac okay anyway so that's it now we will also go ahead and create a very quick uh stateless class for this one we'll call it bar item page okay now over here we'll copy the content oh sorry uh the content from my page over here okay but of course here first we want to change the name we'll call it my page now we'll come over here and copy paste this one so instead of search page over here we'll write bar item page now we need to import other libraries okay we are pretty good so our navigation bar over here would need four pages well three of them are already done and this page is also our main page so now we'd go ahead and work on uh this page as well as this bottom navigation bar okay now as i said bottom navigation bar would be over here in this file so here we'll create a say stateful class okay now here we'll call this name as main page okay all right now over here instead of returning a container we want to return a scaffold because we want to have a body and within the body we'll have this section and scaffold has another property that's called bottom navigation bar for that property we'll attach this one this four section somehow okay all right now first we'll go ahead and work with the bottom navigation bar item property okay bottom navigation bar this one so what i will do i'll go ahead and close this make it bigger okay now over here definitely if you hover over on it you'll see that it says that it should take uh over here a widget okay and the widget we should use that is called bottom navigation bar okay so the bottom bottom navigation bar this one okay now over here if you hover over on it you'll see it takes a list of items okay that's the first thing we want to take care list of items so what is this list of item so now this list of items should contain these things okay yeah so these four items it should contain these four items all right yeah so now here what do you do we'll go ahead and create this list so simply we'll just call here items okay as you can see it takes a list okay so now of course it should take the list but where is this list coming from okay and what are the things we should put in the list but as you can see if you hover over on it it says bottom navigation bar item so the list type should be bottom navigation bar item right so that's what we should have so now here we'll just simply write here bottom navigation bar item okay this one right so now it does take an icon all right now the first one we want to take this icon okay this icon but now we do have a similar icon over here so that's what we'll use icons icons dot apps okay the first one and it should take another property that's called a title and simply we'll call it uh home okay and title takes a text so we'll just go ahead and simply call it home all right and now yes we are good so here we put a comma now i'll copy this one three times okay now here we'll change the name here we'll call it bar and here we'll call it search and here we'll call it my okay now we'll also need to change the icons over here definitely we'll call it bar chart okay uh i think bar chart sharp this one now for search we can simply use an icon that's called search okay and for me or my page here we use an icon this is called person okay so while now with this uh four children in the item list we are done well do remember well anywhere you can you see in flutter pretty much that has the word bar like tab bar navigation bar or tab bar view they should take a list of children this is a common property in flatter wherever a widget has a bar it takes most of the time a list of item well as i said so they take list of children now each children is clickable that also means that once you click on them this bar item should take you a certain page okay so that's what happens here so for each of the bar item we'll have a related page where we can navigate to like if we click on the first one we should go to this page which will show this one for second one we'll go to a second page third one for third page like that okay so we need to create them pages in a list but already actually we created them as you see these four pages like bar item search bar item and my page okay all right so now what we need to do we will need to go ahead and create them create a list and put this classes in the list okay so that's what we'll do so here we do list and i'll call it here pages okay now it should take four rounds or pages related to this one okay well no the first one we'll do it little later it's a second one it's called uh bar item page okay all right the third one is over here search page and the fourth one is our my page right okay now we need to import the related packet libraries for this okay done we have three so last one is for this one this one is for this one and bottom bar is for this one now this one is very special because this would be our default page but of course we need to go ahead and create the page we didn't do it yet so for the whole app this is main page so that's why i wrote here main page but the content should be coming from another route or another page for this icon so we need to go ahead and create that as well so that one will call it home page okay so what we'll do we'll go ahead and create a file over here and we'll call it homepage. okay now over here we'll create a stateful class and we'll call it home page all right now simply over here right now we'll just return say a container for now so that you get the idea okay and now over here i will import the related packages and libraries okay so well this one would be responsible for showing all of them over here related to this button anyway so now come over here so here we'll just simply write home page okay and we need to import it all right okay so so far so good now what you could do we could go ahead and run it and see the result what happens because we have four pages all right and related to those four pages we have this bar items but one last thing before we go ahead and do it we need to attach this list okay attach this list over here in the body section of scaffold okay so now here we write body okay now body takes a widget in flatter within scaffold okay so now here i want to pass this first page remember this home page is also a widget okay so class is widget in flatter most of the time so now here simply i'll return this one i can return it like this pages zero so pages is a list it will find the first item first item is this one and within it will return a container okay all right so now what we can do we could go ahead and run it okay of course now over here uh within our main file for now instead of returning welcome page over here we'll return main page okay once we're done with the whole app we'll connect all of them together but for now we want to go to this page directly all right now let's go ahead and check it okay now over here we don't have any error but if we come to our main page look at this so we do have everything now here our bottom navigation bar is visible as you can see it's over here okay and now if you see slightly we also do have the colors over here so it's visible all right well if you see now these colors the label and the icons they are not visible so we can change the color and to do that first what you could do we do show selected item color or let's see selected item color okay so select an item color for now would do colors dot black okay 54 so now if you save it so the first one is selected you can see now for at the same time for unselected item we also have a color and this one we'll use gray okay all right and we can use gray with opacity 0.5 so okay so now there is a big difference all right now we don't want to show this names over here like as you can see so we want to get rid of the names so here we do show selected labels false okay and show unselected and selected label both set to false now the name is gone all right okay so far so good and now there is this line over here we can also get rid of that one we do elevation zero okay well now we'll work on the tap event okay well for that one first we need to define a tab function because if you come over here and hover over on it you see it has a tab on tap function okay so first we need to create a function outside of this uh build method okay we'll do that over here you would call on void avoid on tab the function name is on tab and now over here well on tab should have uh index it should receive an index from the caller function of this all right so what we'll do here we need to check uh well now bottom navigation bar it takes an index as well okay so if you come over here you see current index zero okay all right so now over here we'll set the current index okay well one thing though while current index is zero actually that means you find this page so you can go ahead and run it and check it now of course no change but now if we change the current index to two it will come over here okay all right so you see this is the default one unselected one all right yeah so it found my search page this one over here all right yeah anyway so now what we'll do uh so we need to have a certain index saved over here and pass that index to this place as well of course we also need to pass this untap event okay so here we can define another variable and we'll call it end current index equals zero the default one it could be anything you want now over here we'll do set state function and we did set state would have current index value from this one okay so this one once we click a certain thing over here that index would be passed down to this one then we save it okay to this variable and after that actually here we can pass this one well the naming looks same but you can name them anything it doesn't really matter so next we need to do we need to bind this ontap event with this on top event okay so here we know that it takes on term event and here we just simply call on tab okay so now what is this index so whenever you click on any of this okay so that index is sent down to it directly that means send down to this one and this one later on sends to this one back okay that's how it works okay so now we'll be able to click them as you see now they're clickable okay all right now here as you see you want to set a certain background color to it but if we do that it won't work okay so let's go ahead and check it so over here we can set background color do background color say colors.red but if you see it there is no change now that's because button navigation has a property which is called type and it takes a value bottom navigation bar type and actually it takes the uh this one shifting which is the default one actually okay well because of this thing it shifts if you click on them as you see it shifts left to right like that okay now because of this one the default background color is still there so we can override it here we can override by type being fixed okay as you see now they won't change i mean they don't shift left and right okay so you need to write this one if you want to set certain background color anyway in our case we'll set it white okay now the background color is white as you can see it's different from the screen color okay but now we want our screen color and background color should have the same color i mean bottom navigation background color and screen color so here we'll set up the background color we do colors colors dot white okay yeah now it looks much better but now there is another problem so if you try to click down there at the bottom it shows an error okay now because your label is gone but well it's just invisible but it's still there so when you click on this it creates this problem so to get rid of that problem what you could do you can do unselected font size zero so when it's zero actually it's not clickable because the size is not there selected and unselected all set to zero okay now as you see there is no error if you try to click at the bottom okay so now uh the error is gone okay uh well now here there's another problem though so we're setting the current index but we are not changing over here okay we also need to change the index over here so we'll do current index okay now let's go ahead now you can see actually you can see the pages all right so once you change the index over here so we need to change index here here this few places and also pass down the temp index to this one now with this actually we are done with our bottom navigation bar building simple and beautiful next we'll see how to show this page for the home page of our bottom navigation bar it means for this one

Channel: dbestech

Views: 48,289

Keywords: flutter bottom navigation bar, fix bottom navigation bar issue

Id: MoCMM0u4oGY

Length: 22min 31sec (1351 seconds)

Published: Thu Nov 18 2021