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>"

⚠ 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();
  }
}

📝 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,
    )

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;

• 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: 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,
    )

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.