Flutter 如何使倒计时计时器在不同的持续时间之间自动切换?

Flutter 如何使倒计时计时器在不同的持续时间之间自动切换?,flutter,Flutter,我想为健身应用程序创建一个计时器。所以,我需要计时器以“3,2,1”开头。。然后它切换到40秒的倒计时。40秒结束后,它会自动切换到10秒计时器。这个过程会重复X个集合,就像健身应用程序一样 下面是我的代码。它可以正常启动和停止。但我无法/不知道如何让它自动重复到我想要的倒计时 import 'package:flutter/material.dart'; import 'dart:math' as math; class EachCardPage extends StatefulWidget

我想为健身应用程序创建一个计时器。所以,我需要计时器以“3,2,1”开头。。然后它切换到40秒的倒计时。40秒结束后,它会自动切换到10秒计时器。这个过程会重复X个集合,就像健身应用程序一样

下面是我的代码。它可以正常启动和停止。但我无法/不知道如何让它自动重复到我想要的倒计时

import 'package:flutter/material.dart';
import 'dart:math' as math;

class EachCardPage extends StatefulWidget {
  @override
  _EachCardPageState createState() => _EachCardPageState();
}

class _EachCardPageState extends State<EachCardPage>
    with TickerProviderStateMixin {
  AnimationController controller;
  bool isExercising;
  String get timerString {
    Duration duration = controller.duration * controller.value;
    return '${duration.inMinutes}:${(duration.inSeconds % 60).toString().padLeft(2, '0')}';
  }

  @override
  void initState() {
    super.initState();
    isExercising = false;
    controller = AnimationController(
      vsync: this,
      duration: Duration(seconds: 5),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.green,
      body: AnimatedBuilder(
          animation: controller,
          builder: (context, child) {
            return Stack(
              children: <Widget>[
                Align(
                  alignment: Alignment.bottomCenter,
                  child: Container(
                    color: Color(0xFF2D3653),
                    height:
                        controller.value * MediaQuery.of(context).size.height,
                  ),
                ),
                Padding(
                  padding: EdgeInsets.all(8.0),
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: <Widget>[
                      Expanded(
                        child: Align(
                          alignment: FractionalOffset.center,
                          child: AspectRatio(
                            aspectRatio: 1.0,
                            child: Stack(
                              children: <Widget>[
                                Positioned.fill(
                                  child: CustomPaint(
                                      painter: CustomTimerPainter(
                                    animation: controller,
                                    backgroundColor: Colors.white,
                                    color: Colors.blue,
                                  )),
                                ),
                                Align(
                                  alignment: FractionalOffset.center,
                                  child: Column(
                                    mainAxisAlignment:
                                        MainAxisAlignment.spaceEvenly,
                                    crossAxisAlignment:
                                        CrossAxisAlignment.center,
                                    children: <Widget>[
                                      Text(
                                        "Count Down Timer",
                                        style: TextStyle(
                                            fontSize: 20.0,
                                            color: Colors.white),
                                      ),
                                      Text(
                                        timerString,
                                        style: TextStyle(
                                            fontSize: 112.0,
                                            color: Colors.white),
                                      ),
                                    ],
                                  ),
                                ),
                              ],
                            ),
                          ),
                        ),
                      ),
                      AnimatedBuilder(
                          animation: controller,
                          builder: (context, child) {
                            return FloatingActionButton.extended(
                                onPressed: () {
                                  setState(() {
                                    isExercising = true;
                                  });
                                  if (controller.isAnimating) {
                                    controller.stop();
                                  } else {
                                    controller.reverse(
                                        from: controller.value == 0.0
                                            ? 1.0
                                            : controller.value);
                                  }
                                },
                                icon: Icon(controller.isAnimating
                                    ? Icons.pause
                                    : Icons.play_arrow),
                                label: Text(
                                    controller.isAnimating ? "Pause" : "Play"));
                          }),
                    ],
                  ),
                ),
              ],
            );
          }),
    );
  }
}

class CustomTimerPainter extends CustomPainter {
  CustomTimerPainter({
    this.animation,
    this.backgroundColor,
    this.color,
  }) : super(repaint: animation);

  final Animation<double> animation;
  final Color backgroundColor, color;

  @override
  void paint(Canvas canvas, Size size) {
    Paint paint = Paint()
      ..color = backgroundColor
      ..strokeWidth = 10.0
      ..strokeCap = StrokeCap.butt
      ..style = PaintingStyle.stroke;

    canvas.drawCircle(size.center(Offset.zero), size.width / 2.0, paint);
    paint.color = color;
    double progress = (1.0 - animation.value) * 2 * math.pi;
    canvas.drawArc(Offset.zero & size, math.pi * 1.5, -progress, false, paint);
  }

