neon_circular_timer

Make a timer application with a fancy neon effect and beautiful UI

v0.0.3 and above now the timer has also a neumorphic border

Preview of example

example preview

Usage

Use neumorphicEffect to show or hide the neumorphic border

Use isTimerTextShown to show or hide the text

With neumorphicEffect is true and isTimerTextShown is false


  NeonCircularTimer(
                width: 200,
                    duration: 20,
                    controller : your_controller
                    isTimerTextShown: false,
                    neumorphicEffect: true,
                    innerFillGradient: LinearGradient(colors: [
                      Colors.greenAccent.shade200,
                      Colors.blueAccent.shade400
                    ]),
                    neonGradient: LinearGradient(colors: [
                      Colors.greenAccent.shade200,
                      Colors.blueAccent.shade400
                    ]),
                   ),

neum no text

with neumorphicEffect is false and isTimerTextShown is false

  NeonCircularTimer(
                width: 200,
                    duration: 20,
                    controller : your_controller
                    isTimerTextShown: false,
                    neumorphicEffect: false,
                    innerFillGradient: LinearGradient(colors: [
                      Colors.greenAccent.shade200,
                      Colors.blueAccent.shade400
                    ]),
                    neonGradient: LinearGradient(colors: [
                      Colors.greenAccent.shade200,
                      Colors.blueAccent.shade400
                    ]),
                   ),

no txt nor neum

Parameters

NameTypeDefault ValueDescription
keyKeynullKey for Countdown Timer.
neondouble4.0The itensity of the neon
durationintrequiredCountdown duration in Seconds.
initialDurationint0Countdown initial elapsed Duration in Seconds.
controllerCountDownControllerrequiredControls (i.e Start, Pause, Resume, Restart) the Countdown Timer.
widthdoublerequiredWidth of the rectangle that surrounds the circle ( Diameter of the Countdown Timer).
neonColorColorColors.white54neon Color for Countdown Widget.
neonGradientGradientnullneon Gradient for Countdown Widget. Note that neonColor will not be effective if gradient is provided.
neumorphicEffectbooltrueshow neumorphic border
innerFillColorColorColors.black12Filling Color for Countdown Widget.
innerFillGradientGradientnullFilling Gradient for Countdown Widget. Note that fillColor will not be effective if gradient is provided.
outerStrokeColorColorColors.whiteborder Color for Countdown Widget.
backgroundColorColorColors.white54must be provided if you choose to use neumorphic effect .
outerStrokeGradientGradientnullborder Gradient for Countdown Widget. Note that backgroundColor will not be effective if gradient is provided.
strokeWidthdouble10.0Border Thickness of the Countdown Ring.
strokeCapStrokeCapStrokeCap.roundBegin and end contours with a flat edge and no extension.
textStyleTextStyleTheme.of(context).textTheme.headline3Text Style for Countdown Text.
textFormatStringTextFormat.MM_SSFormat 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.

About the Controller

to get the time in seconds use :

controller.getCurrentTimeInSeconds();

to get the time formated into the selected TextFormat use:

controller.getTime();

to control the timer use :

controller.restart(); // to reset the timer
controller.start(); // to start the timer from 0
controller.pause(); // to pause the timer
controller.resume(); // to continue from the value where the timer stopped

Libraries

neon_circular_painter
neon_circular_timer