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.

Use with default menu

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",
          colorTextUnSelected: Colors.white.withOpacity(0.5),
          colorLineSelected: Colors.teal,
        ),
        FirstSreen()));

    itens.add(new ScreenHiddenDrawer(
        new ItemHiddenMenu(
          name: "Screen 2",
          colorTextUnSelected: Colors.white.withOpacity(0.5),
          colorLineSelected: Colors.orange,
        ),
        SecondSreen()));

    super.initState();
  }

  @override
  Widget build(BuildContext context) {

    return HiddenDrawerMenu(
      backgroundColorMenu: Colors.blueGrey,
      backgroundColorAppBar: Colors.cyan,
      screens: itens,
    );
    
  }
}

Use with full customization menu

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(
        whithAutoTittleName: true,
        menu: Menu(),
        screenSelectedBuilder: (position) {
          switch(position){
            case 0 : return Screen1(); break;
            case 1 : return Screen2(); break;
            case 2 : return Screen3(); break;
          }
        },
      ),
    );
  }
}

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

Listern position selected in menu

SimpleHiddenDrawerProvider.of(context).getPositionSelectedListern().listen((position){
  print(position);
});

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