앱을 개발하다보면 사용자로부터 시간을 선택받는 기능이 필요할 때가 있습니다. Flutter에서는 TimePicker를 사용하여 간단하게 시간을 선택할 수 있습니다. 이번 포스트에서는 플러터 TimePicker에서 선택한 시간을 사용하여 화면을 갱신하는 방법에 대해 알아보겠습니다.
1. TimePicker 사용하기
먼저, Flutter 앱에서 TimePicker를 사용하기 위해서는 showTimePicker 메소드를 호출해야 합니다. 이 메소드는 다음과 같은 형태로 사용됩니다.
showTimePicker(
context: context,
initialTime: TimeOfDay.now(),
).then((pickedTime) {
// 시간 선택 후 수행할 작업
});
context 파라미터로는 현재 컨텍스트를 전달하고, initialTime 파라미터로는 초기 시간을 설정합니다. then 메소드를 사용하여 시간 선택 후 수행할 작업을 정의할 수 있습니다.
2. 선택한 시간으로 화면 갱신하기
TimePicker에서 선택한 시간을 사용하여 화면을 갱신하려면, 두 가지 방법을 사용할 수 있습니다. 첫 번째 방법은 StatefulWidget을 사용하여 setState 메소드를 호출하는 것이고, 두 번째 방법은 StreamBuilder를 사용하는 것입니다. 여기서는 각 방법에 대해 간단히 알아보겠습니다.
2-1. StatefulWidget 사용하기
StatefulWidget을 사용하여 화면을 갱신하는 방법은 다음과 같습니다.
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
TimeOfDay _selectedTime;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('TimePicker 예제'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
ElevatedButton(
onPressed: () {
showTimePicker(
context: context,
initialTime: TimeOfDay.now(),
).then((pickedTime) {
setState(() {
_selectedTime = pickedTime;
});
});
},
child: Text('시간 선택'),
),
SizedBox(height: 20),
Text(
_selectedTime != null
? '선택한 시간: ${_selectedTime.hour}:${_selectedTime.minute}'
: '시간을 선택해주세요',
style: TextStyle(fontSize: 18),
),
],
),
),
);
}
}
위 코드에서는 _selectedTime 변수를 사용하여 선택한 시간을 저장하고, setState 메소드를 호출하여 화면을 다시 그리도록 합니다. Text 위젯을 사용하여 선택한 시간을 화면에 표시합니다.
2-2. StreamBuilder 사용하기
StreamBuilder를 사용하여 화면을 갱신하는 방법은 다음과 같습니다.
class MyHomePage extends StatelessWidget {
final StreamController<TimeOfDay> _timeStreamController = StreamController<TimeOfDay>();
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('TimePicker 예제'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
ElevatedButton(
onPressed: () {
showTimePicker(
context: context,
initialTime: TimeOfDay.now(),
).then((pickedTime) {
_timeStreamController.add(pickedTime);
});
},
child: Text('시간 선택'),
),
SizedBox(height: 20),
StreamBuilder<TimeOfDay>(
stream: _timeStreamController.stream,
builder: (_, snapshot) {
if (snapshot.hasData) {
final selectedTime = snapshot.data;
return Text(
'선택한 시간: ${selectedTime.hour}:${selectedTime.minute}',
style: TextStyle(fontSize: 18),
);
} else {
return Text(
'시간을 선택해주세요',
style: TextStyle(fontSize: 18),
);
}
},
),
],
),
),
);
}
}
위 코드에서는 StreamController를 사용하여 선택한 시간을 받아오고, StreamBuilder를 사용하여 화면을 갱신합니다. StreamBuilder는 snapshot을 통해 현재 시간 데이터에 접근할 수 있습니다.
3. 마무리
이번에는 플러터 TimePicker를 사용하여 선택한 시간으로 화면을 갱신하는 방법에 대해 알아보았습니다. setState를 사용하는 StatefulWidget이나 StreamBuilder를 사용하는 방법 중, 상황에 맞게 적절한 방식을 선택하여 활용할 수 있습니다. 개발 과정에서 사용자로부터 시간을 선택받아야 할 때, 이러한 방법들을 활용해보세요.