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

【问题标题】：How to animate color transitions in flutter?如何在颤动中为颜色过渡设置动画？
【发布时间】：2022-01-13 17:06:41
【问题描述】：

我正在创建一个使用Card 的自定义复选框式小部件。如果值相同onTap，我可以改变颜色。但是，我希望它转换颜色而不是突然改变。

这是我的代码：

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

我对 Flutter 中的动画相对较新，但是由于对前端/CSS 有很强的理解，我可以实现这样的方法是在 CSS 属性上添加 transition —— 是否有类似的东西在扑？如果没有，有人能指出我正确的方向吗？

【问题讨论】：

标签： flutter flutter-animation

【解决方案1】：

一种方法是AnimatedContainer

return Card(
        child: AnimatedContainer(
          duration: const Duration(milliseconds: 1000),
          height: 200,
          width: 200,
          color: selected ? Colors.red : Colors.blue,
          child: FooWidget(),
        ),
      )

【讨论】：

【解决方案2】：

我要做的不是使用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,
    ),
   )

【讨论】：