  @override
  bool shouldRepaint(CustomTimerPainter old) {
    return animation.value != old.animation.value ||
        color != old.color ||
        backgroundColor != old.backgroundColor;
  }
}
导入“包装:颤振/材料.省道”;
导入'dart:math'作为数学;
类EachCardPage扩展StatefulWidget{
@凌驾
_EachCardPageState createState()=>EachCardPageState();
}
类_每个CardPageState扩展状态
使用TickerProviderStateMixin{
动画控制器;
手术切除;
字符串获取timerString{
持续时间=controller.Duration*controller.value;
返回${duration.inMinutes}:${(duration.inSeconds%60).toString().padLeft(2,'0')};
}
@凌驾
void initState(){
super.initState();
isExercising=假;
控制器=动画控制器(
vsync:这个,,
持续时间:持续时间(秒数:5),
);
}
@凌驾
小部件构建(构建上下文){
返回脚手架(
背景颜色:Colors.green,
body:AnimatedBuilder(
动画:控制器,
生成器:(上下文,子对象){
返回堆栈(
儿童:[
对齐(
对齐:对齐.bottomCenter,
子:容器(
颜色:颜色(0xFF2D3653),
高度:
controller.value*MediaQuery.of(context).size.height,
),
),
填充物(
填充:边缘设置。全部(8.0),
子:列(
mainAxisAlignment:mainAxisAlignment.spaceBetween,
儿童:[
扩大(
子对象:对齐(
对齐:分馏loffset.center,
孩子:AspectRatio(
aspectRatio:1.0,
子:堆栈(
儿童:[
定位填充(
孩子:定制油漆(
油漆工:定制油漆工(
动画:控制器,
背景颜色:Colors.white,
颜色:颜色,蓝色,
)),
),
对齐(
对齐:分馏loffset.center,
子:列(
主轴对准:
MainAxisAlignment.space,
横轴对齐:
交叉轴对齐。中心,
儿童:[
正文(
“倒计时”,
样式:TextStyle(
字体大小:20.0,
颜色:颜色。白色),
),
正文(
时间字符串,
样式:TextStyle(
字体大小:112.0,
颜色:颜色。白色),
),
],
),
),
],
),
),
),
),
动画生成器(
动画:控制器,
生成器:(上下文,子对象){
return FloatingActionButton.extended(
已按下:(){
设置状态(){
isExercising=true;
});
if(控制器正在初始化){
controller.stop();
}否则{
控制器。反向(
from:controller.value==0.0
? 1.0
:controller.value);
}
},
图标:图标(controller.isAnimating)
?图标。暂停
:图标。播放(箭头),
标签:文本(
controller.isAnimating?“暂停”:“播放”);
}),
],
),
),
],
);
}),
);
}
}
类CustomTimerPaint扩展了CustomPainter{
自定义时间油漆工({
这个,动画,
这个背景色,
这个颜色,
}):super(重新绘制:动画);
最终动画;
最终颜色背景色,颜色;
@凌驾
空心油漆(帆布,尺寸){
油漆油漆=油漆()
…颜色=背景颜色
..冲程宽度=10.0
..strokeCap=strokeCap.butt
..风格=绘画风格.笔划;
画布.画圈(大小.中心(偏移.零),大小.宽度/2.0,绘制);
paint.color=颜色;
双进度=(
class TimersIssue extends StatefulWidget {
  @override
  _TimersIssueState createState() => _TimersIssueState();
}

class _TimersIssueState extends State<TimersIssue> {
  Timer _countdownTimer;
  String displayCountdown = '0';

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          RaisedButton(
            child: Text('Start'),
            onPressed: () => runTimer(3),
          ),
          RaisedButton(
            child: Text('Reset'),
            onPressed: resetTimer,
          ),
          Text(displayCountdown)
        ],
      ),
    );
  }

  void runTimer(int seconds){
    _countdownTimer = Timer.periodic(Duration(seconds: 1), (timer){
      setState(() {
        displayCountdown = (seconds-timer.tick+1).toString();
      });
      if(timer.tick == seconds){
        _countdownTimer.cancel();
        nextTimer(seconds);
      }
    });
  }

  void nextTimer(int seconds){
    switch(seconds){
      case 3:
        runTimer(30);
        break;
      case 40:
        runTimer(10);
        break;
      case 10:
        runTimer(40);
    }
  }

  void resetTimer(){
    _countdownTimer.cancel();
    setState(() {
      displayCountdown = '0';
    });
  }
}