how to implement countdown timer with custom progress bar

问题

I am new to flutter and I wanted to implement countdown timer with multicolor custom horizontal progress bar. from left to right. i tried my best to implement this. but my progress Bar start from right to left and it ends before my countdown end. and i wants my progress bar start as my countdown start. but i am not understand how do i do that. so i give start button for this.how can i start my progress bar without start button and from left to right ?

here is my code:

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, timeState, _) => 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();
 }
 }

This code give me this output:

来源：https://stackoverflow.com/questions/65739818/how-to-implement-countdown-timer-with-custom-progress-bar