GitLocker: The Coding Marketplace

Description:

flutter zoom drawer

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>"
copied to clipboard
⚠ Version 3 Breaking Changes for Style #

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

💪 Features #

Simple sliding drawer
Sliding drawer with shadows
Sliding drawer with rotation
Sliding drawer with rotation and shadows
Support for both LTR & RTL

📌 Simple Example (Thanks to @JesusHdezWaterloo) #
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();
}
}
copied to clipboard
📝 Documentation #
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,
)
copied to clipboard

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]

🕹️ Drawer Usage #
To use the drawer, and be able to control it, there are 2 ways:

Using a ZoomDrawerController inside the main widget where you 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;
copied to clipboard

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;
copied to clipboard
Screens #

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,
)
copied to clipboard

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,
)
copied to clipboard

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,
)
copied to clipboard

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,
)
copied to clipboard

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.