[flutter] 플러터 TimePicker에서 시간 선택 화면 옵션 설정하기

플러터에서 제공하는 TimePicker 위젯은 사용자가 시간을 선택할 수 있는 기능을 제공합니다. 이번 블로그 포스트에서는 TimePicker에서 시간 선택 화면의 옵션을 설정하는 방법에 대해 알아보겠습니다.

TimePicker 옵션 설정하기

1. 시간 포맷 설정하기

TimePicker의 시간을 표시하는 형식을 설정할 수 있습니다. 예를 들어, 24시간 형식으로 표시하려면 TimeFormat.HH를 사용하고, 12시간 형식으로 표시하려면 TimeFormat.h를 사용합니다.

showTimePicker(
  context: context,
  initialTime: TimeOfDay.now(),
  builder: (BuildContext context, Widget? child) {
    return MediaQuery(
      data: MediaQuery.of(context).copyWith(alwaysUse24HourFormat: true), // 24시간 형식 사용
      child: child!,
    );
  },
);

2. 시간 범위 설정하기

TimePicker에서 선택할 수 있는 시간의 범위를 설정할 수 있습니다. TimeRange 클래스를 사용하여 시작 시간과 종료 시간을 설정할 수 있습니다.

showTimePicker(
  context: context,
  initialTime: TimeOfDay.now(),
  initialEntryMode: TimePickerEntryMode.input,
  firstTime: TimeOfDay(hour: 8, minute: 0), // 시작 시간 설정
  lastTime: TimeOfDay(hour: 18, minute: 0), // 종료 시간 설정
);

3. 다국어 지원하기

TimePicker에서 표시되는 텍스트를 다국어로 지원하기 위해 MaterialLocalizations를 사용할 수 있습니다. MaterialLocalizations는 시간 단위, AMPM 등과 같은 텍스트를 변환하는 기능을 제공합니다.

final MaterialLocalizations localizations = MaterialLocalizations.of(context);
final String cancelButtonLabel = localizations.cancelButtonLabel;
final String saveButtonLabel = localizations.saveButtonLabel;

결론

이렇게 플러터 TimePicker에서 시간 선택 화면의 옵션을 설정하는 방법에 대해 알아보았습니다. 시간 포맷, 시간 범위, 다국어 지원 등을 적절히 설정하여 사용자가 편리하게 시간을 선택할 수 있도록 만들어보세요.

더 자세한 내용은 플러터 공식 문서를 참고하실 수 있습니다.