如何实现前进进度条

Question

我是 flutter 的新手，我想用多色自定义线性进度条实现倒数计时器。从左到右。我尽力实现这一点。但是我的进度条从右到左开始，在倒计时结束之前结束。我希望我的进度条在倒计时开始时开始。但我不明白我该怎么做。所以我给 this.how 的开始按钮我可以在没有开始按钮的情况下从左到右开始我的进度条吗？

这是我的代码

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

此代码输出看起来像这样

这个进度条从后面开始，我想要它从前面开始。

Answer 1

我查看了您的源代码。问题出在您指定的宽度上。您正在使用计时器并根据您指定的宽度。您从最大值开始计时器，这是您的全宽。这就是为什么它从全宽开始并随着您的计时器从最长时间开始减少而不断减少的原因。

将 AnimatedContainer 的宽度更改为 width: width - (width * ratio),

如何实现前进进度条

How to implement forward progress bar

progress-bar

flutter