🚀 Swipeable Drawer Layout

Swipeable Drawer Preview

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

✨ Features

🌐 Automatic RTL / LTR Adaptation: Dynamic direction support (DrawerDirection.auto) that automatically adapts to system locale text orientation.
🌟 4-Way Swipe Directions: Supports dragging from all four screen edges:
- DrawerDirection.auto (Default)
- DrawerDirection.leftToRight
- DrawerDirection.rightToLeft
- DrawerDirection.topToBottom
- DrawerDirection.bottomToTop
🎮 Programmatic Control: Seamlessly open, close, or toggle the drawer state using SwipeableDrawerController.
🎨 Smooth Animations & Real Elevation: High-performance 3D zoom effects, customizable material elevation shadows, and dynamic background dimming overlays.
📳 Haptic Feedback: Built-in subtle tactile vibrations (HapticFeedback.lightImpact()) upon completing open and close transitions.
⚡ Zero External Dependencies: Pure Flutter implementation ensuring max compatibility and keeping your app footprint minimal.
🎛️ Highly Customizable: Control animation speed, overlay opacity, elevation, background colors, drag sensitivity, and more.

📦 Installation

Add swipeable_drawer_layout to your pubspec.yaml dependencies:

dependencies:
  swipeable_drawer_layout: ^0.0.7

🚀 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.auto, // Automatically adapts to system RTL/LTR
      // 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`	`auto`	Swipe gesture direction (`auto`, `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.
`mainElevation`	`double`	`16.0`	Material depth elevation shadow for mainScreen when revealed.
`secondaryShadowOpacity`	`double`	`0.5`	Dynamic dark overlay maximum opacity on secondaryScreen when closed.

📄 License

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