[Flutter]「TimePicker」の使い方

どうも、ちょげ(@chogetarou)です。

「TimePicker」の使い方を解説します。

使い方

「TimePicker」を使うには、変数と関数を使います。

まず、「TimeOfDay?」型の変数を用意します。

TimeOfDay? selectedTime;

TimePickerで選択された時刻は、この変数に格納されます。

次に、「TimePicker」を使うための関数を用意します。

  Future _pickTime(BuildContext context) async {
    final initialTime = TimeOfDay(hour: 10, minute: 0);

    //TimePickerを呼び出す
    final newTime =
        await showTimePicker(context: context, initialTime: initialTime);

   //nullチェック
    if (newTime != null) {
      //変数に選択した時刻を格納
      setState(() => selectedTime = newTime);
    } else {
      return;
    }
  }

「showTimePicker関数」を呼び出すと、「TimePicker」が表示されます。

この「TimePicker」で選択された値は、「newTime」変数に格納されます。

そして、「TimePicker」で選択した値を、最初に用意した変数（selectedTime）に渡します。

showTimePicker関数には、「context引数」と「initialTime引数」を指定します。

「initialTime引数」では、時刻の初期値を設定します。

また、「showTimePicker関数」には、「TimePicker」の設定ができる引数があります。

showTimePicker function - material library - Dart API

API docs for the showTimePicker function from the material library, for the Dart programming language.

api.flutter.dev

最後に、ボタンやスワイプなどのトリガーに、用意した関数を指定します。

          ElevatedButton(
              onPressed: () => _pickTime(context),
              child: const Text("Pick Date"))

全体のコード

class Sample extends StatefulWidget {
  Sample({Key? key}) : super(key: key);

  @override
  _SampleState createState() => _SampleState();
}

class _SampleState extends State<Sample> {
  TimeOfDay? selectedTime;

  @override
  Widget build(BuildContext context) {
    return Container(
      alignment: Alignment.center,
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Text(selectedTime != null
              ? "${selectedTime!.hour}:${selectedTime!.minute}"
              : "Time"),
          SizedBox(
            height: 20,
          ),
          ElevatedButton(
              onPressed: () => _pickTime(context),
              child: const Text("Pick Date"))
        ],
      ),
    );
  }

  Future _pickTime(BuildContext context) async {
    final initialTime = TimeOfDay(hour: 10, minute: 0);

    final newTime =
        await showTimePicker(context: context, initialTime: initialTime);

    if (newTime != null) {
      setState(() => selectedTime = newTime);
    } else {
      return;
    }
  }
}