[flutter] 플러터 TimePicker에서 시간 범위 제한하기

07 Dec 2023

flutter

플러터에서 TimePicker를 사용하여 시간을 선택할 때, 특정한 시간 범위 내에서만 선택하도록 제한하고 싶을 수 있습니다. 이번 블로그 포스트에서는 플러터에서 TimePicker의 시간 범위를 제한하는 방법을 알아보겠습니다.

1. 시간 범위 지정

먼저, 시간 범위를 지정해야 합니다. 예를 들어, 09:00부터 18:00까지의 시간 범위를 선택할 수 있도록 설정하고 싶다고 가정해보겠습니다.

코드 예시

TimeOfDay initialTime = TimeOfDay.now(); // 초기 시간
TimeOfDay startTime = TimeOfDay(hour: 9, minute: 0); // 시작 시간
TimeOfDay endTime = TimeOfDay(hour: 18, minute: 0); // 종료 시간

showTimePicker(
  context: context,
  initialTime: initialTime,
  builder: (BuildContext context, Widget child) {
    return MediaQuery(
      data: MediaQuery.of(context).copyWith(alwaysUse24HourFormat: false),
      child: child,
    );
  },
  helpText: '시간 선택',
  cancelText: '취소',
  confirmText: '확인',
  initialEntryMode: TimePickerEntryMode.dial,
  selectableDayPredicate: (DateTime date) {
    return date.isSameDay(DateTime.now()); // 오늘 날짜만 선택 가능
  },
  initialTimeOfDay: initialTime,
  firstTime: startTime,
  lastTime: endTime,
).then((selectedTime) {
  if (selectedTime != null) {
    print('선택한 시간: $selectedTime');
  }
});

2. 시간 범위 적용

위 예시 코드에서 firstTime과 lastTime을 사용하여 시간 범위를 적용하고 있습니다. firstTime은 시간 범위의 시작 시간을, lastTime은 시간 범위의 종료 시간을 설정합니다.

설정한 시간 범위에 해당하지 않는 시간은 선택이 불가능하고, 사용자에게 알림이 표시됩니다.

3. 추가 옵션

위 예시 코드에서는 시간 범위에 해당하는 날짜만 선택 가능하도록 selectableDayPredicate 옵션을 사용하고 있습니다. 이를 통해 오늘 날짜에만 해당 시간을 선택할 수 있도록 제한할 수 있습니다.

또한, TimePicker의 모양과 텍스트는 builder, helpText, cancelText, confirmText, initialEntryMode 등의 옵션을 사용하여 맞게 변경할 수 있습니다.

결론

위 방법을 사용하면 플러터에서 TimePicker의 시간 범위를 제한할 수 있습니다. 시간 선택에 제한을 두고 싶은 경우, 위 예시 코드를 참고하여 시간 범위를 설정해보세요.

참고 자료: