Navigation Drawer Side Menu Using Flutter (2023)

hi everyone and welcome to today's weather tutorial today I want to learn how to create a navigation drawer using flatter we're going to cut it from scratch from the very beginning I'm going to be showing you every single piece of code that you need and I'm sure after this video you have the right knowledge to create navigation drawers using flutter I'm gonna be I'm gonna make it very simple for each one in the easiest so that anyone can understand alright let's get into today's video [Music] all right so I'm gonna set our project from scratch so this is the main that page so inside the material app we're going to add the home then we're going to add scaffold then right inside the scaffold we're gonna add the upper so just type in just type in up bar and then we're gonna have the properties of upper so we're gonna add the title so we're gonna have potato and we're gonna make the title we're going to add text inside I'm going to make navigation drawer up all right then you can click save and there we go we have it see it's actually these things I'm sorry to remove that so next you want to remove that banner up there so we're just gonna go on top of the scaffold so just or not below here we just want to go into the scaffolding I'm going to type in the words uh all right let's face that then we're gonna type in the word debug it says just want to type it debug then show checked by another I'm gonna set that to false all right so when I set that first I can click save it will do a rotary load and let's see so I can see that the banner has actually disappeared and that's actually what we want all right so next one I set some properties for navigation but I want to see if you can change that blue color on the up bar into a different color and good in African so we're going to first space so you can create more room by clicking on your comma all right so there we go so I'm going to type in background color then I'm going to type in colors with capital c colors Dot dot pink so I'm gonna set that to Pink and then I'll click save for a hot reload and all right so it has actually worked just as we actually wanted so right after the upper we're gonna add the body so just go outside that then I'm gonna add the body inside the body you want to add text so I'm going to type in capital T EXT so let's make sure the text no let's change that to main page okay and there we go so we're gonna refractor and you're gonna set to Center so that we actually have it centered then we're gonna set constant set to actually remove that blue error so next we're going to add some properties we're going to set style text style then I'm going to add the font size I'm going to increase the font size to 40 okay and there we go we have it it's actually working just as you want it all right so next for good practice we're going to create another page for the nav bar so we're just going to go into the lib folder here then I'm gonna right click right click and then I'm gonna create a new file then I'm going to call it nav small n v AV now but the dirt call it a dirt file all right and there we go there we have it all right so first thing in this new file we're going to import material.dart so just import the package then we're gonna type flutter type in flutter then we're gonna type in material stroke material dirt okay there we go all right so we're gonna add the stateless widget by typing STL then I click enter then we're going to rename it to nav bar then inside the inside the container we're gonna change this to draw so let's change this word container to draw and there we go that's going to allow us to create that all right so go back to your main that file then I'm going to scroll to the very top then I'm going to import that other page so I'm going to import all right so click important I'm going to type in package then columns and I want to type in flutter up flutter underscore up or if you try to underscore up they're not going to import navbar.dot sets the file to actually all right so then go to your scaffold on your main data page then inside the scaffold we are going to create the drawer so inside you're going to type in the other drawer then we're going to type in the word uh so we have navba with the capital n capital b as you can see there so I'm going to import it the way you see so I'm going to type in draw then I'm going to type in NF Bar n f v bar then we're gonna close it with brackets comma all right so there we go so that should actually uh import it so I'm Gonna Save to have a rotary load all right so this may not work for some so if if you click on Save and it doesn't actually work so we're just gonna start debugging to build up from scratch so that will actually solve the problem so you're just going to go and click Start debugging that will actually open launch the app from scratch again and that should actually work and there we go as you can see there is a mini that actually appears in the corner and I click on it you can actually see an empty drawer and that's actually a sign that it's actually working so it's an empty drawer whenever I click on that menu icon right so we're actually done with the main that page so I'm just going to go back to navbar page and then right here so I'm gonna do some properties okay all right since at the draw we're going to create a list a child so inside the chair they're just gonna be list view so we're gonna click bracket so inside there we're going to create some children so they're actually going to be children to the list few things that the children the first child is going to be user account all right so just type in the word use and you see user account drawer header and then we have properties account name and then we have account email so we're going to change those values so we're going to change the all right so we're going to add in text phase account and we're going to type in text we're going to add George Michaelis should be the name so inside the email part you're gonna add text also I'm gonna call it George macalister at gmail.com okay and that's actually what we actually want so next stocks you want to refractor this side to actually have them on separate lines so I'm gonna just type in a comma right there okay so we're gonna click format and then there we go so we have everything on the new line all right so that's actually what we wanted so we're gonna create constant so that we actually remove this blue error lines okay and that should actually okay it will work better all right so next we're going to create a hot reload by clicking Ctrl s and as you can see the text structure appears right there so next we're just gonna go and add a profile picture gonna add current account picture so we're going to add in a circle so inside there we're gonna have a child and the child is going to be inside so we're gonna type in the chart so I'm gonna clip it so inside that we have actually have images we're gonna insert an image so actually have images in image for that actually created so I'm going to add insert our image I'm going to type in image asset so uh we're gonna type images stroke profile.jpg so the image is structure right here that actually could create a default therefore it so gonna insert it and as you can see actually appears okay and uh it actually works properly so that's the circle Avatar we've actually created inside this that's going to be a current picture so right after that we actually may want to create a decoration inside that blue background and for that we're going to actually add a decoration so when I decoration we're going to add box decoration all right so inside box equation I'm going to add some profit all right so we're gonna add some decorations so inside this bracket so we're gonna actually click enter on our keyboard so I'm going to create some color we're gonna critical accent change that blue to Pink so I'm going to type in color then I'm going to type in colors dot then when I change that actually pink set we change that blue background to pink a pink accent color that's actually what I want to click Ctrl is to actually do a whole tree load and you actually see changes to Pink so we're going to add a background uh image so inside there I actually have some image so I'm going to type in image decoration image so I actually have some image I said that I don't already put in the images folder so it's going to be this background I've called it back.jpg so inside you're gonna type in the image stroke back.jpg then click save and there we go Workshop should have it and click the hot reload click all right just give it a second okay load or there we go so next one actually have it fitting because it actually doesn't look neat that way so I'm gonna do a fitting mechanism so I'm gonna type in fit okay so inside video we're going to type in box fit right so we actually wanted to box fit dot cover click Ctrl s on your keyboard and there we go it should actually fit properly all right so next one I get rid of that gray space at the very top you can actually see it up there and you actually don't want that it actually doesn't look neat so actually want to find over actually getting rid of that because you actually aren't the background image to actually fill in all that space so what do we do we're just gonna go to the very top then uh inside list view so I'm gonna make some changes so inside list view we're going to add some padding so we're gonna set that padding to Edge insets the one let's set that to zero Edge inserts do it zero and that should actually do the trick all right so there we go we're gonna scroll to the bottom okay so there we go we actually have it we actually filled the entire background and that's actually what you wanted so actually I'm going to scroll to the bottom then now we actually want to add another child into the list so right below that under user account another child so the next chart is actually going to be a list view just type in list view actually list file since at least four I'm going to create an item so I'm going to type in leading to actually have the icon so I'm gonna call it icon dot file to upload and there we go it has actually appeared then I'm going to type in the title so they're going to type in the text as upload short and there we go we should have it there and then next one to have an action that happens inside use actual clicks on it so actually gonna set on tap I'm gonna add an action so I'm going to make sure it actually prints the text upload depth so when I hold reload and then when it is actually clicks on that this actually clicks on that you can actually see what happened the texture says upload the depth okay so I'm gonna duplicate that and we're gonna create some other items okay so I'm gonna go to the next end we're gonna duplicate that by clicking Ctrl all right so there we go duplicate the different items then we're gonna change uh all the title structure and have a total of up to eight items so I'm gonna change the titles into different file names and uh this actually gonna be very useful so gonna have a line access for stats we're going to have a share icon we're gonna have a notifications icon we're gonna have a settings icon then actually it also have one for logging out all right so when you use object clicks on uh so this is it it's actually done when this actually clicks on an icon you can actually see that it actually each one actually prints depending actually what we set right next to it Alex actually more lively that actually gives my life to actually what we have actually just created and that's actually all right so actually when I get rid of the blue errors so I to do is I'm gonna type constants wherever we actually have that blue error and that should actually fix it very quickly it's just a matter of changing that to constants okay so next one up to create a divider right below the settings and uh and the log out such it actually looks more needs so that there's actually a kind of division so when actually click divider and click or tree logic I actually said this space deduction is created right below there and that's actually what you wanted all right then there we go we can actually play with it just click it allow it to open so it's actually that the background image takes some time to load but it actually works all right I hope this video really helped if you did feel free to join the comment by subscribing and feel free to leave a thumbs up on the video and then turn Below in comments if the video really helped you otherwise thank you so much for watching I'll see you all in my next video bye [Music]

Channel: Create Beautiful Things

Views: 27,569

Keywords: Navigation Drawer Side Menu Using Flutter (2023), flutter navigation drawer, flutter listview, flutter listtiles, flutter side menu navigation drawer, flutter navigation drawer animation

Id: e7R5kx5wpBI

Length: 12min 21sec (741 seconds)

Published: Sat Mar 11 2023