A Flutter package with custom implementation of the Side Menu (Drawer)
To start using this package, add flutter_zoom_drawer dependency to your pubspec.yaml
dependencies:
flutter_zoom_drawer: "<latest_release>"| Old Style | New Style |
|---|---|
DrawerStyle.style1 |
DrawerStyle.defaultStyle |
DrawerStyle.style2 |
DrawerStyle.defaultStyle |
DrawerStyle.style3 |
DrawerStyle.defaultStyle |
DrawerStyle.style4 |
DrawerStyle.style1 |
DrawerStyle.style5 |
DrawerStyle.style2 |
DrawerStyle.style6 |
DrawerStyle.style3 |
DrawerStyle.style7 |
DrawerStyle.style4 |
- Simple sliding drawer
- Sliding drawer with shadows
- Sliding drawer with rotation
- Sliding drawer with rotation and shadows
- Support for both LTR & RTL
import 'package:flutter/material.dart';
import 'package:flutter_zoom_drawer/flutter_zoom_drawer.dart';
import 'package:get/get.dart';
void main() {
Get.put<MyDrawerController>(MyDrawerController());
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Zoom Drawer Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: MyHomePage(),
);
}
}
class MyHomePage extends GetView<MyDrawerController> {
@override
Widget build(BuildContext context) {
return GetBuilder<MyDrawerController>(
builder: (_) => ZoomDrawer(
controller: _.zoomDrawerController,
menuScreen: MenuScreen(),
mainScreen: MainScreen(),
borderRadius: 24.0,
showShadow: true,
angle: -12.0,
drawerShadowsBackgroundColor: Colors.grey,
slideWidth: MediaQuery.of(context).size.width * 0.65,
),
);
}
}
class MenuScreen extends GetView<MyDrawerController> {
const MenuScreen({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Container(
color: Colors.yellow,
);
}
}
class MainScreen extends GetView<MyDrawerController> {
const MainScreen({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Container(
color: Colors.pink,
child: Center(
child: ElevatedButton(
onPressed: controller.toggleDrawer,
child: Text("Toggle Drawer"),
),
),
);
}
}
class MyDrawerController extends GetxController {
final zoomDrawerController = ZoomDrawerController();
void toggleDrawer() {
print("Toggle drawer");
zoomDrawerController.toggle?.call();
update();
}
} ZoomDrawer(
controller: ZoomDrawerController,
style: DrawerStyle.defaultStyle,
menuScreen: MenuScreen(),
mainScreen: MainScreen(),
borderRadius: 24.0,
showShadow: true,
angle: -12.0,
drawerShadowsBackgroundColor: 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 |
slideHeight |
double |
No | Sliding height of the drawer - defaults to 0.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 |
drawerShadowsBackgroundColor |
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 |
mainScreenTapClose |
bool |
No | Close drawer when tapping mainScreen |
mainScreenOverlayColor |
Color |
No | Color of the main screen's cover overlay |
overlayBlend |
BlendMode |
No | The BlendMode of the mainScreenOverlayColor filter (default BlendMode.screen) |
boxShadow |
BoxShadow |
No | The Shadow of the mainScreenContent |
overlayBlur |
double |
No | The Blur amount of the mainScreen option |
shrinkMainScreen |
bool |
No | Shrinks the mainScreen by [slideWidth], good on desktop with Style2 |
drawerStyleBuilder |
DrawerStyleBuilder |
No | Build custom animated style to override [DrawerStyle] |
To use the drawer, and be able to control it, there are 2 ways:
- Using a
ZoomDrawerControllerinside the main widget where you 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;- Drawer Sliding
ZoomDrawer(
controller: ZoomDrawerController,
menuScreen: MenuScreen(),
mainScreen: MainScreen(),
borderRadius: 24.0,
showShadow: false,
angle: 0.0,
drawerShadowsBackgroundColor: Colors.grey[300],
slideWidth: MediaQuery.of(context).size.width * 0.65,
)- Drawer Sliding with shadow
ZoomDrawer(
controller: ZoomDrawerController,
menuScreen: MenuScreen(),
mainScreen: MainScreen(),
borderRadius: 24.0,
showShadow: true,
angle: 0.0,
drawerShadowsBackgroundColor: Colors.grey[300],
slideWidth: MediaQuery.of(context).size.width * 0.65,
)- Drawer Sliding with rotation
ZoomDrawer(
controller: ZoomDrawerController,
menuScreen: MenuScreen(),
mainScreen: MainScreen(),
borderRadius: 24.0,
showShadow: false,
angle: -12.0,
drawerShadowsBackgroundColor: Colors.grey[300],
slideWidth: MediaQuery.of(context).size.width * 0.65,
)- Drawer Sliding with rotation and shadows
ZoomDrawer(
controller: ZoomDrawerController,
menuScreen: MenuScreen(),
mainScreen: MainScreen(),
borderRadius: 24.0,
showShadow: true,
angle: -12.0,
drawerShadowsBackgroundColor: Colors.grey[300],
slideWidth: MediaQuery.of(context).size.width * 0.65,
)Please file any issues, bugs or feature request as an issue on our GitHub page.
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 goes to pedromassango as most of this package comes from his implementation.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent