[flutter] 플러터 TimePicker의 시간 선택 시 애니메이션 효과 추가하기
플러터(Flutter)는 Google이 개발한 UI 프레임워크로, 여러 플랫폼에서 동일한 코드로 네이티브 앱을 개발할 수 있습니다. 이번에는 플러터에서 제공하는 TimePicker 위젯에 시간 선택 시 애니메이션 효과를 추가하는 방법을 알아보겠습니다.
1. TimePicker 위젯 사용하기
플러터에서는 showTimePicker 메서드를 사용하여 TimePicker를 띄울 수 있습니다. 아래의 코드는 간단한 예제입니다.
Future<void> _selectTime(BuildContext context) async {
final TimeOfDay? selectedTime = await showTimePicker(
context: context,
initialTime: TimeOfDay.now(),
);
if (selectedTime != null) {
// 시간 선택 이후에 수행할 동작
}
}
2. 애니메이션 효과 추가하기
TimePicker에 애니메이션 효과를 추가하기 위해서는 showDialog 메서드를 사용하여 TimePicker를 커스텀 다이얼로그로 띄워야 합니다. 다음과 같이 코드를 수정해보겠습니다.
Future<void> _selectTime(BuildContext context) async {
await showDialog(
context: context,
builder: (BuildContext context) {
return AlertDialog(
title: Text('시간 선택'),
content: StatefulBuilder(
builder: (BuildContext context, setState) {
return GestureDetector(
child: TimePickerSpinner(
// TimePicker의 내용
),
onVerticalDragUpdate: (details) {
if (details.primaryDelta! > 0) {
// 아래로 스와이프하는 경우
setState(() {
// 애니메이션 효과 추가
});
} else if (details.primaryDelta! < 0) {
// 위로 스와이프하는 경우
setState(() {
// 애니메이션 효과 추가
});
}
},
);
},
),
actions: [
TextButton(
child: Text('확인'),
onPressed: () {
Navigator.of(context).pop();
// 시간 선택 이후에 수행할 동작
},
),
],
);
},
);
}
StatefulBuilder 위젯을 사용하여 다이얼로그의 상태를 관리하고, GestureDetector를 사용하여 스와이프 동작을 감지합니다. 스와이프 동작에 따라 애니메이션 효과를 추가할 수 있습니다.
3. 결과 확인하기
위의 코드를 실행하면 TimePicker가 다이얼로그 형태로 나타나며, 시간 선택 시 애니메이션이 적용됩니다.
이제 여러분은 플러터 TimePicker에 애니메이션 효과를 추가하는 방법을 알게 되었습니다. 원하는 애니메이션 효과를 추가하여 사용자 경험을 향상시켜보세요.