フラッターカウントダウンタイマー

import'dart：async '; [...]タイマー_timer; int _start = 10; void startTimer（）{const oneSec = const Duration（seconds：1）; _timer = new Timer.periodic（oneSec、（Timer timer）{if（_start == 0）{setState（（）{timer.cancel（）;}）;} else {setState（（）{_ start--;}） ;}}、）; } @override void dispose（）{_ timer.cancel（）; super.dispose（）; } Widget build（BuildContext context）{return new Scaffold（appBar：AppBar（title：Text（ 'Timer test'））、body：Column（children：[RaisedButton（onPressed：（）{startTimer（）;}、child：Text （ 'start'）、）、Text（ '$ _ start'）]、）、）; }
結果 ：
 
 
 
 
 
quiver.asyncライブラリのCountdownTimerクラスを使用することもできます。使用法はさらに簡単です。
 
import'package：quiver / async.dart '; [...] int _start = 10; int _current = 10; void startTimer（）{CountdownTimer countDownTimer = new CountdownTimer（new Duration（seconds：_start）、new Duration（seconds：1）、）; var sub = countDownTimer.listen（null）; sub.onData（（duration）{setState（（）{_ current = _start --duration.elapsed.inSeconds;}）;}）; sub.onDone（（）{print（ 'Done'）; sub.cancel（）;}）; } Widget build（BuildContext context）{return new Scaffold（appBar：AppBar（title：Text（ 'Timer test'））、body：Column（children：[RaisedButton（onPressed：（）{startTimer（）;}、child：Text （ 'start'）、）、Text（ '$ _ current'）]、）、）; }
 
  編集 ：ボタンのクリック動作に関するコメントの質問
 
を使用する上記のコードでTimer.periodic、ボタンがクリックされるたびに新しいタイマーが実際に開始され、これらのタイマーはすべて同じように更新されます_start変数。結果として、カウンターの減少が速くなります。
 
 
 
達成したいことに応じて、この動作を変更するための複数のソリューションがあります。
 
 
ユーザーがカウントダウンを邪魔しないように、一度クリックしたボタンを無効にします（タイマーがキャンセルされたら、ボタンを有効に戻します）
 
ラップボタンを複数回クリックしても効果がないように、null以外の条件でTimer.periodic作成
 
 
if（_timer！= null）{_ timer = new Timer.periodic（...）; }
 
クリックするたびにタイマーを再開する場合は、タイマーをキャンセルしてカウントダウンをリセットします。
 
 
if（_timer！= null）{_ timer.cancel（）; _start = 10; } _timer = new Timer.periodic（...）;
 
ボタンを再生/一時停止ボタンのように機能させたい場合：
 
 
if（_timer！= null）{_ timer.cancel（）; _timer = null; } else {_timer = new Timer.periodic（...）; }
から拡張するRestartableTimerクラスを提供するこの公式非同期パッケージを使用することもできます。タイマーと追加リセット方法。
 
だから電話するだけ_timer.reset（）;各ボタンをクリックします。
 
最後に、CodepenはFlutterをサポートするようになりました！だからここに誰もがそれで遊ぶことができるようにライブの例があります：https：//codepen.io/Yann39/pen/oNjrVOb
  
あらゆる種類のタイマーとその柔軟性を表示するために使用できる汎用タイマーウィジェットを作成しました。
 
このウィジェットは次のプロパティを取ります
 
 
  秒残り ：タイマーを実行する必要がある期間（秒単位）
 
  whenTimeExpires ：タイマーが終了した場合に実行する必要のあるアクション
 
  countDownStyle ：タイマーに与えたいあらゆる種類のスタイル
 
  countDownFormatter ：ユーザーがカウントダウンタイマーを表示したい方法（例：hh mmss文字列のような01時間：20分：45秒
 
 
デフォルトのフォーマッタを提供できます（formatHHMMSS）すべての場所から供給したくない場合に備えて。
 
//これの実装を提供します-formatHHMMSS（duration.inSeconds）;または私が提供したものの下で使用してください。
 
import'package：flutter / material.dart '; class CountDownTimer extends StatefulWidget {const CountDownTimer（{Key key、int secondsRemaining、this.countDownTimerStyle、this.whenTimeExpires、this.countDownFormatter、}）：secondsRemaining = secondsRemaining、super（key：key）;最終整数秒残り;最終関数whenTimeExpires;最終関数countDownFormatter;最終的なTextStylecountDownTimerStyle;状態createState（）=> new _CountDownTimerState（）; } class _CountDownTimerStateは、TickerProviderStateMixin {AnimationController_controller;でStateを拡張します。期間期間; String get timerDisplayString {期間duration = _controller.duration * _controller.value;ウィジェットを返します。countDownFormatter！= null？ widget.countDownFormatter（duration.inSeconds）：formatHHMMSS（duration.inSeconds）; //ユーザーがフォーマッターを提供しない場合は、デフォルトのフォーマッターを使用します//そのためにformatHHMMSSまたは好きなものと呼ばれるメソッドを作成します} @override void initState（）{super.initState（）;期間=新しい期間（秒：widget.secondsRemaining）; _controller = new AnimationController（vsync：this、duration：duration、）; _controller.reverse（from：widget.secondsRemaining.toDouble（））; _controller.addStatusListener（（status）{if（status == AnimationStatus.completed || status == AnimationStatus.dismissed）{widget.whenTimeExpires（）;}}）; } @override void didUpdateWidget（CountDownTimer oldWidget）{if（widget.secondsRemaining！= oldWidget.secondsRemaining）{setState（（）{duration = new Duration（seconds：widget.secondsRemaining）; _controller.dispose（）; _controller = new AnimationController（ vsync：this、duration：duration、）; _controller.reverse（from：widget.secondsRemaining.toDouble（））; _controller.addStatusListener（（status）{if（status == AnimationStatus.completed）{widget.whenTimeExpires（）;} else if（status == AnimationStatus.dismissed）{print（ 'Animation Complete'）;}}）;}）; }} @override void dispose（）{_ controller.dispose（）; super.dispose（）; } @override Widget build（BuildContext context）{return new Center（child：AnimatedBuilder（animation：_controller、builder：（_、Widget child）{return Text（timerDisplayString、style：widget.countDownTimerStyle、）;}））; }}
  使用法：  
 
Container（width：60.0、padding：EdgeInsets.only（top：3.0、right：4.0）、child：CountDownTimer（secondsRemaining：30、whenTimeExpires：（）{setState（（）{hasTimerStopped = true;}）;}、countDownStyle： TextStyle（color：Color（0XFFf5a623）、fontSize：17.0、height：1.2）、）、）
の例 formatHHMMSS ：
 
文字列formatHHMMSS（int seconds）{int hours =（seconds / 3600）.truncate（）;秒=（秒％3600）.truncate（）; int分=（秒/ 60）.truncate（）;文字列hoursStr =（hours）.toString（）。padLeft（2、 '0'）;文字列minutesStr =（minutes）.toString（）。padLeft（2、 '0'）;文字列secondsStr =（seconds％60）.toString（）。padLeft（2、 '0'）; if（hours == 0）{return '$ minutesStr：$ secondsStr'; } return '$ hoursStr：$ minutesStr：$ secondsStr'; }
  
あなたの質問に直接答えることはありません。しかし、しばらくしてから何かを始めたい人には役立ちます。
 
Future.delayed（Duration（seconds：1）、（）{print（ 'yo hey'）;}）;