如何在 flutter 中实现这个圆形进度条，使用停止按钮同时停止计时器和进度指示器

Question

带有圆形进度指示器的屏幕 ui 设计

TweenAnimationBuilder(
                      duration: const Duration(seconds: 30),
                      tween: Tween(begin: 0.0, end: 1.0),
                      builder: (context, value, _) => SizedBox(
                        height: 180,
                        width: 180,
                        child: CircularProgressIndicator(
                          value: value,
                          color: const Color(0xff166922),
                          backgroundColor: const Color(0xffFFC500),
                          strokeWidth: 10,
                        ),
                      ),
                      onEnd: () {
                        _controller.repeat();
                      },  
                    ),

Answer 1

________更新：
好吧，我明白了，我的错。我误会了。

既然你已经定义了一个控制器，你可以这样做：

... 
/// Time can have any value here. You will update it anyways. Initialize it under your controller. And also create _isPlaying.
int time = 0
bool _isPlaying = true;
...
/// update your time in the builder so you can 
 builder: (context, value, _) {
          setState(() {
          /// Update Ur time, so you can repeat from this specific point
          time = value;
          });
             return SizedBox(
                        height: 180,
                        width: 180,
                        child: CircularProgressIndicator(
                          value: value,
                          color: const Color(0xff166922),
                          backgroundColor: const Color(0xffFFC500),
                          strokeWidth: 10,
                        ),
                      );
         }
.............
void stopOrContinue(){
   if(_isPlaying){
      /// To stop animation
      _controller.stop();
      _isPlaying = !_isPlaying;
   }else{
      /// To start from a point other than the very beginning.
      _controller.forward(from: time);
   }
   /// To start from beginning
   ///_controller.forward();
}

___旧答案

/// Create your Time, which u will use as the circularProgressIndicator value. 
  int timeCounter = 30;
/// Create your timer, which will count down.
  late Timer timer;
/// Method to start your timer. It will automatically stop if timeCounter is 0.
  void updateExecutionTime() {
    timer = Timer.periodic(const Duration(seconds: 1), (timer) {
      setState(() {
/// Here you will countdown the time and it will update your Indicator.
        timeCounter--;
      });

      if (timeCounter == 0) {
        timer.cancel();
      }
    });
  }

/// Method to stop your timer
void stopTimer() {
  timer.cancel();
}

请注意。这是代码可以创建错误。喜欢：

• 关闭页面时必须取消计时器，如果它仍在运行
• 当你想停止定时器但它还没有初始化时！

但总而言之，这应该对你有用。