如何在给定的分钟内以编程方式更新圆形百分比指示器的进度颜色？答案

【问题标题】：How to update the progress color of CircularPercentIndicator programatically for a given period of minutes?如何在给定的分钟内以编程方式更新圆形百分比指示器的进度颜色？
【发布时间】：2021-02-03 08:46:10
【问题描述】：

我有这个组件：

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 分钟的百分比。我尝试过玩不同的东西，但要么太不流畅，要么很快就完成了。我究竟做错了什么？谢谢

【问题讨论】：

标签： flutter flutter-animation flutter-circularprogressindicator

【解决方案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);
        });
      });
    }
  }

【讨论】：

【解决方案2】：

嘿，您的代码 _startTimer() 功能看起来不错，但您的 onlclick 有问题，已更新您的代码试试这个

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;
      });
    });
  }

【讨论】：

感谢您的评论，但这不是我要找的 :) 我遇到的问题是进度指示器。