如何在颤动中设置颜色过渡动画？

Question

我正在创建一个自定义的类似复选框的小部件，它使用Card. 如果值相同，我就能改变颜色onTap。但是，我希望它过渡颜色而不是突然改变。

这是我的代码：

return Card(
      color: selected ? AppColors.primary : AppColors.primaryLight,

我对 Flutter 中的动画相对较新，但由于对前端/CSS 有很强的了解，我实现类似功能的方法是添加transitionCSS 属性 - Flutter 中有类似的东西吗？如果没有，有人可以指出我正确的方向吗？

Answer 1

我要做的是不使用Card小部件，而是使用一个AnimatedContainer并且具有与您相同的颜色参数条件。当值发生变化时，您将获得平滑的过渡selected。但是，您可能还需要添加boxShadow以具有与以下相同的高程效果Card

AnimatedContainer(
 duration: const Duration(milliseconds: 700),
 curve: Curves.easeInOut,
 decoration:BoxDecoration(
    boxShadow: [
      BoxShadow(
        color: Colors.black,
        blurRadius: 5,
        spreadRadius: 5,
        offset: Offset(0, 2),
      ),
    ],
    color: selected ? AppColors.primary : AppColors.primaryLight,
    ),
   )