Detalhes do pacotev0.0.8

neon_circular_timer

Um pacote que ajuda você a criar um cronômetro rapidamente com uma interface bonita, altamente personalizável, você pode alterar a cor, a espessura do cronômetro e o estilo do texto do relógio.

AndroidiOSWebmacOSWindowsLinux

pub.dev Documentação da API Código-fonte

Downloads em 30 dias: 308
Curtidas: 69
Pontos Pub: 140

Instalar pacote

flutter pub add neon_circular_timer

Visão geral do pacote

Orientação gerada a partir de informações públicas. Apenas para referência.

NeonCircularTimer é um pacote Flutter projetado para criar cronômetros circulares visualmente atraentes com esforço mínimo. Oferece uma interface elegante e personalizável, permitindo que os usuários ajustem cores, espessura da linha e estilo de texto para o exibição do cronômetro. Ideal para contagens regressivas, aplicativos de fitness ou qualquer app que precise de um indicador de tempo dinâmico, ele suporta todas as principais plataformas, incluindo Android, iOS, Web, macOS, Windows e Linux. O pacote melhora a experiência do usuário com animações suaves e estética moderna inspirada em néon.

Casos de uso

rastreamento de condicionamento físico
cronômetros de sessão de estudo
Contagem regressiva do jogo
Lembrete de evento
Interfaces de aplicativos interativas

Principais recursos

Aparência altamente personalizável
Transições animadas suaves
Suporta múltiplas plataformas
Largura e cores de traço ajustáveis
Estilo de texto personalizável
Efeitos visuais em estilo neon

Indicado para

Desenvolvedores construindo recursos de contagem regressiva
Aplicações focadas no design
Implementações de temporizador multiplataforma
Aplicativos que precisam de elementos de interface envolventes
Projetos com ênfase estética

Considerações

Pode exigir ajuste de desempenho em dispositivos de baixa potência
Opções de personalização podem aumentar a complexidade
Limitado ao design de cronômetro circular
Não adequado para exibições de tempo não cronometradas
Depende de bibliotecas externas de animação para efeitos avançados

README original

Snapshot do README original do repositório-fonte vinculado. Consulte o repositório para o conteúdo mais recente.

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

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
                    ]),
                   ),

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
                    ]),
                   ),

Parameters

Name	Type	Default Value	Description
`key`	`Key`	null	Key for Countdown Timer.
`neon`	`double`	4.0	The itensity of the neon
`duration`	`int`	required	Countdown duration in Seconds.
`initialDuration`	`int`	0	Countdown initial elapsed Duration in Seconds.
`controller`	`CountDownController`	required	Controls (i.e Start, Pause, Resume, Restart) the Countdown Timer.
`width`	`double`	required	Width of the rectangle that surrounds the circle ( Diameter of the Countdown Timer).
`neonColor`	`Color`	Colors.white54	neon Color for Countdown Widget.
`neonGradient`	`Gradient`	null	neon Gradient for Countdown Widget. Note that neonColor will not be effective if gradient is provided.
`neumorphicEffect`	`bool`	true	show neumorphic border
`innerFillColor`	`Color`	Colors.black12	Filling Color for Countdown Widget.
`innerFillGradient`	`Gradient`	null	Filling Gradient for Countdown Widget. Note that fillColor will not be effective if gradient is provided.
`outerStrokeColor`	`Color`	Colors.white	border Color for Countdown Widget.
`backgroundColor`	`Color`	Colors.white54	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`	10.0	Border Thickness of the Countdown Ring.
`strokeCap`	`StrokeCap`	StrokeCap.round	Begin and end contours with a flat edge and no extension.
`textStyle`	`TextStyle`	Theme.of(context).textTheme.headline3	Text Style for Countdown Text.
`textFormat`	`String`	TextFormat.MM_SS	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.

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

Categorias

Cronômetro, Cronômetro e Contagem Regressiva

Repositório-fonte

Capa do projeto neon_circular_timer

yassinedevop/neon_circular_timer

neon_circular_timer

☆ 11 Estrelas⑂ 7 Forks

DartHTMLflutterpackagetimer

Projetos que usam este pacote

Ainda não há dados.