如何使用自定义进度条实现倒数计时器

如何解决如何使用自定义进度条实现倒数计时器

我是 Flutter 的新手，我想用多色自定义水平进度条实现倒数计时器。从左到右。我尽力实现这一点。但是我的进度条从右到左开始，并在我的倒计时结束之前结束。我希望我的进度条在我的倒计时开始时开始。但我不明白我该怎么做。所以我为此提供了开始按钮。如何在没有开始按钮的情况下从左到右启动我的进度条？

这是我的代码：

void main() {
runApp(MyApp());
}

class MyApp extends StatelessWidget {
// This widget is the root of your application.

@override
Widget build(BuildContext context) {
return MaterialApp(
  home: Scaffold(
    appBar: AppBar(
      actions: <Widget>[
         FlatButton(
            textColor: Colors.white,shape: CircleBorder(side: BorderSide(color: 
 Colors.transparent)),onpressed: () {},child: CountdownFormatted(
               duration: Duration(hours: 00,minutes: 2,seconds: 00),builder: (BuildContext ctx,String remaining) {
                 return Text(
                   remaining,style: TextStyle(fontSize: 20),); // 01:00:00
               },)
         ),],),body: Center(
      child: ChangeNotifierProvider<TimeState>(
        create: (context) => TimeState(),child: Column(
          mainAxisAlignment: MainAxisAlignment.center,crossAxisAlignment: CrossAxisAlignment.center,children: [
            Consumer<TimeState>(
              builder: (context,timeState,_) => CustomProgressBar(
                width: 420,value: timeState.time,totalValue: 100,SizedBox(height: 10,Consumer<TimeState>(
              builder: (context,_) => RaisedButton(
                color: Colors.lightBlue,child: Text("Start",style: TextStyle(color: Colors.white),onpressed: (){
                  Timer.periodic(Duration(seconds: 1),(timer) {
                    if(timeState.time == 0)
                      timer.cancel();
                    else
                    timeState.time -= 1;
                  });
                },)
          ],)
);
}
}
class CustomProgressBar extends StatelessWidget {
final double width;
final int value;
final int totalValue;

CustomProgressBar({this.width,this.value,this.totalValue});

@override
Widget build(BuildContext context) {
// Todo: implement build
double ratio = value / totalValue;
return Row(
    mainAxisAlignment: MainAxisAlignment.center,children: [
      Stack(
        children: [
          Container(
            width: width,height: 10,decoration: Boxdecoration(color: Colors.grey[300]),Material(
            borderRadius: BorderRadius.circular(5),child: AnimatedContainer(
                height: 10,width: width * ratio,duration: Duration(milliseconds: totalValue),decoration: Boxdecoration(
                    color: (ratio < 0.3) ?
                    Colors.red : (ratio < 0.6) ?
                    Colors.orange : (ratio < 0.9) ?
                    Colors.Amber : Colors.green,borderRadius: BorderRadius.circular(5)
                )
            ),)
    ]
  );
 }
 }
 class TimeState with ChangeNotifier{
 int _time = 100;
 int get time => _time;
 set time(int newTime){
_time = newTime;
 notifyListeners();
 }
 }

这段代码给了我这个输出：