swipeable_drawer_layout 0.0.5

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

---

🚀 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),
      mainBorderRadius: 24.0,
      secondaryBorderRadius: 24.0,
      backgroundColor: Colors.black,
    );
  }
}

---

🎮 Programmatic Control

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

// Open the drawer
_controller.open();

// Close the drawer
_controller.close();

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

---

⚙️ Configuration Options

Parameter	Type	Default	Description
mainScreen	Widget	Required	The primary foreground screen widget.
secondaryScreen	Widget	Required	The menu/drawer screen widget shown behind.
controller	SwipeableDrawerController?	null	Controller for programmatic open, close, and toggle operations.
direction	DrawerDirection	leftToRight	Swipe gesture direction (leftToRight, rightToLeft, topToBottom, bottomToTop).
animationDuration	Duration	Duration(ms: 300)	Speed of the slide and scale transition animation.
mainBorderRadius	double	50.0	Corner radius applied to mainScreen when opened.
secondaryBorderRadius	double	50.0	Corner radius applied to secondaryScreen.
secondaryInitialScale	double	0.92	Initial scale factor of secondaryScreen when drawer is closed.
backgroundColor	Color	Colors.black	Background color visible behind the screens during transition.
enableGesture	bool	true	Whether drag/swipe gestures are enabled to control the drawer.

---

📄 License

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