Flutter Tutorial - Navigation Drawer Animation | Sidebar Animation & Hidden Drawer Animation

let's create an animated navigation drawer in flutter which has a sidebar menu and you can then switch between the different pages if you're new here subscribe to my channel and make sure to watch this video till the end we will use this zoom draw package to create easily an animated navigation drawer let's get started within the build method by creating a zoom draw widget which comes from this package and here inside you need to supply two properties a main screen and the menu screen let's start with the menu page therefore we create here a simple scaffold and we give it some background color and next to the menu page we also create our main screen here we create also a simple scaffold and we also give it then an app bar and with this we have created here the simple main screen and next we want to switch then between our menu that we want to create later and our page that we have created here right now so we want to create here this menu item so that we can go here to our menu therefore we want to create within our app bar the leading property which is displayed on the left side and here we want to create then our menu widget and this menu widget is basically an icon button with this menu icon and if we press on it then we want to call our zoom drawer and here on it you have then the toggle method which is then basically toggling between the main menu and our page let's also try it out i click on this menu button and then we switch here to the menu page which we have only given a background color till now if you like you can also change here the style of our drawer therefore you go to the zoom drawer widget and here you have a property style where i set then the style one for example and with this you see that it is a bit rotated and next we can then create here in the background the main menu and by the way to make this here also work you need to go to your pubspec jammer file and here under your dependencies you need to include then this flutter zoom drawer package alright let's now go here to our menu screen that we have created and here inside we want to create then a menu items class where we want to create them each of our menu items therefore i have created here basically the title and also the icon which is then later here displayed inside of our menu so you see here the icon and the title and to make this work you also need to create here a new menu item so here i create a simple model class with the title and the icon alright and next to the single item you also want to create then here all the other items that are then later displayed here inside of your menu secondly we want to put then all of these menu items inside of a new list so here i have added all of them and now we can make use of this all property to display then all of our menu items in our ui therefore let's go here back to our menu page and here inside we want to create then first of all a column and here inside we want to access then this old property with all of our menu items and then we map here over each of our items by creating a new method where we get then each individual item and for each item we want to create then a simple list style and inside of it we create then first of all an icon where we access then from our menu item the icon property and we also create the title where we access and the title property of our menu item and these are exactly the data that we have created here at the top and now if a hot reload we have then here a list of all of our menu items and we also want to give it here a different color therefore we go here back to our scaffold and here around we want to represent a dark seam and with this all of our list styles have then here a white color next we want to navigate here between our different menu items and therefore we want to add the functionality if we click on another menu item then we simply want to navigate here to this other screen therefore let's go back to our home page where we have created our zoom draw widget and here inside of the state we want to create then every time the current selected item and this current item that we have selected we simply want to put inside of our menu page so our menu page should be later here displaying always the current selected item and secondly we want to integrate in our menu page this unselected item which is always called if we change here the selection of our item and then we get here every time the item on which we have clicked let's now go here to our menu page and here inside we want to create then first of all the current item and also this unchanged handler so that we can later change the item selection now we simply want to use our current item to display it here as a selected state in our menu therefore let's simply go here to this build menu item method where we create then every time one specific menu item and here inside you can then include the selected state and here we check basically if our current item that we built is the current item that we have put here at the top inside and with this our current selected menu item that is also displayed here on the right side is highlighted and of course you can then go here back to your list tile and here you can also change the background color of the selected menu item and secondly i also want to change the foreground color therefore i simply wrap here this list our seam around and then i set the selected color again to white and with this we have here only the background color for determining the selection and finally we go inside of our list tiles on tap handler which is always called if we click then on another menu item and if we do this then we want to call our unselected item call back and here inside we put then the item and this is basically calling then here this unselected item and put simply our menu item inside on which we have clicked and now we can go back to our home page and here we get then every time the item on which we have clicked and we simply put then this item on which we have clicked inside of our current item in our state and this is then also going again back to our menu page and it will then simply redraw here then our menu with the current selection and with this i can click here on another menu item and this gets then here the selection and most importantly if we now click here on another menu item then we also want to navigate here to this new page therefore we simply go to our zoom drawer widget and here we want to replace then our main screen which is then here displayed on the right side and therefore i create a new method get screen and inside of this method we want to switch then over our current item so this is basically the menu item that we have currently selected and based on this item we want to display then the right page so if it is a payment item then we display the payment page and the same thing you also do then for each of your other menu items so for each menu item you decide then which page you want to display and with this i can switch here to another menu item and it displays then here this other page directly on the right side and lastly if we click on another menu item then we also want to close again our page and therefore you can simply go here inside of this unselected item so after we have selected an item then we want to close our soon draw again and to make this work you also need to wrap here around your menu page this builder widget so that we get here the right context for our zoom drawer let's also try it out if i click here another menu item then it is going to this individual page and i can simply go here then between all the different pages and finally you can also define in your zoom draw widget border radius to make it here at the top around it and now if i hot reload you see that our page is more rounded you also can change then the rotation angle so here i put it then to -10 however you can also change it like you want to have your angle to be next you can define the width of your menu therefore we take your 80 percent of the screen width and with this you see that our menu gets here 80 percent of the screen width and the rotation here of our page gets less of the space and you can also change it for example 50 so here you see that our menu gets here 50 of the space and lastly if you like you can also add here this page shadow and with this you see that our pages have here some shadow behind and it looks like we have here some pages behind it and you can also define here the color of this page behind so here i have set it to this orange color which is then here displayed and by the way if you want to get here this whole source code of this example 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 if you like this video make sure to subscribe to my youtube channel [Music]

Channel: HeyFlutter․com

Views: 37,672

Keywords: amazing ui in flutter, android, animation, drawer, drawer flutter, flutter, flutter animation, flutter drawer, flutter for beginners, flutter navigation drawer, flutter navigation drawer animation, flutter side drawer, flutter side navigation bar, flutter sidebar, flutter sidebar menu, flutter tutorial, flutter tutorial for beginners, flutter ui, ios, navigation bar, navigation drawer, navigation drawer flutter, sidebar, ui in flutter

Id: Evu19gTKaFo

Length: 9min 33sec (573 seconds)

Published: Mon Aug 30 2021