FLUTTER ECOSYSTEM

MattisBrizard/circular_countdown

일, 시간, 초, 포인트 등 다양한 단위에 사용할 수 있는 원형 카운트다운을 나타내는 패키지입니다.

circular_countdown 프로젝트 이미지
Stars
9
Forks
5
최근 푸시(UTC)
2021. 5. 9.
프로젝트 상태
활성
MattisBrizard GitHub avatar
GITHUB User

MattisBrizard ↗

Mobile app & tools developper in Flutter / Dart.

언어DartHTMLSwift

이 저장소가 배포한 패키지

사용 중인 의존성

의존성 목록 2 개
  • flutter{"sdk":"flutter"}
  • flutter_test개발 의존성{"sdk":"flutter"}

원본 README

아래는 영문 원문 스냅샷입니다. 최신 내용은 GitHub에서 확인하세요.

README 펼치기 / 접기

circular_countdown

A package that represents a circular countdown that you can use for every kind of units (days, hours, seconds, points, ...).

Demo

A web demo is available here : https://mattisbrizard.github.io/circular_countdown/#/

Build Status

Getting Started

In the pubspec.yaml of your flutter project, add the following dependency:

dependencies:
  ...
  circular_countdown: ^2.1.0

In your library add the following import:

import  'package:circular_countdown/circular_countdown.dart';

Static countdown

This is the way to create a simple static countdown.

import 'package:flutter/material.dart';
...
return CircularCountdown(
	countdownTotal:  10,
	countdownRemaining:  7,
);
...
https://raw.githubusercontent.com/MattisBrizard/circular_countdown/master/doc/images/static.png

By playing with the parameters, you can change the size, the colors, the size of the gaps, the strokeWidth and more to have more complex Countdowns.

https://raw.githubusercontent.com/MattisBrizard/circular_countdown/master/doc/images/complex.png

Timer countdown

If you want to have full control on the timer (start, pause, etc), please see the section Controlled countdown below.

If you want to use the CircularCountdown widget as a Time Countdown, you can use the built-in TimeCircularCountdown that wraps the timer logic for you: (see how in example)

return TimeCircularCountdown(
    unit: CountdownUnit.seconds,
    countdownTotal: 30,
    onUpdated: (unit, remainingTime) => print('Updated'),
    onFinished: () => print('Countdown finished'),
);
https://raw.githubusercontent.com/MattisBrizard/circular_countdown/master/doc/gifs/timer.gif

You can repeat the timer when ended by using the repeat bool property.

Controlled countdown

To have full control on the timer (play, pause, reset, shared between mutliple screen, etc), you can use CircularCountdown with the timer_controller library.

You can see the code in the example app.

Contribution

If you find a bug or want a feature, but don't know how to fix/implement it, please fill an issue. If you fixed a bug or implemented a feature, please send a pull request.