CODEWITHSUNDEEP
fluttermobiledartblur
Simon B
Simon B

Reputation: 587

Flutter animated BackDropFilter

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...

Upvotes: 7

Views: 5085

Answers (3)

Axel
Axel

Reputation: 5131

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),
  ),
),

https://api.flutter.dev/flutter/widgets/TweenAnimationBuilder-class.html

Upvotes: 8

Chris
Chris

Reputation: 2044

Pretty much the same answer as @Damon's but including working example


class BackgroundBlurExample extends StatefulWidget {
  @override
  _BackgroundBlurExampleState createState() => _BackgroundBlurExampleState();
}

class _BackgroundBlurExampleState extends State<BackgroundBlurExample> {
  double _begin = 10.0;
  double _end = 0.0;

  void _animateBlur() {
    setState(() {
      _begin == 10.0 ? _begin = 0.0 : _begin = 10.0;
      _end == 0.0 ? _end = 10.0 : _end = 0.0;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: [
          Align(
            alignment: Alignment.center,
            child: FlutterLogo(
              size: 100,
            ),
          ),
          
          // ... Things you want to blur above the IgnorePointer

          IgnorePointer( // This is in case you want to tap things under the BackdropFilter
            child: TweenAnimationBuilder<double>(
              tween: Tween<double>(begin: _begin, end: _end),
              duration: Duration(milliseconds: 500),
              curve: Curves.easeIn,
              builder: (_, value, __) {
                return BackdropFilter(
                  filter: ImageFilter.blur(
                    sigmaX: value,
                    sigmaY: value,
                  ),
                  child: Container(
                    width: double.maxFinite,
                    height: double.maxFinite,
                    color: Colors.transparent,
                  ),
                );
              },
            ),
          ),

          Align(
            alignment: Alignment.bottomCenter,
            child: ElevatedButton(
              onPressed: _animateBlur,
              child: Text('Animate'),
            ),
          )
        ],
      ),
    );
  }
}

Upvotes: 0

Simon B
Simon B

Reputation: 587

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

Enjoy

Upvotes: 0

Related Questions