Flutter counter with Future delayed

Question

I want to create a simple counter

String _counterValue = '';
bool _isResendButtonEnable = false;
  Future<void> startCountDown() async {

for (var i = 60; i > 1; i--) {
  Future.delayed(const Duration(seconds: 1)).then((value) => {
        setState(() {
          _counterValue = i.toString();
        })
      });
  }
}

and in UI tree I have simple text showing the _counterValue

Text(_counterValue.toString(),
  style: const TextStyle(fontSize: 9))

but when I run this code I get nothing!! what is the problme?

Answer 1

The problem is that your for loop is executing all the iterations in one go without waiting for the Future.delayed call to complete. So, the counter value is being set to the last value of i (which is 1 in this case) and that's what is being displayed on the UI.

To solve this, you can use an async function with a for loop that awaits the Future.delayed call before setting the counter value. Here's an updated version of your code that should work:

String _counterValue = '';
bool _isResendButtonEnable = false;

Future<void> startCountDown() async {
  for (var i = 60; i > 0; i--) {
    await Future.delayed(const Duration(seconds: 1));
    setState(() {
      _counterValue = i.toString();
    });
  }
}

With this implementation, the Future.delayed call will be awaited for each iteration of the loop, ensuring that the counter value is updated after every second delay.

To know more, join our Flutter Certification today.