Flutter Tutorial - Hidden Drawer UI | Navigation Drawer Animation

let's create a hidden draw from scratch in flutter whereas you can move between the pages by clicking on the different draw menu items you also can drag vertically on each page to go to the menu if you're new here subscribe to my channel and make sure to watch this video till the end in general we want to create two pages first of all the page with our draw menu items and secondly then each individual page where we can then go from our menu let's get started by creating the draw page first therefore i have created here within my material app a main page and now within this main page build method we want to create then a new drawer and therefore i create here a method build draw where we return then a draw widget that we want to create together inside of this draw widget we want to create then here a single child scroll view so that we can display multiple widgets under each other and here inside we want to create then our draw items therefore i create here a new method build draw items and this is then basically displaying here all of these items but before we can display all of these items we also need to define them we need to define the icon and also the title next to it therefore we create here a new model class draw item and inside of it we put then the title and icon of this draw item inside and we also define a constructor and secondly we create another class draw items where we define then all of our draw items and therefore i create here every time a new draw item so for example this home item and next to the title we define here then an icon and this comes from this font awesome icons package which i have included within my pubspec drama file so here i have included this font awesome package under my dependencies and our draw items we want to place them inside of an all list and here i put then exactly this draw item inside and we also do then the same thing with the other drawer items so i create every time a title and also an icon for each of these and we also put then all of these elements inside of our old list and with this we can access and all of our draw items that we want to display within our draw item menu list therefore let's go back to our draw widget and here we want to create then a column to display multiple draw items under each other and here we examine exactly this whole list that we have created before and then we want to map all of our draw items and want to create for each of them a list tile and now inside of this list tile we can create here one specific item so we create the title and also the icon so let's start here with the titles so we create here text widget and then we access here from our item from our draw item the title property and since we display here the text with a white color we also need to change here the background of our draw and therefore we go back to our main file and here we want to include then to our scaffold a background color and then i set here the primary color and this is basically here this color which i have defined at the top and with this you can see now the background color and also all of our list items and secondly you see that our item is displayed directly under our status bar and therefore we also need to go here to our build draw method which is then displaying here this draw widget and we wrap it then inside of a safe area widget and with this we have here more space for our items alright let's go back to our drawer widget and here inside next to the title we want to also display then this icon which we can access over our item and with this we have the main design of our drawer completed we also want to add here more spacing between our items therefore i add here within the list tile some content padding and with this we have here more spacing between our items next we also want to include here then the current selected page of our menu and therefore we take a normal scaffold page and we scale it here a bit down to display then next to our draw to create this page we go back to our main file and here on top of our drawer we want to display then our other page and therefore we create here a stack and now we can display here on top of our draw a page and this page we create then within a new method where i create a normal home page and this has a scaffold with some app bar and now after you hot restart your application then you only see here this page because this is overlapping then our drawer which is under it next we want to scale this page down so that we display it next to our drawer therefore we go here to our home page which is here right now displayed and we simply wrap it then inside of a container widget and here with the property transform we can then change the position of our home page and we want to change only the x offset for now and therefore i create a new variable where i put then 260 pixels inside and now if a hot reload you see that the home page moved to the right side and if i put a smaller value inside then you see it is going more to the left side and if you put a higher value inside then it is moving more to the right side secondly we also want to move our home page a bit down so that it matches here with this design and we also want to scale our home page a bit down therefore we create here also a y offset and put it here instead of this zero inside and with this our page is then also moving 150 pixels down and if you put here a higher value inside then it is moving more down and if you put a smaller value inside then it is moving less down and lastly we also want to apply here a scale factor to our page and therefore we call here on our matrix this method scale and then we define here the scale factor and we want to scale it to 60 down and now if a hot reload you see that the page is only taking here 60 percent of its original size furthermore we want to integrate then here an animation between both of these states where we have the draw and where we display then one of these pages to achieve this we want to put all of these values inside of our global state so that we can later modify them therefore i remove them here and i go up to the state and here inside i create then all of these fields and i also initialize them then with the initial values that we also have defined before and now after i have hot restarted this application you see exactly the same ui that we had before only that we have now all of these values within our state and with this we can later modify here these values to actually change the position of our page so what we want to achieve is to close again our draw and then we want to move here this page again on top of our drawer and to achieve this we want to create here then a second method close draw and here we put then the x offset and the y offset to zero and we also want to display then again this page with one hundred percent let's also try it out so i'll exchange here the open draw with a closed draw and now if your hot restart you see that the home page is again on top of our drawer so the page is on top of this drawer in our stack and it also takes then the full size and it is not moved anymore next we want to create here at the top this menu item and if we then later click on this menu item then we want to open our draw up therefore let's go here down to our method build page where we display here this page and inside of our home page we want to create then a callback where we put then our open draw method inside and this is basically calling then exactly this method with which we can then open our drawer and now we can go here back to our home page and here we create then a constructor where we get then this callback and lastly we only need to create here then an icon at the beginning and then we need to call this method open draw therefore let's go here to our app bar and here we create then within the leading property our drawer menu widget and within this drawer menu widget we want to create then a simple icon button where we simply create then here an icon so in this case i make a use of this font awesome icons package to display then later this icon and therefore make sure that you have this font awesome flutter under your dependencies inside on the other hand if you don't want to use this package you can also display here simply a menu item from the flutter sdk then you don't need any package all right and here within our icon button we also implement then our unclicked handler and this is what we want to execute later therefore we go here to the home page and every time if we click on our menu item then we want to call here this callback open draw to open our drawer and now if you hot restart you see here exactly this draw menu item and if we click on this drawer menu then it is opening up our drawer however it is currently jumping directly to the drawer and is not doing a smooth animation and this is what we want to change therefore we go here back to our main page where we display our draw widget and here instead of taking then a container we take this time an animated container and if you make use of an animated container you also need to supply here a duration how long this animation should take and we define here that it should take 250 milliseconds and this means every time if you're any values like the x-coordinate or the y-coordinate or also the scale factor is changing then he is doing an animation between these values in 250 milliseconds all right now let's try this animation out and for demonstration purposes i also put this value to two and a half seconds so that we see exactly the animation and now if i click here on this draw menu item then you see he is opening up our drawer and also if we then click here anywhere on this page again then we want to go back to this page and therefore we wrap here this animated container our page inside of a gesture detector and every time if we then click on this page then we want to call the method closed draw and with this we are closing again this draw and go back to this page so let's also try this one out so i click here anywhere on this page and then you see he is animating back to this page and if we click again on this item then you see that he is going back to the drawer if you like you can also include here then a horizontal dragging so if you scroll here horizontally then he is going back to this page and if you scroll then again here horizontally then he should go back to the draw to achieve this we go here back to our main page state and here we want to create another field is dragging and we set it initially to false and secondly we go here then back to our gesture detector which is wrapped around our home page and here we implement in this property on horizontal direct start and every time if we start dragging then we want to set our is dragging field to true and this set then exactly this is dragging field to true that we have defined here at the top and secondly we want to implement the main functionality within the on horizontal drag update method and here inside we get then every time the change which is here our delta on the x coordinate and in case our change is here greater than 1 pixels on the x-coordinate then we want to open our draw and secondly we also do the same thing for closing our draw only that we change here then this delta with a minus in front and with this we make sure that we drag then exactly to the opposite direction instead and now we can try it out so if i drag here to the left side then he is opening up our page and if i drag here to the right side then he is opening up our draw again the only problem with this approach is if you one time tap here on the screen and then you drag here all the time then it is always changing here the position of this menu item and this doesn't look so great if the time that we put here later for this animation to allow a value therefore after we have executed here this code we want to set our flag is dragging again to false and secondly we want to make sure that if the is dragging flag is set to false then we don't want to execute this code again and now if i press here one time on the screen and i try to drag into another position then this is not working anymore and lastly you can put then this value to allow a value so we put it again to 250 milliseconds and now if i drag here once then you see we have here a smooth animation every time going on and here inside of this closed draw method we want to set then a boolean field is draw open to false and if we open our draw then we want to set this boolean flag again to true and lastly we go here to our state and then we create also here this boolean field in our state and now with the help of this boolean field we can determine if our draw is currently open or not and in case our draw is open like right now then we don't want to allow here any scrolling on this page and to implement this we simply go here all the way down until we reach our home page which is here this page on the right side and we wrap it then inside of an absorb pointer and with this you can then absorb any gestures made on this widget and here every time if this absorbing flag is set to true then we want to absorb you all the gestures on this widget and we want to simply check here then if the drawer is open then we want to absorb here all the dashes of this widget and now we can try it out so i try to drag you anywhere and you see this is not working anymore however the gesture detector which is here on top this is still working so i can still drag here to the left side and to the right side to actually change then the position of this home page and also i can tap on this home page to close the drawer so if i tap here anywhere on this home page you see that the draw is closing so this is working fine only the gestures directly on this home page are then absorbed next we want to improve the design of the page that is here displayed so we want to give it here some white background color and we also want to make it rounded therefore we go first of all to our home page and here we go to the scaffold and right now we have here then the background color blue inside so this has here a blue background color however instead we want to set then this color to a transparent color and with this our scaffold background is transparent and you also see here already the draw behind it and this is what we want to change therefore we go here back to our main page and then we want to wrap here this home page inside of a container and then we want to set again a background color for our home page and here we simply determine if our drawer is currently open then we want to set it here to a white background color otherwise if it is closed then we want to set this blue background color and now if a hot reload you see that we have again the blue background color here for our widget that we have defined here and if we change here back to our draw then you see it switches here to this white background color that we have defined let's also improve here our design by making our pages rounded in case our drawer is open therefore we wrap here around our homepage another widget cliparect and here you can make it then rounded with the border radius and in case our drawer is open then we make it rounded and otherwise we don't make it rounded and now if a hot reload you see that it changes here then the shape and it also makes here our page around it and lastly on android if you click here on this back button then you also want to close here this drawer and therefore we wrap here this whole widget inside of a will pop scope and here we determine then if our drawer is currently open and we click on our back button then we want to close our drawer and otherwise if our drawer is not open then we don't call here this closed drawer message here inside and now we can try it out so i can click here on this back button and you see that he is enclosing our draw this is exactly the method that we are here executing next we want to click on different draw items and then we want to go to the corresponding page to implement this functionality we go to our draw widget and here inside we want to include then a callback and within this callback we get then every time the draw item on which we have later clicked and lastly we need to call them this method every time if we click here on one of these items therefore i simply go here to this on tap handler of one of our items and if we click on our item then we want to put this item on which we have clicked inside of this callback and lastly we need to implement then this callback outside of this widget therefore we go here back and here inside we want to implement it then and then we get here every time the item on which we have clicked and this item we want to store then within our state and therefore i go here up to our state and here i create a new draw item and by default we have every time the home page selected which is then here our first entry and after we have selected here our entry we also want to close our draw again therefore i also call here this method close draw and finally we need to change then our page that we display here on the right side depending on the item that we have selected and therefore we go here down to our build page method and here instead of displaying them every time the home page we want to exchange it then with our other pages and therefore i replace it here with a new method get draw page and here inside of this method we switch then over our item so this is the item that we have currently selected and then you can basically choose here which page should be displayed for each of your drawer items so for example for the home drawer item you display then the home page and the same thing you also do for all of your other drawer items so if you have for example the draw item explorer selected then you show here this explorer page and this is another page which i have created and the same thing i do here then for all of these drawer items which are here displayed on the right side and now we can try it out so i can click here on one item and you see he is then every time switching the page and is going to the corresponding page that you have linked here within this method and of course you can also apply then other functionalities to your entries so for example if you click here on the logout button then you want to log out maybe and show the login page and to implement this functionality you simply go here all the way up until you come to this method build draw and here every time if we then select one of these items you can decide what should happen here inside so you can define here the functionality and then you basically switch here over your item and by default you close in your drawer and also by default you put then the item that you have selected inside of your state and now you can also define other cases for example if you click here on this logout button then you want to do some other functionality for example we show here then a snack bar and now we can try it out so i click here on this lockout button and you see he is only showing here the snack bar or any other functionality that you are putting here inside and if you click then on any other item then he is going here inside and then he is switching to the page that you have selected if you click here on these items you see they take so much space until the end and this doesn't look so great so we want to limit the space so that it is until here to achieve this we simply want to limit here the width of our draw widget and therefore we want to wrap it here inside of a container widget and then we want to set the width to the x offset and like you remember the x offset was every time how much our page here this page is then shifted from the left side to this location and this means that our drawer takes you exactly the width until our page so if i click here on this item you see it doesn't take so much space anymore and of course you can also improve here the design a bit so that you have here more spacing to the right side and to the left side so that we have here some spacing and here also some spacing if you like to achieve this simply go to your draw widget and here we want to wrap then all of our draw items inside of a container and we add then here 16 pixels to the left side and 16 pixels to the right side in space and we also add here some space to the top and now if a hot reload you see that we have first of all more space to the left and to the right side and also if i click here on these items you see we have more space 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] you

Channel: HeyFlutter․com

Views: 29,850

Keywords: amazing ui flutter, android, android app development, animation, app development, designing ui in flutter, drawer, drawer app, drawer flutter, drawer in flutter, drawer tutorial, flutter, flutter animation, flutter drawer, flutter for beginners, flutter hidden drawer, flutter navigation, flutter side menu, flutter side navigation, flutter tutorial, flutter tutorial for beginners, flutter ui, ios, navigation drawer flutter, ui development, ui in flutter

Id: vZ7vdMok98g

Length: 21min 48sec (1308 seconds)

Published: Thu Jun 10 2021