Flutter Tutorial - Selectable Sidebar Menu & Navigation Drawer

we want to build this sidebar navigation drawer with the feature of selection so you can navigate between different pages and the current page is always selected within the navigation drawer if you are new here subscribe to my channel and make sure to watch this video till the end let's get started by creating our selectable drawer within our build method here within our scaffold we have the property drawer and here we want to create then a new navigation drawer widget inside of this widget we go to the build method and here we create then a draw widget and this comes directly from the flutter sdk and now if you hot restart your application you see this draw symbol in your app bar and you can click on it and then you will see that we have here a blank space next we want to change the color of our drawer and therefore we want to create a container with a blue color with this we have here this blue drawer and inside of it we want to place a listview widget so that we can place multiple widgets under each other within this list view we want to create another column widget and here inside of the column widget we want to create then a new menu item and this menu item is then here one specific item within our navigation drawer each item has an icon and also a title and therefore we create here first of all the title and secondly also the icon and now we create this method and here inside we simply return a list time widget and here you can then supply first of all the leading property which is this icon and now you see here this icon on the left side and secondly we have here the property title and here we place in our text inside and now we also have here the text within our menu item if we then click on one of these items then we want to make it here selectable and right now if i try to do it here on our current item this is not working to achieve this you simply need to wrap here your list tile inside of a material widget and then you need to supply here the color to transparent and secondly you need to include in your lister this ontap handler and now if we click here on our item you see that we can select it next we want to go again to our build method of the navigation drawer widget and here where we have created our first menu item we want to create also multiple items but before we do this we also want to wrap you around our column a container and here inside we want to supply then a padding and we set then this padding horizontal to the left and to the right side with 20 pixels and next we want to create also here our other items so we have here three more items and therefore we simply go here to our menu item and under it we want to paste in here these three items inside and each of these item has a different text and of course also a different icon and with this we are pretty close to what we want to achieve we also want to include here a divider and then we want to create here two more items and with this you can create here different sections within your drawer therefore let's go to our last menu item which is here this updates icon and under it we want to create then a divider and with this we have here this divider widget inside and under this divider we want to create then our other menu items and like you can see it is pretty easily done to create here a basic drawer widget optionally if you like you can also go again to your build menu item method and here inside you can then increase the font size of each of your items so for example i put it here to 16 and now you have here a bigger font size next we want to add the selectable state to our items therefore we create a new model class navigation item and here inside we put then all of our items inside so here we have all the menu items which you see here also on the right side and lastly i also have included the header already and this is later displayed here at the top after this we want to store our current navigation item within our state we'll use here the provider and i simply extend it here then from this change notifier provider hour class and inside we can then store our navigation item which is our current selected state and by default we select here then already one navigation item so for example people and this will then later result in that this people item is selected by default next we create a getter method to get our navigation item and we also create a setup method to set here a new navigation item every time if you set a new navigation item you also want to call this notify listeners to update your ui with this new navigation item and to make use of this change notifier provider you also need to go to your pubspec jammer file and here you need to include this provider package under your dependencies and lastly we need to set up this navigation provider within our flutter app therefore you need to go to your main.start file and here around your material app we want to represent this change notifier provider and within the create property you simply return here then this navigation provider which we have created before and with this the whole application can now access here this navigation item state and it also can set then later a new navigation item state if we select here a new item within our navigation drawer next we want to make each of our menu items identifiable with this navigation item therefore we simply go back to our navigation drawer widget and here where we build our menu item we want to include then here this navigation item and then you need to go all the way up and now for each of our items we want to include here this navigation item and here always make sure that you put the right navigation item inside so if we have here the text of people then we put the people navigation item inside and the same also works here for the other items and with this we have assigned to each of our menu items a navigation item then we go again to the build method of our menu item and here inside we can access now our provider our navigation provider which we have created before and over our provider we can access and hear our navigation item state which we have included before and this holds then always the current item which we have selected here on the right side and based on this current selected item we can then determine if our item is right now selected or not and if it is equals then it is selected otherwise it is not selected and lastly you can simply go to your list tile and here inside you have a boolean flag which is called selected and we put here then our is selected boolean flag inside and secondly we want to include here our selected tie color and we put here a white color with some opacity inside and now you see that the menu item people is selected and this is because we have inside of our navigation provider set our navigation item to this people this was now the first step and the next step is to also click on another item and then this item should be then later selected to achieve this we go back to our navigation drawer widget to this build menu item which is displaying here one of our items and here every time if we then click on our menu item then we want to call here another method select item and we put then our current item inside and now we want to create the select item method where we get then every time this navigation item which we are currently here inside and now we need to put this item simply inside of our provider therefore we access our navigation provider first of all which we have created initially and now we want to use here the set navigation item method to also change our current selected item therefore let's go back to our navigation drawer and here on the provider we want to call then the set navigation item method and inside of it we put then the item on which we have clicked right now let's also try it out so i click here on another menu item and you see the menu item is then selected however if you then close your navigation drawer you will see that we are here still within the people page and we want to go instead to the favorites page to achieve this we go to our main.dart file and the inside i have created a main page and within this main page i have simply put then the people page inside which is right now initially displayed and we want to change our people page by a new method build pages and within this build pages method we want to build then our pages depending on the current item which we have selected and to get this current item we simply access our navigation provider which holds the current item which we have selected in our navigation drawer therefore let's go back to our main.dart file and here we access an our navigation item and based on this navigation item we want to choose then the right page so for example if our navigation item is people then we want to choose here the people page and this people page is then the normal page which we have created initially with a scaffold with an app bar and also with the navigation drawer widget and we also do the same thing for our other items so i simply include here for example the header widget and for all the pages make sure to put the navigation drawer widget inside so that you have here this menu item and always can go back to the menu and this is what we do right now with all of our items so you see we also access here our favorites item and then we show here another favorites page with this we can try out our build pages method and if i click here then on another menu item then you see he is also going to this page and the same also works with the other menu items so if i click here on this item he is going also to the page which we have then put here inside lastly you also can include here the header widget within your navigation drawer and we also want to look at how we can change here then the icon color and the text color if our item is selected therefore let's start here with our header and here we want to create first of all image then a text and another text and an icon let's go to our navigation drawer and here inside of our list view on top of each of our other items we want to include then here our build header method inside of it we want to place in some data and this is what i have defined in another location so here i have to find the name the email and also the image and these are then later displayed exactly in this header and lastly we create then this build header method and i don't want to go into detail about it because i have created it already in the last video this header so i will link this in the description this video and this video is also talking about all the details about how to create a navigation drawer however let's also implement the case that if you click here on this navigation drawer then we want to go also to a new page to achieve this we simply wrap you our navigation drawer inside of a new widget which is called inkwell and here every time if you tap then on this widget then we want to navigate to this new page and therefore we do the same thing as before we call here our select item method which we have implemented before and here we simply put then our navigation item header inside and this will then call here this method and put then our current item to this navigation header item and now we can try it out so i can click here on this header and then he is also navigating to the header page and this is also what we have defined here within our main.dart file so if we have here this navigation item header selected then he is going simply to the header page we also want to look here at how we can change then the icon color and also the text color of our item if it has the selected state to achieve this we go to our build menu item method which displays then here this item and here we have then this color and right now we have set here the color to white and this color is then also going here inside of our icon property and it is also going inside of our text and now we can simply take here this is selected state and if our item is selected then we simply want to change this color for example to arrange and now if you hot reload you see that our selected item has here the foreground color orange and by the way if you want to get here this whole source code of this application then you can get it with the first link in the description and with the second link you can get access to my flutter courses where i teach you how you can become a better and more efficient developer hello everyone thank you so much for watching this video please make sure to give it a thumbs up and subscribe to my channel here to get the latest news about flutter and see you soon bye [Music]

Channel: HeyFlutter․com

Views: 12,334

Keywords: android, drawer app, drawer flutter, drawer tutorial, flutter, flutter drawer, flutter navigation drawer, flutter navigation drawer tutorial, flutter side drawer, flutter side menu, flutter side navigation, flutter side navigation bar, flutter sidebar, flutter sidebar menu, flutter tutorial, ios, material drawer, material navigation drawer, navigation, navigation bar, navigation drawer, navigation drawer flutter, routing

Id: HTi9wvIG1lI

Length: 13min 18sec (798 seconds)

Published: Sat Apr 24 2021