VOOZH about

URL: https://www.geeksforgeeks.org/flutter/flutter-countdown-timer/

⇱ Flutter - Countdown Timer - GeeksforGeeks


  • Courses
  • Tutorials
  • Interview Prep

Flutter - Countdown Timer

Last Updated : 23 Jul, 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:

Now, run the below command in the terminal.

flutter pub get

Or

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';

Step 4: Add the countdown widget to your screen


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:


Output:


Comment

Explore