Circular Countdown Timer Package in Flutter
Today, I’ll write about a highly preferred countdown timer package. It is published by an individual developer, Muhammad. And the package has an MIT Licence.
Adding dependency and installing the package is similar to all other packages. The usage of the widget looks like below with values:
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),
textFormat: CountdownTextFormat.S,
isReverse: false,
isReverseAnimation: false,
isTimerTextShown: true,
autoStart: false,
onStart: () {
print('Countdown Started');
},
onComplete: () {
print('Countdown Ended');
},
);
Here is a gif to imagine how the package works:
CountDownController has methods like start(), pause(), resume(), restart(), and getTime(). By this controller you can do any related action whenever you want.
The duration and initialDuration parameters clearly describe the duration related to animation. And isReverse parameter decides the timer to forward or backward that means zero to max or max to zero.
There are 2 other parameters onStart and onComplete those will be function. They make it easier to get the next action when the timer is started or completed.
Width, height, ringColor, and fillColor are required parameters of the widget. Besides those, we can customize backgroundColor, textStyle, and textFormat. These all properties make the widget highly reusable and provide great design capabilities with functionalities.
You can check the implementation of the package in my repo.