blurbox 0.0.6 copy "blurbox: ^0.0.6" to clipboard
blurbox: ^0.0.6 copied to clipboard

A Flutter package that applies a blur effect to its child widget.

🌀 BlurBox #

📝 Introduction #

A powerful and versatile Flutter widget library for applying beautiful blur effects to your UI elements.

BlurBox works like a Container widget but with added blur capabilities, giving you all the styling options of Container plus sophisticated blur effects.

🚀 Live Demo #

✨ Features #

  • BlurBox: The core widget for applying customizable blur effects
  • AnimatedBlurBox: Smooth animations for changing blur values
  • PresetBlurBox: Predefined blur styles for quick implementation
  • ThemedBlurBox: Automatically adapts colors to match your app theme
  • DirectionalBlurBox: Creates directional blur effects with adjustable angles
  • RadialBlurBox: Creates blur that radiates from a focal point
  • FollowingBlurBox: Blur that follows user interaction (touch/cursor)
  • ScrollAwareBlurBox: Adjust blur based on scroll position
  • PatternedBlurBox: Apply blur with decorative pattern overlays
  • GeometricPatternBlurBox: Create geometric pattern backgrounds with blur
  • OrganicPatternBlurBox: Create flowing natural blur patterns
  • KaleidoscopeBlurBox: Create symmetrical kaleidoscope effects with blur

📦 Installation #

dependencies:
  blurbox: ^0.0.6
copied to clipboard

or

flutter pub add blurbox
copied to clipboard
import 'package:blurbox/blurbox.dart';
copied to clipboard

🔧 Basic Usage #

⚠️ Performance Tips #

Important

When using blur in scrollable views, you might encounter rendering issues. Use the following physics configuration to improve performance:

ListView(
physics: const AlwaysScrollableScrollPhysics()
.applyTo(const BouncingScrollPhysics()),
children: [...]
)
copied to clipboard

🌫️ BlurBox #

The simplest way to add a blur effect to any widget:

BlurBox(
  blur: 5.0, // Adjust the blur amount
  color: Colors.white.withAlpha(30), // Semi-transparent background
  borderRadius: BorderRadius.circular(16),
  padding: EdgeInsets.all(20),
  child: Text('This text has a blurred background!'),
)
copied to clipboard

🖼️ Blur Background #

Create a full-screen blurred background:

BlurBox(
  width: double.infinity,
  height: double.infinity,
  blur: 5.0, 
  child: const Center(
    child: Text(
      'Blur Background!',
      style: TextStyle(fontSize: 24.0),
    ),
  ),
),
copied to clipboard

🧩 PresetBlurBox #

Use predefined blur styles for quick implementation:

PresetBlurBox(
  preset: BlurPreset.heavy, // Choose from: soft, medium, heavy, subtleShadow, frostedGlass, and more
  borderRadius: BorderRadius.circular(16),
  padding: EdgeInsets.all(20),
  child: Center(
    child: Text(
      'Heavy Blur',
      style: TextStyle(fontSize: 24, color: Colors.white),
    ),
  ),
)
copied to clipboard

⚡ AnimatedBlurBox #

Smoothly animate between blur states:

AnimatedBlurBox(
  blur: _isBlurred ? 20.0 : 0.0, // Toggle between blurred and clear
  begin: _isBlurred ? 0.0 : 20.0,
  duration: Duration(milliseconds: 800),
  curve: Curves.easeInOutCubic,
  borderRadius: BorderRadius.circular(20),
  child: Center(
    child: Text('Animated Blur Effect'),
  ),
)
copied to clipboard

🎨 ThemedBlurBox #

Automatically match your app theme:

ThemedBlurBox(
  blur: 8,
  borderRadius: BorderRadius.circular(16),
  padding: EdgeInsets.all(20),
  elevation: 4,
  child: Text('Adapts to your app theme colors'),
)
copied to clipboard

🚀 Advanced Usage #

🔄 DirectionalBlurBox #

Create blur effects that flow in a specific direction:

DirectionalBlurBox(
  blur: 12,
  angle: 45.0, // Direction of blur in degrees
  color: Colors.blue.withAlpha(50),
  borderRadius: BorderRadius.circular(16),
  padding: EdgeInsets.all(20),
  child: Text('Directional blur effect'),
)
copied to clipboard

☀️ RadialBlurBox #

Create blur that radiates from a focal point:

