Flutter Navigation Drawer
The main goal of this blog is to make you understand usage and how “Navigation Drawer” is properly implemented from scratch.
Above is the goal that we are going to achieve step by step. This image contains 3 parts: Header, Body, and Footer. Each and every screen will have its own navigation method to travel on different screens.
To do so, we’ll be using the Drawer widget with the Scaffold to create a material design drawer.
Navigation Drawer
We’ll first focus on creating our sidebar Navigation Drawer.
In the /lib/widgets folder create a new file called navigation_drawer.dart which will have the below logic.
Navigation Drawer is a stateful widget, it’s old is a List of DrawerItem class in which children attribute we will nest the following elements:
- NavigationHeader(): According to our design account, we wanted our header to have a background image and also a text to hold the application’s name. Our navigation header() function will return a Drawer header. We have set the background image using BoxDecoration which holds AssetImage that we have added to our assets.
2. WidgetDrawerListItem(): This widget uses the view index for building a little widget as three parameters IconData for setting up icon, String text for heading name, and on tap, for calling individual screen. Here we have shown toast for individual screen names.
3. DrawerItem Class(): This class takes a parameter as an icon, text, and one enum for designing and showing an individual group of list items.
4. Types(enum): An enumeration is used for defining named constant values. An enumerated type is declared using the enum keyword. Here we have three types NORMAL, LINE, and CUSTOM.
5. HomeScreen: In the below code within the scaffold we have provided drawer property for the widget that we just created NavigationDrawer.
Conclusion:
Above is the deep-dive information about the flutter navigation drawer with the help of an example. Happy coding…
Get full code over here….
