如何在给定的分钟内以编程方式更新 CircularPercentIndicator 的进度颜色？

Question

我有这个组件：

GestureDetector(
                onLongPress: () {
                  _startTimer();
                },
                onLongPressUp: () {
                  _timer.cancel();
                },
                onLongPressEnd: (LongPressEndDetails longPressEndDetails) {
                  _timer.cancel();
                },
                child: CircularPercentIndicator(
                  animationDuration: 200,
                  animateFromLastPercent: true,
                  radius: 150.0,
                  lineWidth: 10.0,
                  percent: _progress,
                  progressColor: Colors.red,
                  backgroundColor: Colors.white,
                  animation: true,
                  circularStrokeCap: CircularStrokeCap.butt,
                ),
              ),

而启动定时器的方法是：

void _startTimer() {
    const oneSec = const Duration(milliseconds: 200);
    _timer = Timer.periodic(oneSec, (timer) {
      print(timer.tick.toString());
      final updated = ((_progress + 0.01).clamp(0.0, 1.0) * 100);

      print(updated.round() / 100);
      // if (_progress < 1.0)
      setState(() {
        _progress = updated.round() / 100;
      });
    });
  }

  @override
  void dispose() {
    _timer.cancel();
    super.dispose();
  }

我的问题是，我想缓慢而平滑地填充进度颜色，即根据剩余时间更新百分比。像 Snapchat 录像机之类的东西。我想填写 3 分钟的百分比。我试过玩不同的东西，但要么太不流畅，要么很快就结束了。我究竟做错了什么？谢谢

Answer 1

为什么不简单地使用它

  void _startTimer() {
    if (_progress < 1) {
      const oneSec = const Duration(milliseconds: 200);
      _timer = Timer.periodic(oneSec, (timer) {
        setState(() {
          _progress = min(_progress + (200 / (3 * 60 * 1000)), 1);
        });
      });
    }
  }

Answer 2

嘿，你的代码启动 Timer() 函数看起来不错，但你的 onclick 有问题，已更新你的代码试试这个

GestureDetector(
   onTap: () {
     _startTimer();
              },
              child: CircularPercentIndicator(
                animationDuration: 200,
                animateFromLastPercent: true,
                radius: 50.0,
                lineWidth: 10.0,
                percent: _progress,
                progressColor: Colors.red,
                backgroundColor: Colors.blue,
                animation: true,
                circularStrokeCap: CircularStrokeCap.butt,
              ),
            )

void _startTimer() {
    const oneSec = const Duration(milliseconds: 200);
    _timer = Timer.periodic(oneSec, (timer) {
      if(_progress==1.0)_timer.cancel();
      final updated = ((_progress + 0.01).clamp(0.0, 1.0) * 100);
      setState(() {
        _progress = updated.round() / 100;
      });
    });
  }

如何在给定的分钟内以编程方式更新 CircularPercentIndicator 的进度颜色？

How to update the progress color of CircularPercentIndicator programatically for a given period of minutes?

flutter

flutter-animation

flutter-circularprogressindicator