時間入力（TimePicker）
続いて、時間入力をするためのTimePickerを紹介します。
日時入力にカレンダーUIとテキスト入力があったように、時間入力ではダイヤル形式とテキスト入力の形式があります。この入力形式も日付形式と同様に表2のようにモード指定で制限が可能です。
| 入力種類 | 説明 |
|---|---|
| dial | ダイヤル形式の入力を初期状態とする入力モード |
| input | テキスト形式での入力を初期状態とする入力モード |
| dialOnly | ダイヤル方式のみでの入力モード |
| inputOnly | テキスト形式のみの入力モード |
リスト6はこのTimePickerを利用する場合の簡単なコード例です。
// : （省略）
// （1） 指定された日付
TimeOfDay _inputTime1 = TimeOfDay.now();
@override
Widget build(BuildContext context) {
return Container(
color: Colors.white,
alignment: Alignment.center,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
OutlinedButton(
// （2） ボタンを押した時に入力できるようにする
onPressed: () => _openSample1(context),
child: Text("日付選択")
),
// : （省略）
])
);
}
Future _openSample1(BuildContext context) async {
// （3） showTimePickerを使う
final TimeOfDay? _date = await showTimePicker(
context: context,
initialTime: TimeOfDay(hour: 9, minute: 10)
);
// （4） 選択された場合に、値を設定する
if(_date != null){
setState(() {
_inputTime1 = _date;
});
}
}
// : （省略）
（1）は入力した時間を保存する変数です。そして（2）はボタンを押した時に時間入力ダイアログが表示されるようにしています。TimePickerダイアログは、（3）のようにshowTimePicker関数を通じて表示します。（4）のinitialTimeプロパティでデフォルトの日付を指定します。また、設定された時間は（4）のようにして設定します。
ただし、こちらのコードを実行すると一点ほど問題にぶつかりました。それが、図5に示すようにダイヤル入力であれば24時間表示の入力を受け付けるのに、テキスト入力だと入力エラーになりました。
リスト7はこの問題を回避するためのコード例です。
// : （省略） TimeOfDay _inputTime2 = TimeOfDay.now(); Future_openSample2(BuildContext context) async { final TimeOfDay? _date = await showTimePicker( context: context, initialTime: _inputTime2, initialEntryMode: TimePickerEntryMode.input, // （1） builderプロパティを利用 builder: (BuildContext context, Widget? child) { return MediaQuery( data: MediaQuery.of(context).copyWith( // （2） 24時間表記に指定 alwaysUse24HourFormat: true, ), child: child!, ); }, ); // : （省略） } // : （省略）
（1）のbuilderプロパティでダイアログを作成するときのウィジェットをカスタマイズすることができます。そこで、MediaQueryを利用してカスタマイズします。MediaQueryはよく現在のサイズなどを取得する際に利用しますが、ここでは（2）のようにalwaysUse24HourFormatプロパティにtrueを指定して24時間形式に変更しています。これで先ほどのエラーが発生しないようになります。
まとめ
今回まで4回にわたって入力コンポーネントについて説明してきましたが、標準コンポーネントを利用するだけで実用的でリッチな入力UIを簡単に作れることが分かったはずです。またデザインの方向性に合わせてカスタマイズすれば、アプリケーション全体の印象も変わることでしょう。
また、今回は暗黙的にダイアログを利用していましたが、次回はダイアログの作成方法を中心にこれまで紹介できなかったマテリアルデザインのコンポーネントを紹介します。
