Drawer Mode Menu Feature with Animation in Flutter

You are currently viewing Drawer Mode Menu Feature with Animation in Flutter
Drawer Menu

Drawer Mode Menu Feature with Animation in Flutter

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

import 'package:hidden_drawer_menu/model/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,
        //    disableAppBarDefault: false,
        //    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/model/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> {

  SimpleHiddenDrawerController controller;

  @override
  void didChangeDependencies() {
    controller = SimpleHiddenDrawerController.of(context);
    super.didChangeDependencies();
  }

  @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: () {
                controller.setSelectedMenuPosition(0);
              },
              child: Text("Menu 1"),
            ),
            RaisedButton(
              onPressed: () {
                controller.setSelectedMenuPosition(1);
              },
              child: Text("Menu 2"),
            )
          ],
        ),
      ),
    );
  }
}

Actions

This actions is only accessible by the children of HiddenDrawerMenu or SimpleHiddenDrawer.

See also  Flutter Drawer Menu Example

Select item menu

SimpleHiddenDrawerController.of(context).setSelectedMenuPosition(0);

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

SimpleHiddenDrawerController.of(context).toggle();

Open

SimpleHiddenDrawerController.of(context).open();

Close

SimpleHiddenDrawerController.of(context).close();

Listen selected position

final controller = SimpleHiddenDrawerController.of(context);
controller.addListener((){
  print(controller.position);
});

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

final controller = SimpleHiddenDrawerController.of(context);
controller.addListener((){
  print(controller.state);
});

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

AnimatedDrawerController controller = AnimatedDrawerController(
  vsync: this,
  animationCurve:Curves.decelerate,
  duration:const Duration(milliseconds: 350,
);

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 items
See also  Implement Animated Side Drawer in Flutter

Items 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

Credits:
This is developed by RafaelBarbosatec
Download this project from the below link.
https://github.com/RafaelBarbosatec/hidden_drawer_menu/archive/refs/heads/master.zip
You can visit original source page from the below link:
https://github.com/RafaelBarbosatec/hidden_drawer_menu

Spread the love

Leave a Reply