RadialBlurBox(
  radius: 150.0,
  falloff: 2.0,
  quality: 8,
  maxBlur: 15,
  focalPoint: Alignment(0.3, -0.2), // Position of the focal point
  color: Colors.purple.withAlpha(50),
  borderRadius: BorderRadius.circular(16),
  padding: EdgeInsets.all(20),
  child: Text('Radial blur effect'),
)
copied to clipboard

👆 FollowingBlurBox #

Blur that follows user interaction:

FollowingBlurBox(
  radius: 60,
  blurIntensity: 12,
  followSpeed: 0.5, // How quickly the blur follows (0.0-1.0)
  color: Colors.pink.withAlpha(50),
  child: Container(
    height: 200,
    width: 300,
    child: Center(
      child: Text('Move your finger or cursor over me'),
    ),
  ),
)
copied to clipboard

📜 ScrollAwareBlurBox #

Adjust blur based on scroll position:

ScrollAwareBlurBox(
  scrollController: _scrollController, // Your ScrollController
  minBlur: 0,
  maxBlur: 15,
  scrollThreshold: 300, // How far to scroll for max blur
  color: Colors.white.withAlpha(75),
  child: Text('Scroll-aware header'),
)
copied to clipboard

🎭 PatternedBlurBox #

Create blur with decorative pattern overlays:

PatternedBlurBox(
  blur: 8.0,
  color: Colors.white.withAlpha(50),
  patternAsset: 'assets/patterns/dots.png',
  patternOpacity: 0.15,
  borderRadius: BorderRadius.circular(15),
  child: Padding(
    padding: const EdgeInsets.all(20),
    child: Text('Patterned Glass Effect'),
  ),
)
copied to clipboard

🔮 Pattern BlurBoxes #

Create beautiful patterns with blur effects:

// Geometric patterns
GeometricPatternBlurBox(
  baseBlur: 8,
  shapeCount: 100,
  colors: [Colors.blue, Colors.purple, Colors.pink],
  shapeTypes: [
    GeometricShapeType.circle,
    GeometricShapeType.rectangle,
  ],
  borderRadius: BorderRadius.circular(16),
  child: Text('Geometric patterns'),
)

// Organic, flowing patterns
OrganicPatternBlurBox(
  blur: 10,
  backgrundBlur: 50,
  color: Colors.teal.withAlpha(100),
  complexity: 8,
  fluidity: 0.8,
  animationDuration: Duration(seconds: 15),
  borderRadius: BorderRadius.circular(16),
  child: Text('Organic patterns'),
)

// Kaleidoscope patterns
KaleidoscopeBlurBox(
  segments: 8,
  blur: 5.0,
  color: Colors.purple.withAlpha(50),
  patternType: KaleidoscopePatternType.basic,
  animated: true,
  rotationDuration: Duration(seconds: 20),
  borderRadius: BorderRadius.circular(16),
  child: Text('Kaleidoscope patterns'),
)
copied to clipboard

🧰 Extension Methods #

Apply blur effects directly to any widget:

// Simple blur
Text('Blurred Text').blurry(
  blur: 10,
  color: Colors.blue.withAlpha(50),
  borderRadius: BorderRadius.circular(15),
  padding: EdgeInsets.symmetric(horizontal: 20, vertical: 10),
)

// Animated blur
Container(
  child: Text('Animates between clear and blurry'),
).animatedBlurry(
  blur: _isBlurred ? 10.0 : 0.0,
  beginBlur: _isBlurred ? 0.0 : 10.0,
  duration: Duration(milliseconds: 500),
  borderRadius: BorderRadius.circular(16),
)
copied to clipboard

🛠️ Customization #

BlurBox offers extensive customization options similar to Container:

  • blur: Controls the blur intensity (default: 5.0)
  • color: Sets the background color (default: transparent)
  • height and width: Define the size
  • elevation: Applies a shadow effect
  • padding: Adds internal spacing
  • margin: Adds external spacing
  • alignment: Positions the child within the BlurBox
  • clipBehavior: Controls child clipping (default: Clip.none)
  • borderRadius: Sets rounded corners
  • border: Defines a border
  • boxShadow: Creates shadow effects
  • gradient: Applies a gradient background
  • shape: Defines the shape (default: BoxShape.rectangle)

📚 Examples #

Check out the example app in the GitHub repository for complete demonstrations of all features.

📄 License #

This package is available under the Apache License.

11
likes
160
points
768
downloads

Publisher

unverified uploader

Weekly Downloads

2024.09.25 - 2025.04.09

A Flutter package that applies a blur effect to its child widget.

Repository (GitHub)
View/report issues

Documentation

API reference

License

Apache-2.0 (license)

Dependencies

flutter

More

Packages that depend on blurbox