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. |
Comments are closed.