flutter_zoom_drawer 1.0.4

Flutter Android iOS web

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

Flutter Zoom Drawer #

pub package License: MIT

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,
      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,
    )
ParametersValueRequiredDocs
controllerZoomDrawerControllerNoController to have access to the open/close/toggle function of the drawer
mainScreenWidgetYesScreen containing the menu/bottom screen
menuScreenWidgetYesScreen containing the main content to display
slideWidthdoubleNoSliding width of the drawer - defaults to 275.0
borderRadiusdoubleNoBorder radius of the slided content - defaults to 16.0
angledoubleNoRotation angle of the drawer - defaults to -12.0 - should be 0.0 to -30.0
backgroundColorColorNoBackground color of the drawer shadows - defaults to white
showShadowboolNoBoolean, whether to show the drawer shadows - defaults to false
openCurveCurveNoopen animation curve - defaults to Curves.easeOut
closeCurveCurveNoclose 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 #

Example app Demo

Example RTL Demo

  • 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

  • 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

  • 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

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

Drawer Sliding with rotation and shadows

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.

83
likes
100
pub points
86%
popularity

Publisher

medyas.ml

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

Repository (GitHub)
View/report issues

Documentation

API reference

License

MIT (LICENSE)

Dependencies

flutter

More

Packages that depend on flutter_zoom_drawer