【Flutter】TimePickerで時計を表示して時刻を入力する

2023年11月19日

この記事はこんな人におすすめ！

時計を表示して時刻を入力したい
showTimePickerの使い方が知りたい

「Flutterで時計を表示して時刻を入力するにはどうするの？」

今回はFlutterで時計を表示して時刻入力ができるshowTimePicker()の使い方を解説していきます。

TimePicker(showTimePicker関数)とは？

showTimePicker関数を呼び出すことでスクリーン上に時計を表示し、入力した時刻をTimeOfDay型として取得できます。

TimePickerの使い方

それではTimePickerの使い方について紹介していきます。

今回は_pickTimeメソッドを作成してElevatedButtonでメソッドを呼び出して時刻入力できるよう実装していきます。

（全体のコードは記事下からコピーできます）

ステップ１：TimePickerのメソッドを作成

まずはデフォルトの時刻と更新した時刻を格納する変数_timeを作成し、非同期処理で_pickTimeメソッドを次のように作成します。

TimeOfDay _time = TimeOfDay.now();

Future _pickTime(BuildContext context) async {
  final newTime = await showTimePicker(
      context: context,
      initialTime: _time,
      initialEntryMode: TimePickerEntryMode.dialOnly);

  if (newTime != null) {
    setState(() => _time = newTime);
  }
}

showTimePicker関数が呼び出されると時計が表示され入力した時刻がTimeOfDay型で返されるので、変数newTimeを新たに作成して戻り値を取得しsetState()で_timeの値を更新します。

またshowTimePicker関数のinitialTimeで時計で表示されるデフォルトの時刻、initialEntryModeで時刻の入力スタイルを指定できます。

ステップ２：メソッドの呼び出し

メソッドが完成したらElevatedButtonなどのウィジェットで呼び出すだけで時計が表示され時刻を入力できます。

//全体のコードから一部抜粋
... 

ElevatedButton(
  child: Text('${_time.hour}:${_time.minute}'),
  onPressed: () => _pickTime(context),
),

...

サンプルコード

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key});

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  TimeOfDay _time = TimeOfDay.now();

  Future _pickTime(BuildContext context) async {
    final newTime = await showTimePicker(
        context: context,
        initialTime: _time,
        initialEntryMode: TimePickerEntryMode.dialOnly);

    if (newTime != null) {
      setState(() => _time = newTime);
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Flutter')),
      body: Center(
        child: ElevatedButton(
          child: Text('${_time.hour}:${_time.minute}'),
          onPressed: () => _pickTime(context),
        ),
      ),
    );
  }
}

まとめ

今回は時計を表示して時刻を入力できるTimePickerの使い方を紹介しました。

TimePickerの他にも日付を入力できるDatePickerもあるのでぜひ一緒にチェックしてみてください。

参考サイト

https://www.youtube.com/watch?v=dVKoi32znEk