Circular Progress Indicator - Maths Questions

user_1573604 0
Viewed 224

Ok, I am using a circularProgressIndicator to show when a timer reaches complete, however my brain has ceased to function and I can't get the math to work for it.

  1. The timer value is 90 seconds
  2. The progress indicator is 100% at 1, or 50% at 0.5 etc..
  3. Every second I reduce the 90 seconds timer by 1 second so show the countdown

I would also like to incrementally add to the progress indicator value to reach 100% when the timer of 90 seconds has run out.

90 is an example, this will change regularly

What I have tried

1. _intervalProgress += (( 100 / intervalValueSeconds) / 60;
2. _intervalProgress += (( 100 / intervalValueSeconds) * ( 100 / 60 )) / 100;

Question: How can I find a decimal of a value, then divide by 60 in order to iterate ever second <--- Wait, I just realised that the value isn't 60 seconds, it is the value of the timer, therefore I have been calculating it wrong all along.

dart flutter math
2 Answers

Use below logic

 int value = ((yourValue/ 90) * 100).toInt(); // here 90 is higest value which you have
 print(value);

Example:

     int value = ((45/ 90) * 100).toInt();
     print(value);  // Output will be 50
user_51065740

You can calculate and display the progress like below. As per your question, seems like you are looking for the calculation of the variable progressFraction.

class _MyWidgetState extends State<MyWidget> {
  int totalSeconds = 90;
  int secondsRemaining = 90;
  double progressFraction = 0.0;
  int percentage = 0;
  Timer timer;

  @override
  void initState() {
    timer = Timer.periodic(Duration(seconds: 1), (_) {
      if(secondsRemaining == 0){
        return;
      }
      setState(() {
        secondsRemaining -= 1;
        progressFraction = (totalSeconds - secondsRemaining) / totalSeconds;
        percentage = (progressFraction*100).floor();
        
      });
    });
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        SizedBox(height: 20),
        Text('$secondsRemaining seconds remaining'),
        SizedBox(height: 20),
        CircularProgressIndicator(
          value: progressFraction,
        ),
        SizedBox(height: 20),
        Text('$percentage% complete'),
      ],
    );
  }
  
  @override
  void dispose(){
    timer.cancel();
    super.dispose();
  }
  
}

Demo on dartpad - https://dartpad.dev/4fae5a168d5e9421562d0e813b907a01

user_138408640
Related