Flutter 动画 BackDropFilter

Question

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

Answer 1

您可以为模糊的西格玛值设置动画，

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

Answer 2

我发现我可以backDropFiter使用一个名为 的小部件来制作动画AnimatedOpacity。您可以将其用作AnimatedContainer!

享受