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
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),
)
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.
29 Nov 27, 2022
22 Oct 16, 2022
11 Nov 4, 2022
39 Nov 14, 2022
18 Oct 27, 2022
46 Dec 17, 2022
29 Nov 23, 2022
3 Nov 21, 2021
88 Dec 14, 2022
450 Jan 6, 2023
6 Jan 6, 2022
5 Aug 31, 2022
18 Jul 27, 2022
12 Oct 22, 2022
0 Nov 4, 2021
0 Nov 30, 2021
3 Dec 13, 2021
0 Nov 26, 2021
0 Nov 27, 2021