blurred_overlay

A lightweight Flutter package to show beautiful blurred dialogs, modal bottom sheets, and drawers with shadow, radius, and customization.

✨ Features

• 🎯 Blur effect using BackdropFilter with customizable blur intensity
• 🎨 Fully customizable design (colors, radius, padding, margins, shadows)
• 📱 Drag-to-dismiss support with optional handle indicator
• 🔧 Advanced parameters (maxHeight, enableDrag, useSafeArea, barrierColor)
• ⚡ Optimized for both debug and release modes (no artifacts)
• 🎭 Theme-aware with automatic color fallbacks
• 📐 Smart layout system that adapts to content size
• 🚀 Works with dialogs, bottom sheets, and drawers (both left and right)

🖼️ Screenshots

Blurred BottomSheet	Blurred Dialog	Blurred Drawer
Blurred Loading Overlay	Progress Loading Overlay

🚀 Quick Start

Installation

Add dependency into your pubspec.yaml

dependencies:
  blurred_overlay: latest

Then run

flutter pub get

Or use the command line

flutter pub add blurred_overlay

📱 Basic Usage

Blurred BottomSheet

showBlurredModalBottomSheet(
  context: context,
  showHandle: true,
  builder: (context) {
    return Column(
      mainAxisSize: MainAxisSize.min,
      children: [
        const Padding(
          padding: EdgeInsets.symmetric(vertical: 8.0),
          child: Text(
            'System Information',
            style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
          ),
        ),
        const Divider(color: Colors.white24, indent: 20, endIndent: 20),
        const ListTile(
          dense: true,
          leading: Icon(Icons.devices, size: 20),
          title: Text('Device Name', style: TextStyle(fontSize: 14)),
          trailing: Text('Galaxy A50', style: TextStyle(fontSize: 12)),
        ),
        const ListTile(
          dense: true,
          leading: Icon(Icons.memory, size: 20),
          title: Text('RAM', style: TextStyle(fontSize: 14)),
          trailing: Text('12 GB', style: TextStyle(fontSize: 12)),
        ),
        const ListTile(
          dense: true,
          leading: Icon(Icons.sd_storage, size: 20),
          title: Text('ROM', style: TextStyle(fontSize: 14)),
          trailing: Text('256 GB', style: TextStyle(fontSize: 12)),
        ),
        const SizedBox(height: 10),
        const Center(
          child: Padding(
            padding: EdgeInsets.only(bottom: 10),
            child: Text(
              "Blurred BottomSheet",
              style: TextStyle(fontSize: 13, color: Colors.grey),
            ),
          ),
        ),
      ],
    );
  },
);

Blurred Dialog

showBlurredDialog(
      context: context,
      builder: (context) {
        return Dialog(
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(16.0),
          ),
          child: Padding(
            padding: const EdgeInsets.all(24.0),
            child: Column(
              mainAxisSize: MainAxisSize.min,
              children: <Widget>[
                const Text(
                  'Root Status',
                  style: TextStyle(fontSize: 20.0, fontWeight: FontWeight.bold),
                ),
                const SizedBox(height: 16.0),
                const Text(
                  'Your phone Galaxy A50 is not rooted.',
                  textAlign: TextAlign.left,
                  style: TextStyle(fontSize: 16.0),
                ),
                const SizedBox(height: 24.0),
                Align(
                  alignment: Alignment.bottomRight,
                  child: TextButton(
                    onPressed: () {
                      Navigator.of(context).pop(); // Close the dialog
                    },
                    child: const Text('CLOSE'),
                  ),
                ),
              ],
            ),
          ),
        );
      },
    );

Blurred Drawer

Left Drawer:

Scaffold(
  drawer: BlurredDrawer(
    child: ListView(
      padding: EdgeInsets.zero,
      children: [
        DrawerHeader(
          decoration: BoxDecoration(
            color: Colors.blue.withOpacity(0.3),
          ),
          child: const Text(
            'Menu',
            style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
          ),
        ),
        ListTile(
          leading: const Icon(Icons.home),
          title: const Text('Home'),
          onTap: () => Navigator.pop(context),
        ),
        ListTile(
          leading: const Icon(Icons.settings),
          title: const Text('Settings'),
          onTap: () => Navigator.pop(context),
        ),
      ],
    ),
  ),
  appBar: AppBar(title: const Text('App')),
  body: const Center(child: Text('Swipe from left')),
)

Right Drawer:

Scaffold(
  endDrawer: BlurredDrawer(
    position: DrawerPosition.right,
    child: ListView(
      padding: EdgeInsets.zero,
      children: [
        DrawerHeader(
          decoration: BoxDecoration(
            color: Colors.purple.withOpacity(0.3),
          ),
          child: const Text(
            'Options',
            style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
          ),
        ),
        ListTile(
          leading: const Icon(Icons.notifications),
          title: const Text('Notifications'),
          onTap: () => Navigator.pop(context),
        ),
        ListTile(
          leading: const Icon(Icons.account_circle),
          title: const Text('Profile'),
          onTap: () => Navigator.pop(context),
        ),
      ],
    ),
  ),
  appBar: AppBar(title: const Text('App')),
  body: const Center(child: Text('Swipe from right')),
)

Blurred Loading Overlay

Basic Usage (Default Cupertino Style):

BlurredLoadingOverlay(
  isLoading: _isLoading,
  child: YourContentWidget(),
)

With Different Loading Styles:

BlurredLoadingOverlay(
  isLoading: _isLoading,
  loadingStyle: LoadingStyle.pulseRing, // 20 styles available
  loadingColor: Colors.blue,
  loadingSize: 60.0,
  child: YourContentWidget(),
)

With Custom Loading Widget:

BlurredLoadingOverlay(
  isLoading: _isLoading,
  customLoadingWidget: CircularProgressIndicator(),
  child: YourContentWidget(),
)

With Header and Footer:

BlurredLoadingOverlay(
  isLoading: _isLoading,
  loadingStyle: LoadingStyle.breathingCircle,
  headerWidget: Text('Loading...', style: TextStyle(color: Colors.white)),
  footerWidget: Text('Please wait', style: TextStyle(color: Colors.white70)),
  child: YourContentWidget(),
)

Available Loading Styles:

• cupertinoBox (default) - iOS-style spinner in a box
• bouncingLineCircle/Square - Bouncing shapes
• bouncingGridCircle/Square - 3x3 grid bounce
• bumpingLineCircle/Square - Horizontal bump
• fadingLineCircle/Square - Sequential fade
• jumpingLineCircle/Square - Vertical jump
• rotatingSquare - Rotating shape
• flippingCircle/Square - Horizontal flip
• doubleFlippingCircle/Square - 3D flip effect
• fillingSquare - Fill and rotate
• pulseRing - Expanding rings
• orbitDots - Orbiting dots
• breathingCircle - Expanding/contracting circle

Blurred Progress Loading

Circle Progress:

BlurredLoadingPercentage(
  isLoading: _isLoading,
  progress: _progressValue, // 0.0 to 100.0
  progressStyle: ProgressStyle.circle,
  child: YourContentWidget(),
)

Line Progress:

BlurredLoadingPercentage(
  isLoading: _isLoading,
  progress: _progressValue,
  progressStyle: ProgressStyle.line,
  progressColor: Colors.green,
  trackColor: Colors.white24,
  child: YourContentWidget(),
)