Flutter animated BackDropFilter

Question

I wanted to know if it was possible to add blur on a screen with fade in and fade out. Do you have any idea ? I'm currently using BackDropFilter to blur my screen but it doesn't fade when appear...

Solution 1

I found that I was able to animate the backDropFiter with a widget called AnimatedOpacity. You can use it as the AnimatedContainer!

Enjoy

Solution 2

You can animate the sigma values for blur,

TweenAnimationBuilder<double>(
  tween: Tween<double>(begin: 0.0, end: 15.0),
  duration: const Duration(milliseconds: 500),
  builder: (_, value, child) {
    return BackdropFilter(
      filter: ImageFilter.blur(sigmaX: value, sigmaY: value),
      child: child,
    );
  },
  child: DecoratedBox(
  decoration: BoxDecoration(
    color: Colors.white.withOpacity(0.5),
  ),
),