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 and Restart Timer.

Usage

CircularCountDownTimer(
     duration: 10,
     controller: CountDownController(),
     width: MediaQuery.of(context).size.width / 2,
     height: MediaQuery.of(context).size.height / 2,
     color: Colors.grey[300],
     fillColor: Colors.purpleAccent[100],
     backgroundColor: Colors.purple[500],
     strokeWidth: 20.0,
     strokeCap: StrokeCap.round,
     textStyle: TextStyle(
         fontSize: 33.0, color: Colors.white, fontWeight: FontWeight.bold),
     textFormat: CountdownTextFormat.SS,
     isReverse: false,
     isReverseAnimation: false,
     isTimerTextShown: true,
     autoStart: true,
     onStart: () {
         print('Countdown Started');
     },
     onComplete: () {
         print('Countdown Ended');
     },
 );

Parameters

NameTypeDefault ValueDescription
keyKeynullKey for Countdown Timer.
durationintnullCountdown duration in Seconds.
controllerCountDownControllernullControls (i.e Start, Pause, Resume, Restart) the Countdown Timer.
widthdoublenullWidth of the Countdown Widget.
heightdoublenullHeight of the Countdown Widget.
colorColornullRing Color for Countdown Widget.
fillColorColornullFilling Color for Countdown Widget.
backgroundColorColornullBackground Color for Countdown Widget.
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.

Demo

demo

Libraries

circular_countdown_timer
custom_timer_painter