Flutter动画问题：如何避免Tween值跳变，实现步进式增长？

核心问题分析 #

你代码中存在动画控制器不匹配的关键错误：Tween动画绑定的是_animationController，但AnimatedBuilder监听的却是_animationController2，两个完全独立的控制器导致动画值出现异常跳变。

解决方案 #

1. 统一动画控制器

将所有Tween动画的parent改为_animationController2，确保动画逻辑与监听控制器一致：

// 修改initState中的动画绑定代码
width = Tween<double>(
      begin: 0.0,
      end: 400.0,
    ).animate(
      CurvedAnimation(
        parent: _animationController2, // 替换为_animationController2
        curve: Curves.ease
      ),
    );
height = Tween<double>(begin: 0.0, end: 400.0).animate(
      CurvedAnimation(
        parent: _animationController2, // 替换为_animationController2
        curve: Curves.ease
      ),
    );
padding = EdgeInsetsTween(
      begin: const EdgeInsets.only(bottom: 0),
      end: const EdgeInsets.only(bottom: 100.0),
    ).animate(
      CurvedAnimation(
        parent: _animationController2, // 替换为_animationController2
        curve: Curves.ease
      ),
    );

同时在initState末尾启动控制器：

@override
void initState() {
  super.initState();
  // 初始化控制器和动画的代码...
  _animationController2.forward(); // 启动动画
}

2. 实现步进式数值增长（可选）

如果希望宽高严格按照固定步长（如0→20→40…）变化，可对动画值进行取整处理：

AnimatedBuilder(
  animation: _animationController2,
  builder: (context, child) { 
    const step = 20.0;
    // 按步长计算当前值
    final currentWidth = (width.value / step).floor() * step;
    final currentHeight = (height.value / step).floor() * step;
    
    print("width: ${currentWidth.toInt()}");
    return Container(
      padding: padding.value,
      width: currentWidth,
      height: currentHeight,
      child: Container(),
    );
  }
)

额外注意事项 #

• 组件销毁时释放控制器，避免内存泄漏：

@override
void dispose() {
  _animationController2.dispose();
  super.dispose();
}

• 若要让动画匀速增长，可将Curves.ease替换为Curves.linear。

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