swipeable_drawer_layout 0.0.2

A customizable swipeable drawer layout widget for Flutter supporting 4-way swipe directions and programmatic control.

🚀 Swipeable Drawer Layout

A lightweight, highly customizable 3D and zoom swipeable drawer layout package for Flutter. Built purely with native Flutter widgets (zero external dependencies), it supports 4-way swipe directions and programmatic control.

---

✨ Features

• 🌟 4-Way Swipe Directions: Supports dragging from all four screen edges:
  • DrawerDirection.leftToRight
  • DrawerDirection.rightToLeft
  • DrawerDirection.topToBottom
  • DrawerDirection.bottomToTop
• 🎮 Programmatic Control: Seamlessly open, close, or toggle the drawer state using SwipeableDrawerController.
• 🎨 Smooth Animations: High-performance 3D zoom effects, scaling, and customizable border radius during transitions.
• ⚡ Zero External Dependencies: Pure Flutter implementation ensuring max compatibility and keeping your app footprint minimal.
• 🎛️ Highly Customizable: Control animation speed, overlay opacity, background colors, drag sensitivity, and more.

---

📦 Installation

Add swipeable_drawer_layout to your pubspec.yaml dependencies:

dependencies:
  swipeable_drawer_layout: ^0.0.1

---

🚀 Quick Start

Using SwipeableDrawerLayout in your app is straightforward:

import 'package:flutter/material.dart';
import 'package:swipeable_drawer_layout/swipeable_drawer_layout.dart';

class HomeScreen extends StatefulWidget {
  const HomeScreen({super.key});

  @override
  State<HomeScreen> createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  // 1. Initialize the Controller
  final SwipeableDrawerController _controller = SwipeableDrawerController();

  @override
  void dispose() {
    // 2. Remember to dispose of the controller!
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return SwipeableDrawerLayout(
      controller: _controller,
      direction: DrawerDirection.leftToRight,
      // The screen shown behind when the drawer opens
      secondaryScreen: const DrawerMenuScreen(),
      // The main content screen
      mainScreen: MainContentScreen(controller: _controller),
      // Optional styling parameters
      animationDuration: const Duration(milliseconds: 300),
      borderRadius: 24.0,
      backgroundColor: Colors.black,
    );
  }
}

---

🎮 Programmatic Control

You can control the drawer state programmatically from anywhere in your code:

// Open the drawer
_controller.openDrawer();

// Close the drawer
_controller.closeDrawer();

// Toggle the drawer (Open if closed, Close if opened)
_controller.toggleDrawer();

---

⚙️ Configuration Options

Parameter	Type	Default	Description
controller	SwipeableDrawerController?	null	Controller for programmatic open/close operations.
direction	DrawerDirection	leftToRight	Swipe gesture direction (leftToRight, rightToLeft, topToBottom, bottomToTop).
mainScreen	Widget	Required	The primary screen widget.
secondaryScreen	Widget	Required	The menu/drawer screen widget shown behind.
borderRadius	double	20.0	Corner radius applied to mainScreen when opened.
animationDuration	Duration	Duration(ms: 300)	Speed of the slide and scale animation.
backgroundColor	Color	Colors.black	Background color visible behind the scaled main screen.

---

📄 License

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