flutter_zoom_drawer 3.0.3 icon indicating copy to clipboard operation
flutter_zoom_drawer: ^3.0.3 copied to clipboard

A Flutter package with custom implementation of the Side Menu (Drawer)

Flutter Zoom Drawer #

pub package License: MIT

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 #

Style 1 changed to defaultStyle #

Before merge: ZoomDrawer( style: DrawerStyle.style1, ) Now:

ZoomDrawer(
style: DrawerStyle.defaultStyle,
showShadow: true,
moveMenuScreen: false,
)

Style 2 changed to defaultStyle #

Before merge: ZoomDrawer( style: DrawerStyle.style2, ) Now: ZoomDrawer( style: DrawerStyle.defaultStyle, )

Style 3 changed to defaultStyle #

Before merge: ZoomDrawer( style: DrawerStyle.style3, ) Now: ZoomDrawer( style: DrawerStyle.defaultStyle, moveMenuScreen: false, )

Style 4 changed to Style 1 #

Style 5 changed to Style 2 #

Style 6 changed to Style 3 #

Style 7 changed to Style 4 #

Style 8 changed to defaultStyle #

Before merge: ZoomDrawer( style: DrawerStyle.style8, )

Now:

ZoomDrawer(
style: DrawerStyle.defaultStyle,
moveMenuScreen: false,
slideWidth: MediaQuery.of(context).screenWidth * 0.5 // set slideWidth
)

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

| ------------------------------ | ---------------------- | :------: | ------------------------------------------------------------------------------- | --- | | 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 | | 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] |

Controlling the drawer #

To get access to the drawer, and be able to control it, there are 2 ways:

  • Using a ZoomDrawerController inside the main widget where ou 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 #

Example app Demo

Example RTL Demo

  • 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

  • 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

  • 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

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

Drawer Sliding with rotation and shadows

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.

762
likes
130
pub points
98%
popularity

Publisher

verified publisher iconmedyas.ml

A Flutter package with custom implementation of the Side Menu (Drawer)

Repository (GitHub)

Documentation

API reference

License

Icon for licenses.MIT (LICENSE)

Dependencies

flutter

More

Packages that depend on flutter_zoom_drawer