Flutter의 showTimePicker
는 사용자가 시간을 선택할 수 있게 해 주는 위젯입니다. 선택된 시간 데이터를 받아오는 예제를 보여드리겠습니다.
import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: TimePickerExample(), ); } } class TimePickerExample extends StatefulWidget { @override _TimePickerExampleState createState() => _TimePickerExampleState(); } class _TimePickerExampleState extends State<TimePickerExample> { TimeOfDay? _selectedTime; Future<void> _selectTime(BuildContext context) async { final TimeOfDay? pickedTime = await showTimePicker( context: context, initialTime: _selectedTime ?? TimeOfDay.now(), ); if (pickedTime != null && pickedTime != _selectedTime) { setState(() { _selectedTime = pickedTime; }); } } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title: Text('Flutter showTimePicker Example')), body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ Text( _selectedTime == null ? 'No time selected' : 'Selected Time: ${_selectedTime!.format(context)}', style: TextStyle(fontSize: 20), ), ElevatedButton( onPressed: () => _selectTime(context), child: Text('Select Time'), ), ], ), ), ); } }
설명
showTimePicker
함수는context
와 초기 시간을 인자로 받습니다.pickedTime
변수에 사용자가 선택한 시간이 저장되며, 사용자가 선택을 취소하면null
을 반환합니다.- 시간이 선택되었으면
setState
를 통해 화면에 선택된 시간이 표시됩니다.