Flutter如何实现按钮颜色从左到右非插值式切换动画

要替代AnimatedContainer的颜色插值渐变，实现左到右的颜色覆盖动画，可以通过Stack叠加两个背景容器，配合宽度动画来实现。核心思路是让可用状态的背景色容器从宽度0扩展到满宽，覆盖在不可用状态的背景之上，同时单独处理文字颜色的过渡。

完整代码示例 #

ClipRRect(
  // 统一设置按钮圆角，避免多层容器的圆角冲突
  borderRadius: BorderRadius.circular(12.0),
  child: Stack(
    children: [
      // 1. 不可用状态的背景（始终显示）
      Container(
        color: color2,
        child: const SizedBox.expand(),
      ),
      // 2. 可用状态的覆盖背景（通过宽度动画实现左到右展开）
      AnimatedContainer(
        width: canGoNextScreen ? double.infinity : 0,
        color: color1,
        duration: const Duration(milliseconds: 1250),
        // 可选：添加动画曲线让过渡更自然
        curve: Curves.easeInOut,
      ),
      // 3. 顶层可点击按钮与文字（背景透明，不遮挡下层动画）
      TextButton(
        onPressed: onCanGoPressed,
        style: TextButton.styleFrom(
          backgroundColor: Colors.transparent,
          splashFactory: InkRipple.splashFactory, // 保留点击水波纹效果
        ),
        child: AnimatedDefaultTextStyle(
          // 文字颜色的过渡动画
          style: TextStyle(
            color: canGoNextScreen ? Colors.black : Colors.white,
            fontSize: 16, // 保持原文字大小
          ),
          duration: const Duration(milliseconds: 1250),
          child: const Text("Go to the next screen"),
        ),
      ),
    ],
  ),
)

关键实现细节 #

• 层级结构：用Stack将三个元素分层，底层是不可用背景，中层是可用背景动画层，顶层是可交互的按钮文字，确保点击区域完整。
• 宽度动画：通过AnimatedContainer的width属性，在canGoNextScreen状态切换时，从0过渡到double.infinity（占满父容器宽度），实现左到右的覆盖效果。
• 圆角处理：用ClipRRect包裹整个Stack，统一裁剪圆角，避免多个容器设置圆角导致的边缘异常。
• 文字动画：使用AnimatedDefaultTextStyle专门处理文字颜色的平滑过渡，比直接在TextStyle中写条件判断的动画效果更稳定。
• 点击交互：将TextButton的背景设为透明，保证点击事件能正常触发，同时保留原生的水波纹反馈。

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