CountDown timer in flutter

A countdown timer is a timekeeping tool that counts down from a specified duration to zero. It is commonly used to measure and display the remaining time before a specific event, deadline, or action takes place. Countdown timers can be found in various formats, such as physical devices, digital displays, software applications, and websites.

Countdown timers are widely used in mobile apps to enhance user experience and engagement. They serve various purposes, including creating excitement in games and challenges, promoting time-limited sales in e-commerce apps, aiding workouts in fitness apps, and ensuring precise cooking in recipe apps. Additionally, countdown timers help users anticipate special events, product launches, or important announcements. They also improve time management in productivity apps and add pressure to quiz and trivia games. Overall, countdown timers are versatile tools that create a sense of urgency and contribute to a more interactive and efficient mobile app experience.

How to create countdown in flutter

In this tutorial we will create a Countdown timer in Flutter application. This will Countdown from 60 seconds to zero. For this we will create a variable with initial value 60. And after each second will decrease its value by 1, and display this value on screen.

Let’s dive into code of Countdown.

First create these two variables

int timerCount = 60;
bool isTimerFinished = false;

The timerCount variable contains the value ‘60’. It means that the timer will start from 60 seconds.
We will see the usage of isTimerFinished variable in next snippet of code.

Now create a function where we will write the logic of this countdown.

countDownTimer() async {  
  for (int x = 60; x > 0; x--) {
    await Future.delayed(Duration(seconds: 1)).then((_) {
      if (timerCount == 1) isTimerFinished = true;
      setState(() {
        timerCount -= 1;
      });
    });
  }
}

This function contains a for loop, this is also starting from 60 and will stop on 1.  This is an asynchronous function. Each iteration of this loop will execute after one second, because have used delayed function.

The await keyword is used to pause the execution of the function until the Future returned by Future.delayed is completed. This means the function won’t proceed to the next line until the specified delay has passed.

We delayed the execution of each iteration by duration of 1 second. After each second we are decreasing value of timerCount variable by 1, until it reaches at 1.

Now last step is to call this function in initState method. So that countdown should be start when we open this screen.

@override
void initState() {
  countDownTimer();
}

Here is the complete code of this screen.

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

  @override
  State<CountdownScreen> createState() => _CountdownScreenState();
}

class _CountdownScreenState extends State<CountdownScreen> {
  int timerCount = 60;
  bool isTimerFinished = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Countdown'),
      ),
      body: Center(
        child: Text('Remaining Time : $timerCount seconds'),
      ),
    );
  }

  countDownTimer() async {
    for (int x = 60; x > 0; x--) {
      await Future.delayed(Duration(seconds: 1)).then((_) {
        if (timerCount == 1) isTimerFinished = true;
        setState(() {
          timerCount -= 1;
        });
      });
    }
  }

  @override
  void initState() {
    countDownTimer();
  }
}

Output