 hello guys so in this video we are going to see how to add the drawer in the app so i have already designed three pages that is one page notification page and settings page now i will be adding the drawer in the app so since the drawer is required on all the pages so i will be creating a separate file with the name my underscore draw so you can choose whatever name you feel comfortable so let's create a stateless widget that is my drawer and here we need to return the drawer widget and inside the drawer you need to add let's add a child that would be a list view where we can display some let's use the required property that is children and here we need to add a header part that is displaying the image as well as first name last name and email so that would be drawer header so drawer header yep we have this widget so what we are facing here let me just add the child into this header so we have to display multiple things let's use the column over here and in this column we need to add children and just add comma and let's remove this console and we need to add this console and i just save this so for the time being i have not added anything so this is just a drawer so let's go to the home page let me add it on one page first so we have the property of scaffold drawer so just give it my draw and just add this console and save this so once i added the drawer you can see this hamburger icon and if i click it you can see anything on this so just this drawer and we have two sections the first one is a header that is we are doing it over here this one is drawer and this one is header and after the header you can add the menu items okay so let's go inside the drawer header and just add some elements let's say i want to add one image over here so i will use the circular avatar and we'll use some image over here the forward image i will be using a network image and i already copied the link just paste it and i just save it and it is very small so let's give it little radius so i just give it let's say 40 and check it it is fine so below to this image we need to add the text for the name so let's give it the username and then we need one more text widget for displaying the email so i just add email over here and the header is completed with this and if we go down to the header we have to add the menu items so let's add one list tile first and see so in this style what i need i just need to add title that would be a text widget of saying home page save it and you can see this home is coming over here and we can add the icon as well let's add one leading icon so take one widget and let's give it icons dot home save this and same way let me complete this we have this on that property over here where we can execute whatever you want so i will what i will just so we are facing over error because we cannot use const here so just use the const here and here and here and that's fine let me just use rest of the menus then we will define the on tap okay so after home we have other pages like settings and just use this settings icon let's do it okay i misspelled and fine and this one is for notifications and let's use notifications and the last one is for log out and i think log out is also so yep just save this and see how it looks this is how it will look if you want you can change the coloring of this change the text color you can change the icon color as well so if you want you can change it like let's say icon color so let's use colors dot black save this okay so if you want you can just change it with theme as well like green color so this will look like this okay so i just keep it default save this okay now we left with this on tap functionality so what i want if i click on home it should go to home page if i click on settings it should go to settings and same way with the rest so for that i just use to navigate and i will be using this navigation on multiple menus so i will just create a function navigate to so here let's use navigator dot push replacement so you can choose whatever option you want so i'm using this push replacement if you have any other type of requirement you can choose accordingly so let's use this material page route and we need to pass here the builder that would be this arrow function and here you have to specify the route name or just keep it out so we need this context and the route to be passed so let's use this context and route hide this bad okay so this is complete now i can use it on each new item so let's use it over here and just pass this route over here this will be the home page and don't forget to add cones if your widget is using that same way for settings let's use settings page same way for this notifications let's use notifications page and we left with the slow up system navigator do we have system navigator dot pop so this gonna close your app and this will only work on home page it will not work on the rest of the pages so let's go to home page and copy this line and apply the same on the rest of the pages just go under skateboard and use this don't forget to import this and go settings as well go here paste it import it save this and that's all let's try to go to this settings page you can see it moves to settings notifications home and wherever you want to go you can go let's try with a logout and it is closed so that is all for this video if you have any doubt do comment in the comment section otherwise like share and subscribe thank you