如何使我的 CircularProgressIndicator 顺利运行（更新更平滑，而不是每秒更新，以便侧面有流动+发光？）

Question

所以我做了一个计时器，想知道如何添加一个“发光”，使其动画/变大一点，然后回到较小的发光。另一个问题是，当我启动计时器时，它每秒都会更新（有点跳跃而不是流动）

不知道如何继续这个，因为现在尝试谷歌几个小时但没有运气。

谢谢您的帮助！

这是我的代码

  var maxSeconds = 900;
  late int seconds = maxSeconds;
  Timer? timer;

  void resetTimer() {
    setState(() => seconds = maxSeconds);
    timer = null;
  }

  void startTimer({bool reset = true}) {
    if (reset) {
      resetTimer();
    }
    timer = Timer.periodic(Duration(seconds: 1), (_) {
      if (!mounted) // Putting this line of code with return under, fixed my issue i been having about mounted
        return;
      else if (seconds > 0) {
        setState(() => seconds--);
      } else {
        stopTimer(reset: false);
      }
    });
  }


Widget buildTimer() => SizedBox(
            width: 200,
            height: 200,
            child: Stack(
              fit: StackFit.expand,
              children: [
                CircularProgressIndicator(
                  value: seconds / maxSeconds,
                  valueColor: AlwaysStoppedAnimation(Colors.white),
                  strokeWidth: 12,
                  backgroundColor: Colors.greenAccent,
                ),
                GestureDetector(
                  behavior: HitTestBehavior.opaque,
                  onTap: () {
                    if (timer == null) {
                      HapticFeedback.heavyImpact();
                    } else {
                    }
                  },
                  child: Center(child: buildTime()),
                ),
              ],
            ),
          );

Answer 1

如果您需要响应值更改、跟踪某些进度，那么您可以使用

AnimatedBuilder

。您提供给它的动画可确保它根据需要更频繁地重建。

但在这种特殊情况下，当您预先知道要显示多长时间，并且还知道 – 与文件复制或上传不同，文件复制或上传并不总是具有相同的速度 – 时间将完全流逝常规方式，您可以简单地为预定时间创建进度指示器。

TweenAnimationBuilder<double>(
  tween: Tween(begin: 0, end: 1),
  duration: Duration(seconds: 25),
  builder: (context, value, _) => CircularProgressIndicator(value: value),
),

这是迄今为止最简单的方法。您创建一个从零到一的补间动画，为其指定持续时间并使用它来构建进度指示器。