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
zoomdrawercontrollerinside the main widget where ou have thezoomdrawerwidget 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),
)
