Flutter Zoom Drawer

A Flutter package with custom implementation of the Side Menu (Drawer)

Getting Started

To start using this package, add flutter_zoom_drawer dependency to your pubspec.yaml

dependencies:
  flutter_zoom_drawer: '<latest_release>'

Features

Simple sliding drawer
Sliding drawer with shadows
Sliding drawer with rotation
Sliding drawer with rotation and shadows
Support for both LTR & RTL

Documentation

    ZoomDrawer(
      controller: ZoomDrawerController,
      style: DrawerStyle.DefaultStyle,
      menuScreen: MENU_SCREEN,
      mainScreen: MAIN_SCREEN,
      borderRadius: 24.0,
      showShadow: true,
      angle: -12.0,
      backgroundColor: Colors.grey[300],
      slideWidth: MediaQuery.of(context).size.width*.65,
      openCurve: Curves.fastOutSlowIn,
      closeCurve: Curves.bounceIn,
    )

Parameters	Value	Required	Docs
`controller`	`ZoomDrawerController`	No	Controller to have access to the open/close/toggle function of the drawer
`style`	`DrawerStyle`	No	the drawer style to be displayed (check the `DrawerStyle` enum)
`mainScreen`	`Widget`	Yes	Screen containing the main content to display
`menuScreen`	`Widget`	Yes	Screen containing the menu/bottom screen
`slideWidth`	`double`	No	Sliding width of the drawer - defaults to 275.0
`mainScreenScale`	`double`	No	MainScreen scale - defaults to 0.3
`borderRadius`	`double`	No	Border radius of the slided content - defaults to 16.0
`angle`	`double`	No	Rotation angle of the drawer - defaults to -12.0 - should be 0.0 to -30.0
`disableGesture`	`bool`	No	Disable the home page swipe to open drawer gesture - defaults to `false`
`backgroundColor`	`Color`	No	Background color of the drawer shadows - defaults to white
`showShadow`	`bool`	No	Boolean, whether to show the drawer shadows - defaults to false
`isRtl`	`bool`	No	Boolean, display the drawer in RTL
`openCurve`	`Curve`	No	open animation curve - defaults to `Curves.easeOut`
`closeCurve`	`Curve`	No	close animation curve - defaults to `Curves.easeOut`

Controlling the drawer

To get access to the drawer, and be able to control it, there are 2 ways:

Using a ZoomDrawerController inside the main widget where ou have the ZoomDrawer widget and providing it to the widget, which will allow you to trigger the open/close/toggle methods.

    final _drawerController = ZoomDrawerController();

    _drawerController.open();
    _drawerController.close();
    _drawerController.toggle();
    _drawerController.isOpen();
    _drawerController.stateNotifier;

Using the static method inside ancestor widgets to get access to the ZoomDrawer.

  ZoomDrawer.of(context).open();
  ZoomDrawer.of(context).close();
  ZoomDrawer.of(context).toggle();
  ZoomDrawer.of(context).isOpen();
  ZoomDrawer.of(context).stateNotifier;

Screens

Drawer Sliding

    ZoomDrawer(
      controller: ZoomDrawerController,
      menuScreen: MENU_SCREEN,
      mainScreen: MAIN_SCREEN,
      borderRadius: 24.0,
      showShadow: false,
      angle: 0.0,
      backgroundColor: Colors.grey[300],
      slideWidth: MediaQuery.of(context).size.width*(ZoomDrawer.isRTL()? .45: 0.65),
    )

Drawer Sliding with shadow

    ZoomDrawer(
      controller: ZoomDrawerController,
      menuScreen: MENU_SCREEN,
      mainScreen: MAIN_SCREEN,
      borderRadius: 24.0,
      showShadow: true,
      angle: 0.0,
      backgroundColor: Colors.grey[300],
      slideWidth: MediaQuery.of(context).size.width*(ZoomDrawer.isRTL()? .45: 0.65),
    )

Drawer Sliding with rotation

    ZoomDrawer(
      controller: ZoomDrawerController,
      menuScreen: MENU_SCREEN,
      mainScreen: MAIN_SCREEN,
      borderRadius: 24.0,
      showShadow: false,
      angle: -12.0,
      backgroundColor: Colors.grey[300],
      slideWidth: MediaQuery.of(context).size.width*(ZoomDrawer.isRTL()? .45: 0.65),
    )

Drawer Sliding with rotation and shadows

    ZoomDrawer(
      controller: ZoomDrawerController,
      menuScreen: MENU_SCREEN,
      mainScreen: MAIN_SCREEN,
      borderRadius: 24.0,
      showShadow: true,
      angle: -12.0,
      backgroundColor: Colors.grey[300],
      slideWidth: MediaQuery.of(context).size.width*(ZoomDrawer.isRTL()? .45: 0.65),
    )

Issues

Please file any issues, bugs or feature request as an issue on our GitHub page.

Want to contribute

If you would like to contribute to the plugin (e.g. by improving the documentation, solving a bug or adding a cool new feature), please carefully review our contribution guide and send us your pull request.

Credits

Credits goes to pedromassango as most of this package comes from his implementation.

thruthesky/flutter_zoom_drawer