drawer_pro 0.0.4

A high-performance, parallax slide drawer inspired by Gemini, ChatGPT, and Marks. Features smooth 60fps animations, custom curves, and effortless integration.

Drawer Pro

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

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

2. 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.