Flutter - Countdown Timer

Last Updated : 21 Apr, 2025

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.

Step-by-Step Implementation

Step 1: Create a new Flutter Application

Create a new Flutter application using the command Prompt. To create a new app, write the following command and run it.

flutter create app_name

To know more about it refer this article: Creating a Simple Application in Flutter

Step 2: Adding the Dependency

To add the dependency to the pubspec.yaml file, add flutter_timer_countdown as a dependency in the dependencies part of the pubspec.yaml file, as shown below:

Dart

dependencies:
     flutter:
       sdk: flutter
     flutter_timer_countdown: ^1.0.7

Now, run the below command in the terminal.

flutter pub get

Run the below command in the terminal.

flutter pub add flutter_timer_countdown

Step 3: Import dependencies

To use libraries, import all of them in the respective .dart file.

import 'package:flutter_timer_countdown/flutter_timer_countdown.dart';

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 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) is defined in the package	To format the timer countdown can select a different format	CountDownTimerFormat.daysHoursMinutesSeconds	false
onEnd	Function	Called when the Countdown is completed	null	false
enableDescriptions	boolean	Toggle between a unit of the countdown timer	true	false
spacerWidth	double	Space between the unit and the color	10	false
onTick	Function	Trigger after every second. It provides the remaining time after every tick	null	false
daysDescription	String	It represents the description to be written against the day's time	Days	false
hoursDescription	String	It represents the description to be written against the time	Hours	false
minutesDescription	String	It represents the description to be written against the minutes	Minutes	false
secondsDescription	String	It represents the description to be written against the second time	Seconds	false
descriptionTextStyle	TextStyle	TextStyle for descriptions like days, hours, minutes, seconds	-	false
timeTextStyle	TextStyle	TextStyle for the time shown in the Countdown	-	false
colonsTextStyle	TextStyle	TextStyle for colons by which time is separated	-	false

Complete Source Code

main.dart:

main.dart

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

void main() {
  runApp(MyApp());
}

// Main application widget
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: CountdownTimerScreen(),
    );
  }
}

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"),
          backgroundColor: Colors.green,
          foregroundColor: Colors.white,
        ),
      ),
      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:

Shimmer Container in Flutter

flutterwings

Improve

Article Tags :

Flutter - Countdown Timer

Step-by-Step Implementation

Step 1: Create a new Flutter Application

Step 2: Adding the Dependency

Step 3: Import dependencies

Step 4: Add the countdown widget to your screen

Complete Source Code

Similar Reads

Flutter - Countdown Timer

Step-by-Step Implementation

Step 1: Create a new Flutter Application

Step 2: Adding the Dependency

Step 3: Import dependencies

Step 4: Add the countdown widget to your screen

Complete Source Code

Similar Reads

Thank You!

What kind of Experience do you want to share?