この記事はこんな人におすすめ!
- 時計を表示して時刻を入力したい
- showTimePickerの使い方が知りたい
「Flutterで時計を表示して時刻を入力するにはどうするの?」
今回はFlutterで時計を表示して時刻入力ができるshowTimePicker()
の使い方を解説していきます。
目次
TimePicker(showTimePicker関数)とは?
showTimePicker関数を呼び出すことでスクリーン上に時計を表示し、入力した時刻をTimeOfDay型として取得できます。
TimePickerの使い方
それではTimePickerの使い方について紹介していきます。
今回は_pickTime
メソッドを作成してElevatedButton
でメソッドを呼び出して時刻入力できるよう実装していきます。
(全体のコードは記事下からコピーできます)
ステップ1: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
で時刻の入力スタイルを指定できます。
ステップ2:メソッドの呼び出し
メソッドが完成したら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
もあるのでぜひ一緒にチェックしてみてください。