Flutter counter with Future delayed

0 votes

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?

Apr 17, 2023 in Flutter by sarit
• 1,830 points
1,775 views

1 answer to this question.

0 votes

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.

answered Apr 17, 2023 by pooja

Related Questions In Flutter

0 votes
1 answer

flutter web build JS function with external JS library

The code you provided seems to be ...READ MORE

answered Apr 10, 2023 in Flutter by vinayak
2,297 views
0 votes
1 answer

3d Model In Flutter with GLB, OBJ, or GLTF file

To integrate a 3D model into Flutter ...READ MORE

answered Apr 13, 2023 in Flutter by pooja
1,944 views
0 votes
1 answer

flutter, avatarGlow is not working at all with fluoatingbutton

Based on the code you provided, it ...READ MORE

answered Apr 14, 2023 in Flutter by Anitha
735 views
0 votes
1 answer

What is the future of flutter?

Hi@MD, Flutter is a rather new cross-platform framework ...READ MORE

answered Jul 17, 2020 in Others by akhtar
• 38,260 points
1,182 views
0 votes
1 answer

What is Flutter?

Hi@akhtar, Flutter is an app SDK for building ...READ MORE

answered Jul 17, 2020 in Others by MD
• 95,460 points
1,498 views
0 votes
1 answer

How to install Flutter in Windows system?

Hi@akhtar, You can follow the below-given steps to ...READ MORE

answered Jul 17, 2020 in Others by MD
• 95,460 points
1,803 views
0 votes
1 answer

How can I change the app display name build with Flutter?

Yes, you can change the app display ...READ MORE

answered Mar 21, 2023 in Flutter by venky
2,635 views
0 votes
1 answer

flutter problem with Getx ,socket.io and node.js

Check that you have added the necessary ...READ MORE

answered Apr 6, 2023 in Flutter by vishalini
777 views
webinar REGISTER FOR FREE WEBINAR X
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP