circular_countdown_timer 0.2.2 icon indicating copy to clipboard operation
circular_countdown_timer: ^0.2.2 copied to clipboard

Make an animated circular countdown using Circular Countdown Timer.

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),
     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');
     },
 );

Parameters #

NameTypeDefault ValueDescription
keyKeynullKey for Countdown Timer.
durationintnullCountdown duration in Seconds.
initialDurationint0Countdown initial elapsed Duration in Seconds.
controllerCountDownControllernullControls (i.e Start, Pause, Resume, Restart) the Countdown Timer.
widthdoublenullWidth of the Countdown Widget.
heightdoublenullHeight of the Countdown Widget.
ringColorColornullRing Color for Countdown Widget.
ringGradientGradientnullRing Gradient for Countdown Widget. Note that ringColor will not be effective if gradient is provided.
fillColorColornullFilling Color for Countdown Widget.
fillGradientGradientnullFilling Gradient for Countdown Widget. Note that fillColor will not be effective if gradient is provided.
backgroundColorColornullBackground Color for Countdown Widget.
backgroundGradientGradientnullBackground Gradient for Countdown Widget. Note that backgroundColor will not be effective if gradient is provided.
strokeWidthdouble5.0Border Thickness of the Countdown Ring.
strokeCapStrokeCapStrokeCap.buttBegin and end contours with a flat edge and no extension.
textStyleTextStyleTextStyle(fontSize: 16.0,color: Colors.black,)Text Style for Countdown Text.
textFormatStringnullFormat for the Countdown Text.
isReverseboolfalseHandles Countdown Timer (true for Reverse Countdown (max to 0), false for Forward Countdown (0 to max)).
isReverseAnimationboolfalseHandles Animation Direction (true for Reverse Animation, false for Forward Animation).
isTimerTextShownbooltrueHandles visibility of the Countdown Text.
autoStartbooltrueHandles the timer start.
onStartVoidCallbacknullThis Callback will execute when the Countdown Starts.
onCompleteVoidCallbacknullThis Callback will execute when the Countdown Ends.
onChangeValueChanged<String>nullThis Callback will execute when the Countdown Changes.

Demo #

demo

Youtube #

Bekar Programmer

Buy Me A Coffee

310
likes
130
pub points
97%
popularity

Publisher

unverified uploader

Make an animated circular countdown using Circular Countdown Timer.

Repository (GitHub)
View/report issues

Documentation

API reference

License

Icon for licenses.MIT (LICENSE)

Dependencies

flutter

More

Packages that depend on circular_countdown_timer