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

68747470733a2f2f64726976652e676f6f676c652e636f6d2f75633f6578706f72743d766965772669643d317863365877565674706c30524b39494a4564686561674d346431796368516d73

68747470733a2f2f64726976652e676f6f676c652e636f6d2f75633f6578706f72743d766965772669643d31594c4336307a4a364e3633375042364951446f3454495859317147534a324554

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

68747470733a2f2f64726976652e676f6f676c652e636f6d2f75633f6578706f72743d766965772669643d3161787554344765683038735f516a6d45443956545a69775a3964435f43313743

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

68747470733a2f2f64726976652e676f6f676c652e636f6d2f75633f6578706f72743d766965772669643d31564e6b5567746a5f6268795967574a5f427333795570564e554a3330546f504c

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

68747470733a2f2f64726976652e676f6f676c652e636f6d2f75633f6578706f72743d766965772669643d317856596f5a486e5339424669354b69635a745033445931764569775a34467948

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

68747470733a2f2f64726976652e676f6f676c652e636f6d2f75633f6578706f72743d766965772669643d31622d55323574495933366b6137354a75326a5154394249555648762d6f4e6536

GitHub

https://github.com/medyas/flutter_zoom_drawer