hidden drawer menu

hidden drawer menu is a library for adding a beautiful drawer mode menu feature with perspective animation.

you can use a pre-defined menu or make a fully customized menu.

download apk example

use with default menu

import 'package:hidden_drawer_menu/hidden_drawer/hidden_drawer_menu.dart';

void main() => runapp(myapp());

class myapp extends statelesswidget {
  @override
  widget build(buildcontext context) {
    return materialapp(
      theme: themedata(
        primaryswatch: colors.blue,
      ),
      home: myhomepage(),
    );
  }
}

class myhomepage extends statefulwidget {
  myhomepage({key key}) : super(key: key);

  @override
  _myhomepagestate createstate() => _myhomepagestate();
}

class _myhomepagestate extends state<myhomepage> {
  list<screenhiddendrawer> itens = new list();

  @override
  void initstate() {
    itens.add(new screenhiddendrawer(
        new itemhiddenmenu(
          name: "screen 1",
          basestyle: textstyle( color: colors.white.withopacity(0.8), fontsize: 28.0 ),
          colorlineselected: colors.teal,
        ),
        firstsreen()));

    itens.add(new screenhiddendrawer(
        new itemhiddenmenu(
          name: "screen 2",
          basestyle: textstyle( color: colors.white.withopacity(0.8), fontsize: 28.0 ),
          colorlineselected: colors.orange,
        ),
        secondsreen()));

    super.initstate();
  }

  @override
  widget build(buildcontext context) {

    return hiddendrawermenu(
      backgroundcolormenu: colors.bluegrey,
      backgroundcolorappbar: colors.cyan,
      screens: itens,
        //    typeopen: typeopen.from_right,
        //    enablescaleanimin: true,
        //    enablecorneranimin: true,
        //    slidepercent: 80.0,
        //    verticalscalepercent: 80.0,
        //    contentcornerradius: 10.0,
        //    iconmenuappbar: icon(icons.menu),
        //    backgroundcontent: decorationimage((image: exactassetimage('assets/bg_news.jpg'),fit: boxfit.cover),
        //    whithautotittlename: true,
        //    styleautotittlename: textstyle(color: colors.red),
        //    actionsappbar: <widget>[],
        //    backgroundcolorcontent: colors.blue,
        //    elevationappbar: 4.0,
        //    tittleappbar: center(child: icon(icons.ac_unit),),
        //    enableshadowitensmenu: true,
        //    backgroundmenu: decorationimage(image: exactassetimage('assets/bg_news.jpg'),fit: boxfit.cover),
    );
    
  }
}

use with full customization menu

import 'package:hidden_drawer_menu/hidden_drawer/hidden_drawer_menu.dart';

void main() => runapp(myapp());

class myapp extends statelesswidget {
  // this widget is the root of your application.
  @override
  widget build(buildcontext context) {
    return materialapp(
      theme: themedata(
        primaryswatch: colors.blue,
      ),
      home: simplehiddendrawer(
        menu: menu(),
        screenselectedbuilder: (position,controller) {
          
          widget screencurrent;
          
          switch(position){
            case 0 : screencurrent = screen1(); break;
            case 1 : screencurrent = screen2(); break;
            case 2 : screencurrent = screen3(); break;
          }
          
          return scaffold(
            backgroundcolor: backgroundcolorcontent,
            appbar: appbar(
              leading: iconbutton(
                  icon: icon(icons.menu),
                  onpressed: () {
                    controller.toggle();
                  }),
            ),
            body: screencurrent,
          );
          
        },
      ),
    );
  }
}

class menu extends statefulwidget {
  @override
  _secondsreenstate createstate() => _menustate();
}

class _menustate extends state<secondsreen> {
  @override
  widget build(buildcontext context) {
    return container(
      width: double.maxfinite,
      height: double.maxfinite,
      color: colors.cyan,
      padding: const edgeinsets.all(8.0),
      child: center(
        child: column(
          mainaxissize: mainaxissize.min,
          children: <widget>[
            raisedbutton(
              onpressed: () {
                simplehiddendrawerprovider.of(context)
                    .setselectedmenuposition(0);
              },
              child: text("menu 1"),
            ),
            raisedbutton(
                onpressed: () {
                  simplehiddendrawerprovider.of(context)
                      .setselectedmenuposition(1);
                },
                child: text("menu 2"))
          ],
        ),
      ),
    );
  }
}

actions

this actions is only accessible by the children of hiddendrawermenu or simplehiddendrawer.

select item menu

simplehiddendrawerprovider.of(context).setselectedmenuposition(0);

toggle menu (if opened will close, if closed will open)

simplehiddendrawerprovider.of(context).toggle();

listen selected position

simplehiddendrawerprovider.of(context).getpositionselectedlistener().listen((position){
  print(position);
});

listen to menu status (closed,opening,open,closing)

simplehiddendrawerprovider.of(context).getmenustatelistener().listen((state){
  print(state);
});

if you want to use only the widget responsible for the animation, it is now available as animateddrawercontent

hiddendrawercontroller controller = hiddendrawercontroller(vsync: this);

return animateddrawercontent(
  controller: controller,
  whithpaddingtop: false, //(optional) default = false // add padding top in de gesture equals heigth of the appbar
  whithshadow: false, //(optional) default = false
  isdraggable: true, //(optional) default = true
  child: screen(),
);

you can control actions by controller such as:

controller.toggle() // open or close
controller.open()
controller.close()
controller.move(percent) // moves to a specific position from 0 to 1 (0 = fully enclosed, 1 = fully opened)

available settings

menu

• change backgroundcolor
• set decorationimage backgroud
• enable shadow above itens

itens menu

• change colortext when selected
• change colortext when unselected
• change color lineleft selected

appbar

• change menu icon
• change elavation
• change backgroundcolor
• set autotittlename
• set actions
• set widget in tittleappbar

content

• change backgroundcolor
• enable dragable
• change curve animation