In this blog, we will learn how to implement Slide Drawer In Flutter with a Flutter package. We will show a small demonstration to show how to integrate it into the Flutter application.
For implementing the Slide Drawer In Flutter, we will follow the mentioned steps
You may read more about our Flutter app development company page.
1. Add Slide Drawer Plugin
I have used the latest version, you can use any of the versions as per the uses from the dev console
|
1 |
flutter_slider_drawer: ^2.0.0 |
2. Create a Menu Widget Slider
Now, we will create the menu for a slider, I have created the menu with static details just to show the working of the demo application. You can create the menu as per your need like, with the API data.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
class MenuWidget extends StatelessWidget { final Function(String)? onItemClick; const MenuWidget({Key? key, this.onItemClick}) : super(key: key); @override Widget build(BuildContext context) { return Container( color: Colors.white, padding: const EdgeInsets.only(top: 50), child: Column( crossAxisAlignment: CrossAxisAlignment.center, children: <Widget>[ sliderItem('OPTION 1', Icons.holiday_village_outlined), sliderItem('OPTION 2', Icons.holiday_village_outlined), sliderItem('OPTION 2', Icons.holiday_village_outlined), sliderItem('OPTION 3', Icons.holiday_village_outlined), sliderItem('OPTION 4', Icons.holiday_village_outlined), sliderItem('OPTION 5', Icons.holiday_village_outlined) ], ), ); } Widget sliderItem(String title, IconData icons) => ListTile( title: Text( title, style: TextStyle(color: Colors.black, fontFamily: 'BalsamiqSans_Regular'), ), leading: Icon( icons, color: Colors.black, ), onTap: () { onItemClick!(title); }); } |
3. Now, create the main slider
In this step, we will create the slider and see how it’s working with the created menu,
You can use the SliderMenuContainer widget and use the header & menu widget inside the Slider Menu,
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
body: SliderMenuContainer( appBarPadding: EdgeInsets.fromLTRB(0,50,0,0), appBarColor: Colors.amber, key: _key, sliderMenuOpenSize: 200, sliderMenu: MenuWidget( onItemClick: (title) { _key.currentState!.closeDrawer(); setState(() { this.title=title; }); }, ), sliderMain: Center( child: Text( title, style: TextStyle(fontSize: 22, fontWeight: FontWeight.w700), ), ) , ) |
NOTE: SliderMenuContainer widget class contains multiple methods, which make it easy to use the Slider Drawer In Flutter. You can also use the following method to control the sliding drawer
|
1 2 3 4 |
_key.currentState.closeDrawer(); _key.currentState.openDrawer(); _key.currentState.toggle(); _key.currentState.isDrawerOpen(); |
OutPut:
In conclusion
In this blog, we have discussed Slide Drawer In Flutter
I hope it will help you out in understanding and get a brief idea about it.
You can also go through the Flutter Dev for more understanding
Thank you for reading!!
Be the first to comment.