Bottom Navigation in Flutter | 30DaysOfFlutter | Flutter Crash Course for Beginners

hey there this is akshat madan and welcome back to day 11 of 30 days 30 concepts of flutter series and in the last part we have covered about the animated text kit so in this part we are going to cover it up we are going to cover about the bottom navigation that's a very important thing because that can be useful in every app that you're going to build and that's a very basic thing for navigating through different pages right so yes so if you are new on this channel you can like my videos and subscribe to my channel and you can also follow me on instagram right so now let's go to vs code and start coding the bottom navigation so you can see that in the last part we were seeing about the animated text kit so i'll create a new file in this widgets and i'll call it bottom nav dot dart and first of all i'll import material dot dot i'll create a simple scaffold simple stateless class i'll call it bottom nav and in this i'll return a scaffold and i'll return an app bar app bar will be called uh let's say bottom nav and in the main dot dot i'll return this bottom nav instead of returning animated text kit bottom nav let's save it we can see a simple app bar so let's go to bottom nav uh yes and in the body we have to return uh something so let's return okay i'll see the body a little bit later but before that we have to return one more parameter that is called bottom navigation bar so we have to return bottom navigation bar and in this we have to return bottom navigation bar right now in this it takes items and in this items we have to uh this items are nothing but they are of type bottom navigation power item so what we have to define is we have to define constant and we have to write uh in this we have to write bottom we have to write a type which which we are going to return in this items that will be bottom navigation bar item bar item perfect so you can return a list and in this list we have to return uh bar items so let's return and so let me just return bottom navigation [Music] bar item and in this bar item we take icon and the first item will be icon start home icon icon start home perfect and you can give it a label so let's give it a label and label will be a simple string so we can write simple home okay we have returned this label inside the icon we have to cut it and we have to paste it over here put a comma perfect save it so this is my first bottom navigation bar item perfect so we are going to don't worry about this error it will be solved so we have to return a few more bar items so let me just return let me just copy it and i'll paste it three more times so i want four items in my bottom navigation so next one i'll put search next one i'll put uh add and the next one i'll put a profile save it perfect but still we are not going to see our bottom navigation so we have to define a few things in this class and those are the selected index so i'll define ink selected index so this variable is going to manage the index that is selected there are a few indexes right in this part we have four indexes that is home search ad and profile so this is going to manage those indexes and the next thing is we have to define a list of the widgets that we are going to show or we can return the page view and the page we are going to see soon but first of all i'll define a list of widgets list of widget and it is going to be called widgets and it will be a simple list and this list will take simple text for now so i'll define text and i'll call it home and i'll simply copy this text and v v and v and the next text is going to be search the next text is going to be add and the last is going to be profile so this text are going to be returned whenever i am going to change the bottom navigation bar item so we have returned this list also and what is going to happen when i click on any item so that for that we have a function and that function i'm going to name it on tab on item tab it is going to take the index of the bar item perfect i hope you are understanding and we need to change the state and we will change the state of and for this we need to put this function inside the class and i'll define set state okay we are not able to change the state because we have defined a stateless widget yes that's a very poor thing that we have done so let's convert this stateless into stateful so click this bulb and convert to stateful and now i'll put all these uh index and this list in my this class and now i have to define a simple function that is on tab so i'll define void on tab and it is going to take the index and now we have to change the state so set state set state yes set state and my selected index that we have defined above will be my index now save it so this is a selected index so it is going to get updated right perfect so we have defined all the initial things now we need to define after coming out of this bar item list come out of it and we need to define the current index the initial index right so the current index will be nothing but my selected index now what should be the selected item color right one item will be selected and all the other items will not be selected so i have to define selected item icon color or you can define item color so let's do make it color start green right and unselected color so unselected color will be let's say colors dot gray right so now you have to define ontap so we have on tab so what should happen uh when i click on any icon nothing but ontap function should be called so we have ontap function just uh call it save it you can see the bottom navigation and i need to change the icon so second icon will be my search and the third icon will be my ad fourth icon will be person that is for profile save it you can see all the different icons and now in the body what should happen whenever i click on this icon the text should be return which is present at that same index so i have to define a body so come out of this app bar and define body and in this body i want to define this list that is widgets dot element add element add and what should be the index selected index selected index yes and save it uh let me just wrap it with the center yes you can see home over here and when i click on search you can see search over here when i click add add is there when i click profile profile is there but this is how we are working with simple text but in the real case whenever you are making real apps you are not going to return the simple text you are return you will be returning the pages right different pages so for that we need to work with the page controllers or we can say the page views so let's do it so for that i'll just comment this list because this is not required and i'll define page controller edge controller is equal to page controller put the semicolon so we have defined this page controller and this controller is going to control all my pages right so in the body in the center it will be page view so let me just remove this and it will be page view now page view it takes a controller so i'll give it a controller of page controller that we have defined above and the next thing it takes the children so in this children you have to define different pages so let's say i defined these any three of the pages that we have already built but you have to build your own pages so let's say i defined alert page so alert dialog alert widget and the next thing i defined let's say dismissible page dismissible widget that we have built in the in the i'm talking about the previous parts right previous parts of this series we have built all these three all the all the all these widgets right so you will not be having these pages you have to create your own pages right so as you can see in the dismissible we have this class and we have this all this simple ui right but you may you should not think that uh this is inbuilt right i hope you have got what i am talking about now let's define one more let's define rows calls those calls and the next page that we work please let's say snack bar widget yes let me just save it and uh one more thing yes we have already defined app bars in those pages so i will remove this app bar but you can see that i am able to see the pages but it is not dynamic whenever i click on any button it is not changing why because we are not defined any we have not defined any functionality for changing the pages for that we need to put something in this set state so right over here page controller page controller dot jump to page and it will take the index save it so when i just save it so now when i click on any other icon you can see that it is working perfectly fine right so like this you can work with your uh and this is not the error in our app this is the error in the rows calls because i wanted to show you the functionality of wrap right so this is not any error right so you can see it's working perfectly fine so i hope you like this video i hope you are comfortable with bottom navigations now so if you like this video you can hit the like button you can subscribe to my channel you can uh follow me on instagram and linkedin so till the next video keep coding keep on waiting and thanks a lot

Channel: Akshit Madan

Views: 2,577

Keywords:

Id: TBxo3IKYKow

Length: 11min 46sec (706 seconds)

Published: Mon Jul 05 2021