Slide Drawer In Flutter

Abhishek Rathore

27 April 2023

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

flutter_slider_drawer: ^2.0.0

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.

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);
      });
}

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 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,

      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),
          ),
        )

        ,
      )

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

 _key.currentState.closeDrawer();
 _key.currentState.openDrawer();
 _key.currentState.toggle();
 _key.currentState.isDrawerOpen();

_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!!