Flutter – Countdown Timer
Last Updated :
09 Jan, 2024
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: DateTime.now().add(
const Duration(
minutes: 10,
seconds: 00,
),
),
onEnd: () {
print( "Timer finished" );
},
)
|
Now Let us explain different different properties of this widget.
DateTime
|
It is time when you want to complete your time
|
|
true
|
enum value (CountDownTimerFormat) define in package
|
To format the timer coutdown can select different format
|
CountDownTimerFormat.daysHoursMinutesSeconds
|
false
|
Function
|
Called when Countdown is completed
|
null
|
false
|
boolean
|
Toggle between unit of countdown timer
|
true
|
false
|
double
|
Space between unit and color
|
10
|
false
|
Function
|
Trigger after every seconds .It provides the remaining time after every tick
|
null
|
false
|
String
|
It represent the description to be written against the days time
|
Days
|
false
|
String
|
It represent the description to be written against the hours time
|
Hours
|
false
|
String
|
It represent the description to be written against the minutes time
|
Minutes
|
false
|
String
|
It represent the description to be written against the seconds time
|
Seconds
|
false
|
TextStyle
|
TextStyle For description like days,hours,minutes,seconds
|
–
|
false
|
TextStyle
|
TextStyle For time shown in Countdown
|
–
|
false
|
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: DateTime.now().add(
const Duration(
minutes: 10,
seconds: 00,
),
),
onEnd: () {
print( "Timer finished" );
},
),
),
);
}
}
|
Output:
Share your thoughts in the comments
Please Login to comment...