blurbox 0.0.6
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
or
flutter pub add blurbox
import 'package:blurbox/blurbox.dart';
🔧 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: [...]
)
🌫️ 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!'),
)
🖼️ 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),
),
),
),
🧩 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),
),
),
)
⚡ 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'),
),
)
🎨 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'),
)
🚀 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'),
)
☀️ 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'),
)
👆 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'),
),
),
)
📜 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'),
)
🎭 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'),
),
)
🔮 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'),
)
🧰 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),
)
🛠️ 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
andwidth
: Define the sizeelevation
: Applies a shadow effectpadding
: Adds internal spacingmargin
: Adds external spacingalignment
: Positions the child within the BlurBoxclipBehavior
: Controls child clipping (default: Clip.none)borderRadius
: Sets rounded cornersborder
: Defines a borderboxShadow
: Creates shadow effectsgradient
: Applies a gradient backgroundshape
: 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.