neon circular timer

September 22, 2021 library, Library, packages, Packages, Time Tracking

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

Usage

  NeonCircularTimer(
                width: 200,
                    duration: 20,
                    strokeWidth: 10,
                    textFormat: TextFormat.MM_SS,
                    isTimerTextShown: true,
                    neumorphicEffect: true,
                    textStyle: Theme.of(context).textTheme.headline3,
                    outerStrokeColor: Colors.grey.shade100,
                    fillGradient: LinearGradient(colors: [
                      Colors.greenAccent.shade200,
                      Colors.blueAccent.shade400
                    ]),
                    neonGradient: LinearGradient(colors: [
                      Colors.greenAccent.shade200,
                      Colors.blueAccent.shade400
                    ]),
                    strokeCap: StrokeCap.round,
                    fillColor: Colors.black12,
                    backgroudColor: Colors.grey.shade100,
                    neonColor: Colors.blue.shade900),

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,
                    strokeWidth: 10,
                    textFormat: TextFormat.MM_SS,
                    isTimerTextShown: false,
                    neumorphicEffect: true,
                    textStyle: Theme.of(context).textTheme.headline3,
                    outerStrokeColor: Colors.grey.shade100,
                    fillGradient: LinearGradient(colors: [
                      Colors.greenAccent.shade200,
                      Colors.blueAccent.shade400
                    ]),
                    neonGradient: LinearGradient(colors: [
                      Colors.greenAccent.shade200,
                      Colors.blueAccent.shade400
                    ]),
                    strokeCap: StrokeCap.round,
                    fillColor: Colors.black12,
                    backgroudColor: Colors.grey.shade100,
                    neonColor: Colors.blue.shade900),

with `neumorphicEffect` is `false` and `isTimerTextShown` is `false`

  NeonCircularTimer(
                width: 200,
                    duration: 20,
                    strokeWidth: 10,
                    textFormat: TextFormat.MM_SS,
                    isTimerTextShown: false,
                    neumorphicEffect: false,
                    outerStrokeColor: Colors.grey.shade100,
                    fillGradient: LinearGradient(colors: [
                      Colors.greenAccent.shade200,
                      Colors.blueAccent.shade400
                    ]),
                    neonGradient: LinearGradient(colors: [
                      Colors.greenAccent.shade200,
                      Colors.blueAccent.shade400
                    ]),
                    strokeCap: StrokeCap.round,
                    fillColor: Colors.black12,
                    neonColor: Colors.blue.shade900),

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 rectangle that surrounds the circle ( Diameter of the Countdown Timer).
`neonColor`	`Color`	null	neon Color for Countdown Widget.
`neonGradient`	`Gradient`	null	neon Gradient for Countdown Widget. Note that ringColor will not be effective if gradient is provided.
`neumorphicEffect`	`bool`	true	show neumorphic border
`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.
`outerStrokeColor`	`Color`	null	border Color for Countdown Widget.
`backgroundColor`	`Color`	null	must be provided if you choose to use neumorphic effect .
`outerStrokeGradient`	`Gradient`	null	border 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.

Download neon circular timer package source code on GitHub

https://github.com/yassinedevop/neon_circular_timer

Flutterappworld

Provides the list of the opensource Flutter apps collection with GitHub repository.