插件详情v0.2.4

circular_countdown_timer

使用圆形倒计时器创建一个动画圆形倒计时。

AndroidiOSWebmacOSWindowsLinux

pub.dev API 文档源代码

近 30 天下载: 3万
喜欢数: 617
Pub 分数: 140

安装插件

flutter pub add circular_countdown_timer

插件介绍

基于插件公开信息、社区数据与项目使用情况整理的选型参考。

一个 Flutter 包，使开发者能够创建带有平滑视觉过渡的动画圆形倒计时器。它提供了一个可自定义、视觉效果出色的计时器组件，非常适合需要基于时间交互的应用程序，例如测验、健身追踪或冥想会话。该计时器支持可配置的颜色、描边宽度和动画效果，适用于简单到复杂的各种用例。专为性能而设计，可在所有主要平台（包括移动设备、网页和桌面）上高效运行。

适合场景

测验应用
健身和锻炼计时器
冥想与专注会话
事件倒计时
互动式学习应用

主要特点

动画圆形进度显示
可自定义的颜色和笔画宽度
平滑倒计时动画
跨平台兼容性
与 Flutter 小部件的轻松集成
可配置的开始和结束时间

适合对象

开发时间敏感应用的开发者
寻求吸引人的UI组件的设计人员
教育和健康应用程序开发者
需要直观倒计时视觉效果的应用程序

使用建议

需要具备 Flutter Widget 的基础知识
仅限圆形计时器设计
无内置的暂停/恢复功能
可能需要额外的逻辑来处理复杂的定时场景
未针对极长倒计时持续时间进行优化

原始 README

以下为关联源码仓库的 README 原文快照，最新内容请访问源码仓库。

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.