Flutter SlideTransition初始动画正常，点击无反向滑动动画问题

问题描述 #

页面加载时，红色容器能从中间通过动画滑到右侧，功能正常；但点击左侧文本LLLLL时，容器直接跳转到左侧，无滑动动画；点击右侧文本RRRRR时也直接跳转回右侧，无动画效果。

问题原因 #

1. 动画控制器AnimationController仅在initState中执行了一次forward()，后续点击切换状态时，控制器处于已完成（completed）状态，不会重新触发动画。
2. 修改coin10状态后，Tween的end值发生变化，但控制器未重新执行，导致容器直接跳转到目标位置。

修复后的代码 #

class ChangeIt extends StatefulWidget {
  const ChangeIt({super.key});

  @override
  State<ChangeIt> createState() => _ChangeItState();
}

class _ChangeItState extends State<ChangeIt> with SingleTickerProviderStateMixin {
  late final AnimationController controller = AnimationController(
    vsync: this,
    duration: const Duration(seconds: 1),
  );

  bool coin10 = false;

  @override
  void initState() {
    super.initState();
    controller.forward();
  }

  @override
  void dispose() {
    controller.dispose(); // 释放控制器，避免内存泄漏
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          const SizedBox(height: 200),
          Padding(
            padding: const EdgeInsets.all(15.0),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                GestureDetector(
                  onTap: () {
                    setState(() {
                      coin10 = true;
                    });
                    // 重置控制器并重新执行动画
                    controller.reset();
                    controller.forward();
                  },
                  child: const Text('LLLLL'),
                ),
                SlideTransition(
                  position: Tween<Offset>(
                    begin: const Offset(0, 0),
                    end: Offset(coin10 ? -2 : 2, 0),
                  ).animate(controller),
                  child: Container(
                    color: Colors.red,
                    height: 40,
                    width: 40,
                  ),
                ),
                GestureDetector(
                  onTap: () {
                    setState(() {
                      coin10 = false;
                    });
                    // 重置控制器并重新执行动画
                    controller.reset();
                    controller.forward();
                  },
                  child: const Text('RRRRR'),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

关键修改点 #

• 重新触发动画：每次点击切换coin10状态后，调用controller.reset()将控制器重置到初始状态，再调用controller.forward()重新执行动画，让SlideTransition根据新的end值完成滑动过渡。
• 添加控制器释放：在dispose方法中调用controller.dispose()，避免内存泄漏，符合Flutter最佳实践。
• 规范类名：将原类名changeit改为ChangeIt，符合Dart命名规范。

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