패키지 상세v0.2.4

circular_countdown_timer

Circular Countdown Timer를 사용하여 애니메이션형 원형 카운트다운을 만드세요.

AndroidiOSWebmacOSWindowsLinux

pub.dev API 문서 소스 코드

30일 다운로드: 3만
좋아요: 617
Pub 점수: 140

패키지 설치

flutter pub add circular_countdown_timer

패키지 개요

공개 정보를 바탕으로 생성한 선택 가이드입니다.

개발자가 부드러운 시각적 전환을 갖춘 애니메이션 원형 카운트다운 타이머를 만들 수 있도록 해주는 플러터 패키지입니다. 퀴즈, 피트니스 추적, 명상 세션과 같은 시간 기반 상호작용이 필요한 앱에 적합한 사용자 정의가 가능한 시각적으로 매력적인 타이머 위젯을 제공합니다. 색상, 선 두께 및 애니메이션 효과를 구성할 수 있어 단순한 경우에서부터 복잡한 경우까지 모두 적합합니다. 성능을 고려하여 제작되어 모바일, 웹, 데스크톱 등 모든 주요 플랫폼에서 효율적으로 작동합니다.

사용 사례

퀴즈 애플리케이션
피트니스 및 워크아웃 타이머
명상 및 집중 세션
이벤트 카운트다운
상호작용 학습 앱

주요 기능

애니메이션 원형 진행 표시
사용자 정의 가능한 색상 및 선 두께
부드러운 카운트다운 애니메이션
크로스 플랫폼 호환성
Flutter 위젯과의 간편한 통합
사용자 정의 시작 및 종료 시간

적합한 대상

시간 민감한 앱을 개발하는 개발자
매력적인 UI 컴포넌트를 찾는 디자이너
교육 및 웰니스 앱 개발자
직관적인 카운트다운 시각 효과가 필요한 앱

고려 사항

Flutter 위젯에 대한 기본 지식이 필요합니다
원형 타이머 디자인에 한정됨
내장된 일시정지/재개 기능 없음
복잡한 타이밍 시나리오를 처리하기 위해 추가적인 로직이 필요할 수 있습니다
매우 긴 카운트다운 기간에 최적화되지 않음

원본 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.