Flutter – Countdown Timer

The countdown timer app is about setting a time that moves in reverse order as it shows the time left in the upcoming event. A countdown timer is an accurate timer that can be used for a website or blog to display the countdown to any special event, such as a birthday or anniversary. A sample video is given below to get an idea about what we are going to do in this article.

Step By Step Implementation

Step 1: Create a New Project in Android Studio

To set up Flutter Development on Android Studio please refer to Android Studio Setup for Flutter Development, and then create a new project in Android Studio please refer to Creating a Simple Application in Flutter.

Step 2: Add the package in pubspec.yaml file

Dart

dependencies:
  flutter_timer_countdown: ^1.0.7

Step 3: Import the library where you want to use this widget

We will import the library in file where will make this countdown

Dart

import 'package:flutter_timer_countdown/flutter_timer_countdown.dart';

Step 4: Add the countdown widget in your screen

Dart

TimerCountdown(
            // Endtime where you want to finish
          // the countdown currently
            // It is 5 minutes after app starts
          endTime: DateTime.now().add(
            const Duration(
              minutes: 10,
              seconds: 00,
            ),
          ),
          onEnd: () {
            // Function Called when timer is finished
            print("Timer finished");
          },
)

Now Let us explain different different properties of this widget.

Parameter	Values Type	Description	Default	Required
endtime	DateTime	It is time when you want to complete your time		true
format	enum value (CountDownTimerFormat) define in package	To format the timer coutdown can select different format	CountDownTimerFormat.daysHoursMinutesSeconds	false
onEnd	Function	Called when Countdown is completed	null	false
enableDescriptions	boolean	Toggle between unit of countdown timer	true	false
spacerWidth	double	Space between unit and color	10	false
onTick	Function	Trigger after every seconds .It provides the remaining time after every tick	null	false
daysDescription	String	It represent the description to be written against the days time	Days	false
hoursDescription	String	It represent the description to be written against the hours time	Hours	false
minutesDescription	String	It represent the description to be written against the minutes time	Minutes	false
secondsDescription	String	It represent the description to be written against the seconds time	Seconds	false
descriptionTextStyle	TextStyle	TextStyle For description like days,hours,minutes,seconds	–	false
timeTextStyle	TextStyle	TextStyle For time shown in Countdown	–	false
colonsTextStyle	TextStyle	TextStyle for colons by which time is seperated	–	false

Complete Source Code

Dart

import 'package:flutter/material.dart';
import 'package:flutter_timer_countdown/flutter_timer_countdown.dart';

class CountdownTimerScreen extends StatelessWidget {
  const CountdownTimerScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: AppBar(
          title: const Text("Countdown Timer Flutter"),
        ),
      ),
      body: Center(
        child: TimerCountdown(
          // Endtime where you want to
          // finish the countdown currently
          // it is 5 minutes after app starts
          endTime: DateTime.now().add(
            const Duration(
              minutes: 10,
              seconds: 00,
            ),
          ),

          onEnd: () {
            // Function Called when timer is finished
            print("Timer finished");
          },
        ),
      ),
    );
  }
}

Output: