Detalhes do pacotev0.2.4

circular_countdown_timer

Crie uma contagem regressiva circular animada usando o Circular Countdown Timer.

AndroidiOSWebmacOSWindowsLinux

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

Downloads em 30 dias: 30,4 mil
Curtidas: 617
Pontos Pub: 140

Instalar pacote

flutter pub add circular_countdown_timer

Visão geral do pacote

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

Um pacote Flutter que permite aos desenvolvedores criar cronômetros circulares animados com transições visuais suaves. Oferece um widget de temporizador personalizável e visualmente atraente ideal para aplicativos que exigem interações baseadas no tempo, como quizzes, rastreamento de condicionamento físico ou sessões de meditação. O temporizador suporta cores configuráveis, largura de traço e efeitos de animação, tornando-o adequado para casos de uso simples e complexos. Desenvolvido com desempenho em mente, funciona com eficiência em todas as principais plataformas, incluindo móvel, web e desktop.

Casos de uso

Aplicativos de quiz
Temporizadores de fitness e treino
Sessões de meditação e foco
Contagem regressiva de eventos
Aplicativos de aprendizagem interativa

Principais recursos

Exibição de progresso circular animada
Cores e largura de traço personalizáveis
animação de contagem regressiva suave
Compatibilidade multiplataforma
Integração fácil com widgets do Flutter
Horários de início e fim configuráveis

Indicado para

Desenvolvedores construindo aplicativos sensíveis ao tempo
Designers procurando componentes de interface atraentes
Criadores de aplicativos educacionais e de bem-estar
Aplicativos que exigem visuais intuitivos de contagem regressiva

Considerações

Requer conhecimento básico de widgets do Flutter
Limitado ao design de cronômetro circular
Sem funcionalidade embutida de pausa/resumo
Pode ser necessário lógica adicional para cenários de temporização complexos
Não otimizado para durações extremamente longas de contagem regressiva

README original

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

Circular Countdown Timer

Make an animated circular countdown using Circular Countdown Timer.

Getting Started

To use this plugin, add circular_countdown_timer as a dependency in your pubspec.yaml file.

Features

Forward Countdown Timer.
Reverse Countdown Timer.
Start, Pause, Resume, Restart and Reset Timer.

Usage

CircularCountDownTimer(
     duration: 10,
     initialDuration: 0,
     controller: CountDownController(),
     width: MediaQuery.of(context).size.width / 2,
     height: MediaQuery.of(context).size.height / 2,
     ringColor: Colors.grey[300]!,
     ringGradient: null,
     fillColor: Colors.purpleAccent[100]!,
     fillGradient: null,
     backgroundColor: Colors.purple[500],
     backgroundGradient: null,
     strokeWidth: 20.0,
     strokeCap: StrokeCap.round,
     textStyle: TextStyle(
         fontSize: 33.0, color: Colors.white, fontWeight: FontWeight.bold),
     textAlign: TextAlign.center,
     textFormat: CountdownTextFormat.S,
     isReverse: false,
     isReverseAnimation: false,
     isTimerTextShown: true,
     autoStart: false,
     onStart: () {
        debugPrint('Countdown Started');
     },
     onComplete: () {
        debugPrint('Countdown Ended');
     },
     onChange: (String timeStamp) {
        debugPrint('Countdown Changed $timeStamp');
     },
     timeFormatterFunction: (defaultFormatterFunction, duration) {
        if (duration.inSeconds == 0) {
           return "Start";
        } else {
           return Function.apply(defaultFormatterFunction, [duration]);
        }
     },
 );

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 Countdown Widget.
`height`	`double`	null	Height of the Countdown Widget.
`ringColor`	`Color`	null	Ring Color for Countdown Widget.
`ringGradient`	`Gradient`	null	Ring Gradient for Countdown Widget. Note that ringColor will not be effective if gradient is provided.
`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.
`backgroundColor`	`Color`	null	Background Color for Countdown Widget.
`backgroundGradient`	`Gradient`	null	Background 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.
`onChange`	`ValueChanged<String>`	null	This Callback will execute when the Countdown Changes.
`timeFormatterFunction`	`Function(Function(Duration duration) defaultFormatterFunction,Duration duration)`	null	This Callback allows you to format the current duration to any String in Countdown Widget.