😽

circular_countdown_timer 使ってみた

2023/04/23に公開

Flutter

circularcountdownt

tech

概要

circular_countdown_timer というタイマーを簡単に作るパッケージを使用してみました。
完成イメージ

前提条件

・Flutter(dart)の基本的な書き方が分かる

バージョン

・Flutter 3.7.10
・circular_countdown_timer 0.2.3

実装

CircularCountDownTimerを使用して、実装していきます。
たくさんの引数が用意されているので、実装したタイマーに従ってアレンジしてみてください。今回のCircularCountDownTimerは以下になります。

CircularCountDownTimer(
	autoStart: false,
	duration: 3,
	initialDuration: 0,
	controller: controller,
	width: MediaQuery.of(context).size.width / 2,
	height: MediaQuery.of(context).size.width / 2,
	ringColor: Colors.red.shade300,
	fillColor: Colors.grey.shade300,
	backgroundColor: Colors.white,
	strokeWidth: 15.0,
	isReverse: false,
	isReverseAnimation: true,
	textStyle: const TextStyle(
	  fontSize: 33.0,
	  color: Colors.black38,
	  fontWeight: FontWeight.bold,
	),
	textFormat: CountdownTextFormat.MM_SS,
	onComplete: () {
	  ref.read(countdownTimerControllerIsRunningProvider.notifier).state = 0;
	},
	timeFormatterFunction: (_, duration) {
	  if(duration.inMilliseconds == 0){
	    return "00:00:00";
	  } else {
	    return _printDuration(duration);
	  }
	}
),

概要

前提条件

バージョン

実装

Discussion