Flutterで時刻の選択画面から時刻を取得します。

まずは、画面に現在の時刻を表示します。

dynamic型でdateTimeを作成します。

class _MyHomePageState extends State<MyHomePage> {
  dynamic dateTime;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Center(
      child: Text("時刻が表示されます"),
    ));
  }
}

次に、日付のデータを初期化しするためにinitStateを使用します。

initStateの中に、TimeOfDaynow()を指定します。

dynamic dateTime;

@override
void initState() {
  super.initState();
  dateTime = TimeOfDay.now();
}

Textの中に指定している、『"日付が表示されます”』を、『"$dateTime”』へ変更します。

@override
Widget build(BuildContext context) {
  return Scaffold(
      body: Center(
    child: Text("${dateTime.hour}時${dateTime.minute}分"),
  ));
}

ブラウザを更新し、確認すると、

image2

現在の時刻が表示されました。

次に、時刻選択のボタンを作成します。

@override
Widget build(BuildContext context) {
  return Scaffold(
      body: Center(
          child: Column(
    mainAxisAlignment: MainAxisAlignment.center,
    children: [
      Text("${dateTime.hour}時${dateTime.minute}分"),
      ElevatedButton(
        onPressed: () {},
        child: const Text("時刻を選択"),
      )
    ],
  )));
}

image3

ボタンを作成した後、TimePickerを設定します。

Flutterでは、showTimePickerを使用します。

また、showTimePickerは、非同期にしたいので、async/awaitを使用しましょう。

showTimePickercontextにはcontext、initialDateには現在時刻であるdateTimeを指定します。

_timePicker(BuildContext context) async {
  final TimeOfDay? timePicked = await showTimePicker(
    context: context,
    initialTime: dateTime,
  );
}

showTimePikerが選択された場合、dateTimeを選択した時間に書き換えるようにします。

_timePicker(BuildContext context) async {
  final TimeOfDay? timePicked = await showTimePicker(
    context: context,
    initialTime: dateTime,
  );
  if (timePicked != null && timePicked != dateTime) {
    setState(() {
      dateTime = timePicked;
    });
  }
}

onPressed_datePickerを指定します。

@override
Widget build(BuildContext context) {
  return Scaffold(
      body: Center(
          child: Column(
    mainAxisAlignment: MainAxisAlignment.center,
    children: [
      Text("${dateTime.hour}時${dateTime.minute}分"),
      ElevatedButton(
        onPressed: () {
          _timePicker(context);
        },
        child: const Text("時刻を選択"),
      )
    ],
  )));
}

では、動作確認しましょう。

image4

『時刻を選択』をタップすると、

image5

時刻を選択する画面が表示されました。

時刻を選択すると、

image6

指定した時刻へ変更することができました。

ブログ一覧