ProDrawer — Animated Drawer for Flutter

In this article, we will explore the ProDrawer package in Flutter. With the help of this package, we can easily achieve an animated and beautiful custom swappable drawer.

GitHub - shaon2016/ProDrawer: A pro-level animated and customizable drawer for your flutter apps.

Demo Module

Ok, let’s play with it gently. otherwise, it will break. Don’t be serious, I am just kidding.

Implementation

Add this below line in your pubsecyaml file

dependencies:
  pro_drawer: ^0.0.3

Now in your Dart code, you can use:

import 'package:pro_drawer/pro_drawer.dart';

Let’s see it in action. Ok, not cinematic-type action.

I will fire if you don’t use this 😆

class LandingScreen extends StatelessWidget {
  const LandingScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const ProDrawer(
      xOffset: 250, // distance of loaded page from the left, when drawer open..
      drawerHeader:  ProDrawerHeader(), // Drawer header UI
      drawerBackgroundColor: Color(0xfff6f6f6),
      drawerBody:   DrawerBody(), // Drawer menu body
      initialPage:  HomeScreen(), // Initial page to load
      drawerAnimationDuration: Duration(milliseconds: 300), // Drawer open close animation
    );
  }
} 

import 'package:flutter/material.dart';
class DrawerMenu {
  final Widget icon;
  final String title;
  Widget? screen;
DrawerMenu({required this.icon, required this.title, this.screen});
}

well, to work with the drawer menu, you have to use the above model class, which is free 😆 with this package. Follow the example (Check Github link).

What can you do with this library? Do you have this question? I have an answer for you.

You can design a fixed header for your drawer using drawer header and a fixed footer using footer section. So, Drawer items will be scrollable in the middle of them.

More customization will be added in the future. In the meantime, keep using it and if anyone faces a problem, open an issue at Github.

Thanks for bearing me.