Drawer Pro

Pub License: MIT Flutter

A high-performance Parallax Slide Drawer for Flutter, inspired by premium UIs in Gemini, ChatGPT, and Marks.

Demo

✨ Features

  • 🚀 60 FPS Smooth Animation - Optimized with RepaintBoundary
  • 🎨 Stunning Parallax Effect - Depth-based slide motion
  • 🛠 100% Customizable - Shadows, width, curves, duration
  • 📱 Cross-Platform - Android, iOS, Web ✅
  • ⚡ Zero Dependencies - Lightweight & fast
  • 🎯 Easy Integration - Drop-in replacement for Scaffold drawer

Usage

DrawerPro(
  drawer: Container(
    color: const Color(0xFF1E1E1E), 
    child: ListView(
      padding: const EdgeInsets.all(20),
      children: const [
        DrawerHeader(
          child: Text("My Drawer Pro", style: TextStyle(color: Colors.white, fontSize: 24)),
        ),
        ListTile(
          leading: Icon(Icons.chat_bubble, color: Colors.white),
          title: Text("Chat", style: TextStyle(color: Colors.white)),
        ),
        ListTile(
          leading: Icon(Icons.settings, color: Colors.white),
          title: Text("Settings", style: TextStyle(color: Colors.white)),
        ),
      ],
    ),
  ),
  child: Scaffold(
    appBar: AppBar(
      title: const Text("Drawer Pro Demo"),
      leading: Builder(
        builder: (context) => IconButton(
          icon: const Icon(Icons.menu),
          onPressed: () => DrawerPro.of(context)?.open(),
        ),
      ),
    ),
    body: const Center(child: Text("Swipe from left or click menu!")),
  ),
)

Check the example/lib/main.dart folder for a complete runnable example.

📦 Installation

  1. Add to pubspec.yaml:
dependencies:
  drawer_pro:  <latest-version>
  1. Install
flutter pub get

Platform Support

Platform Status
Android ✅
iOS ✅
Web ✅
macOS ✅
Windows ✅
Linux ✅

Key Properties

Property Type Default Description
drawerWidth double 300 Drawer slide width
slideDuration Duration 250ms Animation duration
curve Curve easeOutCubic Animation curve
shadowColor Color Colors.black26 Overlay shadow
shadowOpacity double 0.3 Shadow intensity

🎨 Customization Tips

  • Wide drawer: drawerWidth: MediaQuery.of(context).size.width * 0.8
  • Fast slide: slideDuration: const Duration(milliseconds: 150)
  • Bounce effect: curve: Curves.bounceOut
  • Dark theme: shadowColor: Colors.black54

Need Help?

For questions, issues, or feature requests, create an issue on GitHub or reach out via the GitHub Discussions tab. Create an issue

Author

Anish Dandapat LinkedIn

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

Libraries

drawer_pro