[flutter] 플러터 TimePicker에서 시간 선택 시 키보드 입력 방지하기
플러터는 사용자가 시간을 선택할 수 있는 TimePicker 위젯을 제공합니다. 그러나 기본적으로 TimePicker는 사용자가 시간을 입력할 수 있는 키보드를 나타냅니다. 만약 사용자가 키보드를 사용하지 않고 오직 TimePicker를 통해서만 시간을 선택하도록 하고 싶다면 어떻게 해야할까요? 이번 포스팅에서는 플러터 TimePicker에서 키보드 입력을 방지하는 방법을 알아보겠습니다.
1. 키보드 입력 방지하기
플러터에서는 showTimePicker 메서드를 사용하여 TimePicker를 표시할 수 있습니다. showTimePicker 메서드에는 context, initialTime, builder 등의 인자를 전달할 수 있습니다. 이 중에서 builder를 통해 TimePicker 위젯을 커스터마이징할 수 있습니다.
아래 예제 코드는 showTimePicker 메서드를 사용하여 TimePicker를 표시하고, 키보드 입력을 방지하는 방법을 보여줍니다.
Future<void> _selectTime(BuildContext context) async {
final TimeOfDay? picked = await showTimePicker(
context: context,
initialTime: TimeOfDay.now(),
builder: (BuildContext context, Widget? child) {
return GestureDetector(
onTap: () {},
child: Theme(
data: ThemeData.light().copyWith(
primaryColor: Colors.blue, // TimePicker 색상 설정
accentColor: Colors.blue, // TimePicker 시간 선택 색상 설정
colorScheme:
ColorScheme.light(primary: Colors.blue), // TimePicker 시간 선택 색상 설정
buttonTheme: ButtonThemeData(
textTheme: ButtonTextTheme.primary, // TimePicker 버튼 텍스트 테마
),
),
child: child!,
),
);
},
);
if (picked != null) {
print("Selected time: ${picked.hour}:${picked.minute}");
}
}
위 코드에서는 builder 함수에서 GestureDetector를 사용하여 TimePicker를 감싸고, onTap 콜백을 빈 함수로 설정하여 키보드 입력을 방지합니다. 또한 Theme을 사용하여 TimePicker의 색상과 버튼 텍스트 테마를 설정할 수 있습니다. 이렇게 설정한 후, builder 함수에서 child를 반환하여 커스터마이즈된 TimePicker를 표시할 수 있습니다.