Flutter:カウントダウンタイマーの時間を設定するWidget（CupertinoTimerPicker）を使ってみる

カウントダウンタイマーの時間を設定するために、時分秒を選択するスピナーがないか探してみたところ、CupertinoTimerPickerというWidgetを見つけました。
そして、学習用に作成したカウントダウンタイマーに組み込んでみました。また、せっかくなので時間設定のダイアログをMaterialからCupertino系のWidgetに変更してみました。
以下、実装方法について紹介します。

こちらの記事でMaterialのダイアログの実装方法について紹介しています。今回の実装は、次の対応関係で変更しています。

変更前       → 変更後
TextField   → CupertinoTimerPicker
AlertDialog → CupertinoActionSheet
FlatButton  → CupertinoActionSheetAction
showDialog  → showCupertinoModalPopup

ソースコードは下記の通りです。

以下、今回利用したCupertino系のWidget、メソッド説明します。

CupertinoTimerPicker

上図のWidgetがCupertinoTimerPickerです。
フリック操作で、スピナーから任意の時/分/秒を選択できるWidgetです。
インスタンス化時に必須のプロパティは次の通りです。

• onTimerDurationChanged
  スピナーの値に変更があった場合に、実行される処理です。引数には、スピナーで選択している値がDuration型で渡ってきます。
  今回は、スピナーの値を保持する処理をしています。
  これは、ダイアログを閉じるときにスピナーの値を呼び出し元画面に渡したいためです。

他のプロパティの説明は省略しますが、スピナーで設定する時間を分/秒に変更できたり、スピナーの刻み幅を変更（例えば2秒刻みなど）とできたりします。

CupertinoActionSheet

CupertinoActionSheetのプロパティとレイアウトの関係は上図の通りです。
今回は次のように各プロパティを設定しました。

• title
  Textでtitle部に表示する文字列を設定しています。
• message
  上述したCupertinoTimerPickerを設定しています。
• actions
  OKボタンを設定しています。
  ボタンはCupertinoActionSheet用のCupertinoActionSheetActionを利用しています。
  そして、ボタン押下（onPressed）時に呼び出し元画面にCupertinoTimerPickerで設定した時間を返す処理を実装しています。
• cancelButton
  CANCELボタンを設定しています。
  CANCELボタンもCupertinoActionSheetActionを利用しています。
  そして、ボタン押下（onPressed）時にダイアログを閉じる処理を実装しています。

showCupertinoModalPopup

ダイアログの表示にあたっては、showCupertinoModalPopupを利用しました。
これを利用すると、ポップアップが画面の下からスライドアップして表示されます。

今回は、CupertinoTimerPickerの使い方について紹介しました。
タイマーを設定するための使いやすいUIはないものかとFlutter Galleryを覗いてみたところCupertinoTimerPickerに出会いました。
Flutter Galleryを参照してみるといいかもしれません。