套件詳情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.