BlurFade #

A Flutter widget that animates children with a smooth combined blur and fade effect. Part of the FlutterFX collection.

Features #

• 🎬 Smooth blur-to-sharp transition combined with fade-in
• ⚡ Zero external dependencies - just Flutter
• 🎛️ Customizable duration, delay, curve, and blur intensity
• 📱 Works on all platforms (iOS, Android, Web, Desktop)
• ♿ Respects accessibility settings

Installation #

flutter pub add flutterfx_blur_fade

Or add to your pubspec.yaml:

dependencies:
  flutterfx_blur_fade: ^1.0.0

Usage #

Basic Usage #

import 'package:flutterfx_blur_fade/flutterfx_blur_fade.dart';

BlurFade(
  child: Text('Hello World'),
)

With Customization #

BlurFade(
  duration: Duration(milliseconds: 600),
  delay: Duration(milliseconds: 200),
  blur: 12.0,
  curve: Curves.easeInOut,
  child: Container(
    padding: EdgeInsets.all(16),
    child: Text('Animated Content'),
  ),
)

Staggered List Animation #

ListView.builder(
  itemCount: items.length,
  itemBuilder: (context, index) {
    return BlurFade(
      delay: Duration(milliseconds: 100 * index),
      child: ListTile(
        title: Text(items[index]),
      ),
    );
  },
)

Parameters #

How It Works #

The animation uses two overlapping phases:

1. Opacity (0% - 60% of duration): Fades the widget in
2. Blur (40% - 100% of duration): Transitions from blurred to sharp

This overlap creates a seamless, polished effect.

More FlutterFX Widgets #

Check out other widgets in the FlutterFX collection:

• flutterfx_meteors - Animated meteor shower effect
• flutterfx_border_beam - Animated border beam effect
• View all at flutterfx.com

Contributing #

Found a bug? Have a suggestion? Feel free to open a PR at the FlutterFX repository.

License #

MIT License - see the LICENSE file for details.

Built with ❤️ by Amal Chandran | FlutterFX