Circular Countdown Timer
Make an animated circular countdown using Circular Countdown Timer.
Getting Started
To use this plugin, add circular_countdown_timer as a dependency in your pubspec.yaml file.
Features
- Forward Countdown Timer.
- Reverse Countdown Timer.
- Start, Pause, Resume, Restart and Reset Timer.
Usage
CircularCountDownTimer(
duration: 10,
initialDuration: 0,
controller: CountDownController(),
width: MediaQuery.of(context).size.width / 2,
height: MediaQuery.of(context).size.height / 2,
ringColor: Colors.grey[300]!,
ringGradient: null,
fillColor: Colors.purpleAccent[100]!,
fillGradient: null,
backgroundColor: Colors.purple[500],
backgroundGradient: null,
strokeWidth: 20.0,
strokeCap: StrokeCap.round,
textStyle: TextStyle(
fontSize: 33.0, color: Colors.white, fontWeight: FontWeight.bold),
textAlign: TextAlign.center,
textFormat: CountdownTextFormat.S,
isReverse: false,
isReverseAnimation: false,
isTimerTextShown: true,
autoStart: false,
onStart: () {
debugPrint('Countdown Started');
},
onComplete: () {
debugPrint('Countdown Ended');
},
onChange: (String timeStamp) {
debugPrint('Countdown Changed $timeStamp');
},
timeFormatterFunction: (defaultFormatterFunction, duration) {
if (duration.inSeconds == 0) {
return "Start";
} else {
return Function.apply(defaultFormatterFunction, [duration]);
}
},
);
Parameters
| Name |
Type |
Default Value |
Description |
key |
Key |
null |
Key for Countdown Timer. |
duration |
int |
null |
Countdown duration in Seconds. |
initialDuration |
int |
0 |
Countdown initial elapsed Duration in Seconds. |
controller |
CountDownController |
null |
Controls (i.e Start, Pause, Resume, Restart) the Countdown Timer. |
width |
double |
null |
Width of the Countdown Widget. |
height |
double |
null |
Height of the Countdown Widget. |
ringColor |
Color |
null |
Ring Color for Countdown Widget. |
ringGradient |
Gradient |
null |
Ring Gradient for Countdown Widget. Note that ringColor will not be effective if gradient is provided. |
fillColor |
Color |
null |
Filling Color for Countdown Widget. |
fillGradient |
Gradient |
null |
Filling Gradient for Countdown Widget. Note that fillColor will not be effective if gradient is provided. |
backgroundColor |
Color |
null |
Background Color for Countdown Widget. |
backgroundGradient |
Gradient |
null |
Background Gradient for Countdown Widget. Note that backgroundColor will not be effective if gradient is provided. |
strokeWidth |
double |
5.0 |
Border Thickness of the Countdown Ring. |
strokeCap |
StrokeCap |
StrokeCap.butt |
Begin and end contours with a flat edge and no extension. |
textStyle |
TextStyle |
TextStyle(fontSize: 16.0,color: Colors.black,) |
Text Style for Countdown Text. |
textFormat |
String |
null |
Format for the Countdown Text. |
isReverse |
bool |
false |
Handles Countdown Timer (true for Reverse Countdown (max to 0), false for Forward Countdown (0 to max)). |
isReverseAnimation |
bool |
false |
Handles Animation Direction (true for Reverse Animation, false for Forward Animation). |
isTimerTextShown |
bool |
true |
Handles visibility of the Countdown Text. |
autoStart |
bool |
true |
Handles the timer start. |
onStart |
VoidCallback |
null |
This Callback will execute when the Countdown Starts. |
onComplete |
VoidCallback |
null |
This Callback will execute when the Countdown Ends. |
onChange |
ValueChanged<String> |
null |
This Callback will execute when the Countdown Changes. |
timeFormatterFunction |
Function(Function(Duration duration) defaultFormatterFunction,Duration duration) |
null |
This Callback allows you to format the current duration to any String in Countdown Widget. |
Demo
Youtube
Bekar Programmer
