here is my code (READ THE COMMENTS)

Widget progressIndecator() {
return Countdown(

  // here I have the number in seconds and he is counting down on runtime
  seconds: 10,

  build: (BuildContext context, double time) => SizedBox(
    width: double.infinity,
    height: 40.h,
    child: LiquidLinearProgressIndicator(

      // here is my indicator value also running on runtime
      value: 0.5, // accepts only numbers between 0 and 1.  the problem is, my timer in seconds and my indicator value between 0 and 1 
      
      valueColor: AlwaysStoppedAnimation(
        Colors.red,
      ), 
      backgroundColor: Colors
          .transparent,
      borderColor: Colors.black12,
      borderWidth: 1,
      borderRadius: 20.r,
      direction: Axis
          .horizontal, 
      center: Text((time / 100).toString()),
    ),
  ),
  interval: Duration(milliseconds: 100),
  onFinished: () {
    print('Timer is done!');
  },
);

}

so how to make this works and convert the number in second to a number between 0 and 1 . please if you answer. provide a code

CodePudding user response：

Since you did not provide the countdown package you used, can you try this:

class MyProgressIndicator extends StatefulWidget {

  const MyProgressIndicator({Key? key}) : super(key: key);

  @override
  State<MyProgressIndicator> createState() => _MyProgressIndicatorState();
}

class _MyProgressIndicatorState extends State<MyProgressIndicator> {
  Timer? _timer;
  int _progress = 0;

  @override
  void initState() {
    super.initState();
    startTimer();
  }

  @override
  Widget build(BuildContext context) {
    return  SizedBox(
        width: double.infinity,
        height: 40,
        child: LiquidLinearProgressIndicator(
          // here is my indicator value also running on runtime
          value: _progress /
              10, // accepts only numbers between 0 and 1.  the problem is, my timer in seconds and my indicator value between 0 and 1
          valueColor: const AlwaysStoppedAnimation(
            Colors.red,
          ),
          backgroundColor: Colors.transparent,
          borderColor: Colors.black12,
          borderWidth: 1,
          borderRadius: 20,
          direction: Axis.horizontal,
          center: Text(('${(_progress / 10) * 100}%').toString()),
        ),
      );
   
  }

  void startTimer() {
    const oneSec = Duration(seconds: 1);
    _timer = Timer.periodic(
      oneSec,
      (Timer timer) {
        if (_progress == 10) {
          setState(() {
            timer.cancel();
          });
        } else {
          setState(() {
            _progress  ;
          });
        }
      },
    );
  }
}

CodePudding user response：

The better way to solve this

class ProgressIndecator extends StatefulWidget {
  const ProgressIndecator({Key? key}) : super(key: key);

  @override
  State<ProgressIndecator> createState() => _ProgressIndecatorState();
}

class _ProgressIndecatorState extends State<ProgressIndecator>
    with SingleTickerProviderStateMixin {
  AnimationController? controller;
  Animation<double>? animation;

  @override
  void initState() {
    super.initState();
    load();
  }

  void load() {
    controller =
        AnimationController(duration: const Duration(seconds: 10), vsync: this);
    animation = Tween(begin: 0.0, end: 1.0).animate(controller!)
      ..addListener(() {
        // Do something
        setState(() {});
      });
      controller!.forward();
  }

  @override
  void dispose() {
    controller!.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Test"),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            LinearProgressIndicator(
              value: animation!.value,
            ),
            Text(
              (animation!.value * 10).toStringAsFixed(0) ,
            )
          ],
        ),
      ),
    );
  }
}