VariableBlur class

A widget that applies variable blur effects to its child widget.

VariableBlur enables you to create sophisticated blur effects with different intensities for different regions of the widget. It's perfect for creating tilt-shift photography effects, focus transitions, or artistic blur overlays.

The widget uses GPU-accelerated Fragment Shaders for high-performance rendering and supports customizable blur regions, quality settings, and smooth edge transitions.

Key Features

• Variable blur intensity across different regions
• Smooth edge transitions with customizable intensity
• High-performance GPU-accelerated rendering
• Quality control for performance optimization
• Android device compatibility support

Important Compatibility Note

Blur effects only work on images or colored containers. The child widget must have visible content (pixels) for the blur effect to be applied. Transparent widgets, empty containers, or widgets without background colors will not show blur effects.

Supported child widgets include:

• Image widgets (network, asset, file, memory)
• Container with background color or decoration
• Widgets with colored backgrounds
• Custom painted widgets with visible content

For comprehensive usage examples, please refer to the example app.

Example Usage

// Using normalized blur values (0.0 to 1.0)
VariableBlur(
  sigma: 15.0,
  blurSides: BlurSides.vertical(top: 1.0, bottom: 0.3),
  edgeIntensity: 0.2,
  quality: BlurQuality.high,
  useRepaintBoundary: true, // For performance optimization
  child: Image.asset('assets/photo.jpg'),
)

// Using pixel-based blur values with ResponsiveBlurSides
VariableBlur(
  sigma: 15.0,
  blurSides: ResponsiveBlurSides(top: 100.0, bottom: 50.0), // pixels
  edgeIntensity: 0.2,
  quality: BlurQuality.high,
  child: Image.asset('assets/photo.jpg'),
)

Performance Considerations

• Use BlurQuality.low or BlurQuality.medium for better performance on lower-end devices
• Higher sigma values require more processing power and automatically use larger kernel sizes
• The edgeIntensity affects the smoothness of blur transitions
• Quality settings automatically adjust kernel size for optimal performance
• RepaintBoundary is enabled by default to isolate expensive blur operations
• Set useRepaintBoundary to false only if you need manual RepaintBoundary management