Flutter Tutorial - Sidebar Menu & Navigation Drawer With Routing

we want to build the sidebar navigation draw with the feature of routing so that we can navigate to different pages we will also look at how we can programmatically open our navigation drawer or also how to close our 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 within our build method to create our navigation drawer therefore you go to your scaffold and here you have a property drawer and then we want to create here a new navigation drawer widget inside of this widget we want to create a draw and this comes from the flutter SDK and now after you hot restart your application you will see here this navigation drawer and it also opens up here a blank space and now we only need to fill this with some widgets in your drawer widget you have this child property and here inside we want to set first of all the background color of our navigation drawer secondly we want to create here a list view which is normally used in a navigation drawer and lastly we want to create here then one specific item to create this item we create a new method build menu item and here inside I put then a text inside and I also choose here than this icon and now we want to build this build menu item method and here inside we return a list tile and here inside we want to specify first of all within the leading property the icon and this is then displayed here on the left side of our item and next to it we also want to display our text and this is what you do here with this title property where we put then our text inside and with this we have here our first item we also want to include here this on tap Handler so later if we click here on this item then we want to navigate to a new page you also could include here a hover color and the silver color will be displayed on flutter web in case you hover over this element with your cursor right right now if you click here on this item you don't get any feedback even if we have implemented the on tap Handler and this is what we want to change therefore you need to go here all the way up and here we want to exchange our container by a material widget and now if you hot reload and I click here on this item you see this visual change and this is because this Inkwell which is used for this visual change needs always to have a mature engine star and therefore you need to include here this material entry star on top of your list tile if you want to learn more about inkwells then I will link also in the description a video about it if you like you can also adhere some space to the left side and to the right side of your item and therefore we create here this horizontal padding to the left and right side in our state and secondly we include this padding then to our list View and with this we have now some padding to the left side and also to the right side furthermore we also want to include would hear more items and we also want to create here a section so that we also can include here other icons in another section therefore you simply need to go here to your list View and here inside of the children property under your menu item you will simply put then the other items inside and here I have every time chosen a different text and also a different icon which is then displayed on the right side as the menu item if you like you can always add here also some spacing between your items so that you have more space in between next we want to include here a divider so that we have different sections within our drawer therefore we simply add here under our last item this divider and also give it some background color and with this we have a divider between our items and now we can simply display here under our divider the other items and this works similar like before so we simply add here a text and an icon and we simply add here two different menu items next we want to click on one item and then we want to navigate to a new page therefore we go to the build menu item method which displays here one of our items and if we click on this item then we simply want to adhere this on clicked Handler and put it here inside and with this we can go all the way up to our menu items and Implement on clicked Handler and if we click on this item then we want to call another method selected item and here inside we want to put then a number inside which is unique and now we want to create this selected item method and here we get then every time this number which is our index so for the first item we have the index 0 for the second one we have one two three four five and so on let's start here with number zero so if we click on number zero then we want to navigate here to a new page and therefore we simply create here another page for example the people page and this is a new page which I have created and it is basically a stateless widget with a scaffold and it simply displays your app bar which says people after this make sure that your hot restart your application and then you can click here on the people and He will navigate then to the People page which we have defined here and the same thing we also can do with our other items therefore we simply go back to our navigation drawer and here we go then first of all to our items and include here for every item this on clicked Handler and here we need to make sure that we put then a different number inside so basically every time I add here one number and I also added them to all of these other items and with this each of our items is connected here to a number and with this we can go back to our selected item method and here we can call then this case for each of our numbers to actually execute here another logic therefore let's also react here if we click on this favorites and this favorites has here the number one and therefore we simply go to our selected item and here we add then this case for number one here inside we do then the same as before we navigate to a new page and this time we navigate here to the favorites page and this is another page which I have created make sure to hot restart your application and now we can click here on favorites and you will also navigate then to this favorites page which we have defined here if you then navigate here to the previous page you will see that the navigation drawer is still open if you want to have your navigation drawer closed you simply go to your navigation drawer and here before we push to a new page page we want to call this navigator.pop and with this we can programmatically close our navigation draw and then we navigate to the new page so let's try it out I click here on this item and then he has also close to our navigation drawer and if I go back then you see the navigation drawer is not there anymore sometimes you also want to include the navigation drawer to other pages and this is pretty easily done simply go to this page where you want to edit and then go to the scaffold and here inside of the draw property simply add here also this navigation drawer widget which we have created here and now after your hot restart you see also here this symbol and if you click on it we go to our navigation drawer furthermore we also want to open and dismiss our draw programmatically therefore I go here to the main dot dot file where we have implemented our navigation drawer within the scaffold body property we include here then a button widget and I also put here then an icon for this button inside and also the text open drawer and lastly if we click on this item then we want want to open our drawer and with this we have here this button on the right side which I have implemented in another widget and now if we click on this button we want to open our drawer and therefore you simply call here scaffold of context open drawer and what this statement is doing it is asking our scaffold which is here on the top to also open the draw again up if I now click here on this button you see nothing will happen only that we get an error message within our console and this error message tells us that the scaffold couldn't be found within our context and this is because the context is here on top of the scaffold and therefore we also need to include here a builder around our body property and now we access you instead this context and this context has an access here to the scaffold because the scaffold is the parent widget of our Builder if you want to learn more about it I will link in the description a video about build content text and the Builder widget and now if we click here on this open Draw button the draw will open up you also can change where your navigation drawer is displayed so instead you put here the property and drawer inside and if we click on this one you see that our draw opens up from the right side if we now try to click here on this button the draw will not open up anymore and therefore if you use here this and draw then you also need to call here this method open and draw instead and now if we click here on this button you will also see that the draw will open up and with this we have learned how we can programmatically open our drawer on the other hand we have also learned before within the selected item method that we can call here navigator.pop to actually dismiss or close our drawer programmatically next we want to create within our draw this profile icon and also here the name and email address and we also want to create here this search text View and again if we click here on this item then we also navigate to a new page to create this header we want to create three Fields first of all this image then the name and also the email and therefore we want to go to our navigation Draw widget and here within the build method we Define our name and email and we also Define here our image which is then pointing to an image in the internet next we want to create a method build header within our list View and we put then all the fields inside and lastly if we then click on this item then we want to navigate to a new page and this is what we also want to implement therefore we Implement here this on clicked Handler and if we click on this item we push to a new page and here inside we place then the name and the URL image inside and on this new user page we display then the name itself in our app bar and also the image which comes over this URL image we also place it inside and therefore I have this user page which basically displays then here the name within our title and also within the body property this image and lastly we need to implement our method build header therefore we create here this build header method and this returns then first of all in Inkwell and with this we can later click on our item to also navigate to a new page and the second effect of The Inkwell is if you then click on this item you see here the Splash and this is also what The Inkwell is doing for you and now we want to create our header here with an array widget and therefore we first of all created the circle Avatar widget where we put then a network image inside and with this we already display here the profile image at the beginning of our row next to it we want to create then two text under each other and we also want to create another icon at the end of our row therefore we add here first of all some spacing to the right side and then we want to include both of our text and this is what we put then inside of a column and here I include then first of all the name as the text and secondly the email and with this you see we have the name and email inside and lastly we also want to create here another Circle Avatar and inside of it we want to put then this icon inside and now if our hot reload you see also that he is placing this icon here inside however we also get here some small layout issue to fix this layout issue we want to go here all the way up to our list View and for now we want to remove here this padding and now if a hot reload you see we don't have any error anymore and this is because we have removed here the space to the left and to the right side and with this we have here more space to display our widgets on the other hand if you also want to have some space again to the left side and right side of your menu item then you also can include this easily therefore we simply go to the start of our people item and we want want to wrap this simply inside of a column and for this column we set then this padding and now if I hot reload you see we have again some space to the left and to the right side and next if you like you can also include here this search text field within your navigation drawer therefore I simply go here to this build menu item of people and on top of it we want to display then here our search field and therefore I simply create here a new method where I display then this text field inside and if you want to learn more about how to display a such text field or a text field I will put some links in the description about it and with this we also have here this beautiful text field 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 watching this video please make sure to give it a thumbs up and subscribe to my channel here together and see you soon bye [Music]

Channel: HeyFlutter․com

Views: 93,906

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, navigation header, routing

Id: ts9n211n8ZU

Length: 14min 14sec (854 seconds)

Published: Fri Apr 23 2021