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

Last update: Dec 25, 2021

Related tags

Overview

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.

Fluboard - Calendar wall-board-display built with Flutter and ❤️

Fluboard Calendar wall-board-display built with Flutter and ❤️ Goals Build calendar board (DAKBoard alternative) which easy to install and easy to cus

Dec 27, 2022

Fancy list loading effect or The Shimmer Effect in Flutter

Shimmer Effect in Shimmer Effect is really cool placeholder effect that you can show when you are loading data in the form of a list. To do it in flut

Oct 18, 2022

A flutter package which provides most commonly used widgets with their normal and neon version

This is a flutter package which provides most commonly used widgets with their normal and neon version. There are multiple different types of widgets under this package, which can be used to create more neon theme widget

Oct 7, 2022

The Ken Burns effect is a type of panning and zooming effect used in video production from still imagery.

KenBurns The Ken Burns effect is a type of panning and zooming effect used in video production from still imagery. First add to your dependencies: dep

Apr 28, 2022

In this project, we will design a travel app UI with a parallax effect for a unique scroll experience. You will learn how to create your own parallax effect without using external libraries.

Travel App UI In this part, we will design a travel app UI with a parallax effect for a unique scroll experience. You will learn how to create your ow

Dec 5, 2022

Make your native android Dialog Fancy and Gify.

Make your native android Dialog Fancy and Gify. A library that takes the standard Android Dialog to the next level with a variety of styling options and Gif's. Style your dialog from code.

Jan 2, 2023

A fancy yet beautiful animated widget for your Flutter apps

FancyBar A fancy yet beautiful animated widget for your Flutter apps | Preview Version 1 | |---------|----------| | | | Preview Version 2 | |---------

Oct 10, 2022

Create beautiful Loading and Timer buttons in Flutter

Argon Buttons (Timer and Loading) Create beautiful Loading and Timer buttons using Argon Buttons. No need to worry about handling animations or timers

Dec 11, 2022

Sliding card is a highly customizable flutter package that will help you create beautiful Cards with a sliding animation effect.

Sliding Card Introduction Sliding card is a highly customizable flutter package that will help you create beautiful Cards with a sliding animation eff

Nov 4, 2022

Crop any widget/image in Android, iOS, Web and Desktop with fancy and customizable UI, in pure Dart code.

crop A Flutter package for cropping any widget, not only images. This package is entirely written in Dart and supports Android, iOS, Web and Desktop.

Jan 6, 2023

Clock app - A mobile application where to set alarm, timer and stopwatch

Clock App Mobile application to check the time, set alarm, timer and stop watch

Dec 31, 2022

A time tracking app that respects your privacy and the gets the job done without being fancy.

Time Cop A time tracking app that respects your privacy and gets the job done without getting too fancy. Motivation I'd rather not do time-tracking at

Dec 30, 2022

FlutterBloc - A simple app using Bloc with fancy UI and dio to fetch data

Breaking Bad A new Flutter project using Bloc with little animation. Free Api: h

Dec 6, 2022

building a timer application using the bloc library

flutter_timer A new Flutter project. Getting Started This project is a starting point for a Flutter application. A few resources to get you started if

Nov 4, 2021

Fancy Containers Flutter Package

Fancy Containers Fancy container package lets you add a beautiful gradient container to your Flutter app. Installation Add the latest version of packa

Oct 27, 2022

A basic demonstration for creating a Jardinains (Fancy Pong-Like) Game in Flutter

Jardinains Flutter! 🕹 Play Here - Web https://flutter-jardinains.web.app/#/ Demo Note: For optimal performance run the project in profile mode using

Nov 12, 2022

A fancy easy to use Folding Menu for Flutter Applications

Folding Menu This is an easy to use package for adding Folding Menu to your Flutter Applications Demo Usage To Use, simply add Folding Menu to your St

Nov 26, 2022

Fancy design of radio buttons in Flutter (package).

A Flutter package for new radio button design. With Elegant Animation. Features Usage TODO: Include short and useful examples for package users. Add l

Nov 26, 2021

This is an easy to use Flutter Package for adding Fancy Foldable Sidebar to your Flutter Applications.

Foldable Sidebar An easy to implement Foldable Sidebar Navigation Drawer for Flutter Applications. Current Features Initial Release for Foldable Navig

Nov 26, 2022