Flutter 动画 BackDropFilter

Question

我想知道是否可以通过淡入淡出在屏幕上添加模糊效果。你有什么主意吗？我目前正在使用 BackDropFilter 来模糊我的屏幕，但它在出现时不会消失...

Answer 1

我发现我可以使用名为 AnimatedOpacity 的小部件为 backDropFiter 设置动画。您可以将其用作 AnimatedContainer！

尽情享受

Answer 2

您可以为模糊的 sigma 值设置动画，

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

Answer 3

与@Damon 的答案几乎相同，但包括工作示例


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'),
            ),
          )
        ],
      ),
    );
  }
}

Flutter 动画 BackDropFilter

Flutter animated BackDropFilter

mobile

blur

dart

flutter