Flutter中如何让LinearProgressIndicator到达终点后停止不再重复

问题原因 #

你当前代码中调用了controller.repeat(reverse: false)，该方法的作用是让动画无限循环播放，因此进度走到1后会自动重置为0重新开始，导致动画一直重复执行。同时你的initState方法中重复调用了两次super.initState()，属于冗余代码可以删除。

修复方案 #

将controller.repeat()替换为controller.forward()即可，该方法会让动画从当前值单向播放到终点，播放完成后自动停止。

完整修改后的代码片段： #

late AnimationController controller;

@override
void initState() {
  super.initState();
  futureData = fetchData1() as Future<List<QuizInfo>?>;

  controller = AnimationController(
    vsync: this,
    duration: const Duration(seconds: 10), // 按需修改为你要的动画时长
  )..addListener(() {
      setState(() {});
    });
  // 可选：添加状态监听，获取动画结束的回调
  controller.addStatusListener((status) {
    if (status == AnimationStatus.completed) {
      // 此处可编写动画走完全程后需要执行的逻辑
    }
  });
  // 启动单次动画，到终点自动停止
  controller.forward();
}

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

// 布局部分代码无需修改
child: Container(
  height: 7,
  child: RotatedBox(
    quarterTurns: -2,
    child: LinearProgressIndicator(
      value: controller.value,
      color: Colors.white,
      backgroundColor: Colors.yellow,
    ),
  ),
),

效果说明 #

修改后进度条会按照设置的时长匀速从0加载到100%，走完全程后就停在满进度状态，不会再重复执行动画。如果后续需要重新触发进度条动画，再次调用controller.forward()即可（调用前可以先调用controller.reset()将进度重置为0）。

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