Flutterのマテリアルデザインを活用した日付入力と時間入力コンポーネントを紹介

Flutterで始めるモバイルアプリ開発 第18回

時間入力（TimePicker）

　続いて、時間入力をするためのTimePickerを紹介します。

　日時入力にカレンダーUIとテキスト入力があったように、時間入力ではダイヤル形式とテキスト入力の形式があります。この入力形式も日付形式と同様に表2のようにモード指定で制限が可能です。

図4：TimePickerでの入力方法

表2：TimePickerでの入力モード

入力種類	説明
dial	ダイヤル形式の入力を初期状態とする入力モード
input	テキスト形式での入力を初期状態とする入力モード
dialOnly	ダイヤル方式のみでの入力モード
inputOnly	テキスト形式のみの入力モード

　リスト6はこのTimePickerを利用する場合の簡単なコード例です。

［リスト6］入力方式の設定（lib/timepicker/TimePickerWidget.dartの抜粋）

// : （省略）
// （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時間表示の入力を受け付けるのに、テキスト入力だと入力エラーになりました。

図5：TimePickerでの入力エラー

　リスト7はこの問題を回避するためのコード例です。

［リスト7］入力方式の設定（lib/timepicker/TimePickerWidget.dartの抜粋）

// : （省略）
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を簡単に作れることが分かったはずです。またデザインの方向性に合わせてカスタマイズすれば、アプリケーション全体の印象も変わることでしょう。

　また、今回は暗黙的にダイアログを利用していましたが、次回はダイアログの作成方法を中心にこれまで紹介できなかったマテリアルデザインのコンポーネントを紹介します。