Download this source code for
5 USD


Download this source code for
5 USD


Download this source code for
5 USD


Download this source code for
5 USD

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


Download this source code for
5 USD


Download this source code for
5 USD


Download this source code for
5 USD


Download this source code for
5 USD

Comments are closed.