Flutterexperts

In this article, we will explore the ZoomDrawer in flutter using the fluter_zoom_drawer_package. With the help of the package, we can easily achieve flutter animated Swiper. So let’s get started.

flutter_zoom_drawer | Flutter Package
A Flutter package with custom implementation of the Side Menu (Drawer) To start using this package, add…pub.dev

---

Table Of Contents :

Flutter

Zoom Drawer

Implementation

Code Implement

Code File

Conclusion

---

Futter :

“ Flutter is Google’s UI toolkit that helps you build beautiful and natively combined applications for mobile, web, and desktop in a single codebase in record time, Flutter offers great developer tools, with amazing hot reload”

Zoom Drawer :

The ZoomDrawer is a library for adding a beautiful slide drawer mode menu feature with menu animations. Using this, we can make it a completely customized menu as per our requirement, we can use many types of sliders in the zoom drawer package.

Some Basic Properties:

• controller — The controller uses the property to control the position of his children.
• mainScreen — The main screen property is like the home screen in a zoom drawer.
• menuScreen — In the menu screen, we rotate the screen of all our drawers at the click of a menu item.
• borderRadius — We use the border-radius property to change the radius of the slide.
• backgroundColor—We use the background property to give the background color of the drawer shade
• showShadow — Boolean, whether to show the drawer shadows — defaults to false.

Demo Module :

Implementation :

Step 1: Add the dependencies

Add dependencies to pubspec — yaml file.

dependencies :

dependencies:   
flutter_zoom_drawer: ^2.0.0

Step 2: Importing

import 'package:flutter_zoom_drawer/flutter_zoom_drawer.dart';

Step 3: Run flutter package get

Code Implementation :

Create a new dart file called flutter__zoom_drawer_demo.dart inside the libfolder.

First of all, we will create a zoom drawer controller, we will initialize it under the name drawerController.

final _drawerController = ZoomDrawerController();

A class with a menu item name is created for the menu item list.

class MenuItem {
  String title;
  IconData icon;
  MenuItem(this.icon, this.title);
}

Now we will create a list in which we will define the list of menu items.

final List<MenuItem> options = [
  MenuItem(Icons.payment, 'Payments'),
  MenuItem(Icons.favorite, 'Discounts'),
  MenuItem(Icons.notifications, 'Notification'),
  MenuItem(Icons.format_list_bulleted, 'Orders'),
  MenuItem(Icons.help, 'Help'),
];

In this screen, we have created a class named MenuScreen inside which a list of menu items is created which contains the item name and icon and a new page opens when the item is clicked. and we will initialize this class in the main screen property of the zoom drawer.

ZoomDrawer(
 menuScreen: MenuScreen(),
),

When we run the application, we ought to get the screen’s output like the underneath screen capture.

Now we are showing the main screen, inside which we can pass some content and widgets, we will initialize this class in the main screen property of the zoom drawer class.

ZoomDrawer(
  mainScreen: MainScreen(),
),

When we run the application, we ought to get the screen’s output like the underneath screen capture.

Code File:

import 'package:flutter/material.dart';
import 'package:flutter_zoom_drawer/flutter_zoom_drawer.dart';
import 'package:flutter_zoom_drawer_demo/view/main_screen.dart';
import 'package:flutter_zoom_drawer_demo/view/menu_screen.dart';

class FlutterZoomDrawerDemo extends StatefulWidget {
  @override
  _FlutterZoomDrawerDemoState createState() => _FlutterZoomDrawerDemoState();
}

class _FlutterZoomDrawerDemoState extends State<FlutterZoomDrawerDemo> {
  final _drawerController = ZoomDrawerController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ZoomDrawer(
        controller: _drawerController,
        style: DrawerStyle.Style1,
        menuScreen: MenuScreen(),
        mainScreen: MainScreen(),
        borderRadius: 24.0,
        showShadow: true,
        angle: 0.0,
        backgroundColor: Colors.grey[300],
        slideWidth: MediaQuery.of(context).size.width *
            (ZoomDrawer.isRTL() ? .45 : 0.65),
        openCurve: Curves.fastOutSlowIn,
        closeCurve: Curves.bounceIn,
      ),
    );
  }
}

Conclusion:

In this flutter article, I have explained a ZoomDrawer in a flutter, which you can modify and experiment with according to your own, this little introduction was from the ZoomDrawer demo from our side.

I hope this blog will provide you with sufficient information in Trying up the ZoomDrawer in your flutter project. We will show you the ZoomDrawer is?, and work on it in your flutter applications, So please try it.

❤ ❤ Thanks for reading this article ❤❤

If I got something wrong? Let me know in the comments. I would love to improve.

Clap 👏 If this article helps you.

---

Feel free to connect with us
And read more articles from FlutterDevs.com.

FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire a flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! You can connect with us on Facebook, GitHub, Twitter, and LinkedIn for any flutter-related queries.

We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences.

---