패키지 상세v0.0.8

neon_circular_timer

아름다운 UI로 빠르게 타이머를 만들 수 있도록 도와주는 패키지입니다. 매우 사용자 정의가 가능하여 타이머의 색상, 두께, 시계 텍스트 스타일을 변경할 수 있습니다.

AndroidiOSWebmacOSWindowsLinux

pub.dev API 문서 소스 코드

30일 다운로드: 308
좋아요: 69
Pub 점수: 140

패키지 설치

flutter pub add neon_circular_timer

패키지 개요

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

NeonCircularTimer는 최소한의 노력으로 시각적으로 매력적인 원형 타이머를 만들 수 있도록 설계된 Flutter 패키지입니다. 사용자가 색상, 선 두께 및 텍스트 스타일을 조정할 수 있는 세련되고 사용자 정의 가능한 인터페이스를 제공합니다. 카운트다운, 피트니스 앱 또는 동적 시간 표시가 필요한 모든 앱에 적합하며 Android, iOS, Web, macOS, Windows, Linux 등 모든 주요 플랫폼을 지원합니다. 부드러운 애니메이션과 현대적인 네온 스타일의 미학을 통해 사용자 경험을 향상시킵니다.

사용 사례

피트니스 트래킹
학습 세션 타이머
게임 카운트다운
이벤트 알림
인터랙티브 앱 인터페이스

주요 기능

높은 사용자 정의 가능한 외관
부드러운 애니메이션 전환
여러 플랫폼을 지원합니다
조정 가능한 테두리 두께 및 색상
사용자 정의 텍스트 스타일
네온 스타일의 시각 효과

적합한 대상

카운트다운 기능을 구현하는 개발자
디자인 중심 애플리케이션
크로스 플랫폼 타이머 구현
매력적인 UI 요소가 필요한 앱
미적 요소에 중점을 둔 프로젝트

고려 사항

저사양 기기에서는 성능 최적화가 필요할 수 있습니다
사용자 정의 옵션은 복잡성을 증가시킬 수 있습니다
원형 타이머 디자인에 한정됨
카운트다운이 아닌 시간 표시에 적합하지 않음
고급 효과를 위해 외부 애니메이션 라이브러리에 의존합니다

원본 README

연결된 소스 저장소의 README 원문 스냅샷입니다. 최신 내용은 저장소에서 확인하세요.

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

카테고리

스톱워치, 타이머 및 카운트다운

소스 저장소

neon_circular_timer 프로젝트 이미지

yassinedevop/neon_circular_timer

neon_circular_timer

☆ 11 스타⑂ 7 포크

DartHTMLflutterpackagetimer

이 패키지를 사용하는 프로젝트

아직 데이터가 없습니다.