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" ); }, ), ), ); } } |
Contact Us