Flutter中AnimatedContainer切换圆形与圆角样式报错如何解决？

这个错误的根源很明确：Flutter的BoxDecoration不允许同时设置shape: BoxShape.circle和borderRadius属性。你的代码里分开定义了两种状态的BoxDecoration，AnimatedContainer在执行动画插值时，会尝试在两个不同结构的Decoration之间过渡，导致中间帧同时存在borderRadius和shape: circle，触发断言失败。

直接修改decoration部分的代码，将两种状态合并为一个统一的BoxDecoration，通过条件判断控制属性即可解决：

@override
Widget build(BuildContext context) {
  return InkWell(
    onTap: onTap,
    child: AnimatedContainer(
      width: status ? 50 : 200,
      height: 45,
      alignment: Alignment.center,
      duration: const Duration(milliseconds: 350),
      padding: padding,
      margin: margin,
      // 合并两种状态的BoxDecoration，确保circle状态下borderRadius为null
      decoration: BoxDecoration(
        color: backgroundcolor ?? kGreen,
        shape: status ? BoxShape.circle : BoxShape.rectangle,
        borderRadius: status ? null : BorderRadius.circular(30),
      ),
      child: status
          ? const Padding(
              padding: EdgeInsets.all(5),
              child: CircularProgressIndicator(
                color: kWhite,
                strokeWidth: 3,
              ),
            )
          : CommonText(
              text: text,
              size: 14,
              fontWeight: FontWeight.bold,
              textColor: textColor ?? kWhite,
            ),
    ),
  );
}

这种写法的好处是让AnimatedContainer能正确识别可插值的属性，动画过程中borderRadius会从30平滑过渡到null，同时shape也会同步切换，完全符合Flutter的布局约束，不会再触发断言错误。

内容的提问来源于stack exchange，提问作者Senthur Kumaran