플러터의 TimePicker 위젯은 시간 선택을 위한 간편한 도구입니다. 하지만 기본적으로 TimePicker는 24시간 포맷을 사용합니다. 만약 12시간 포맷을 사용하고 싶다면 어떻게 해야 할까요?

이번 블로그 포스트에서는 플러터에서 TimePicker의 시간 포맷을 설정하는 방법을 알려드리겠습니다.

1. intl 패키지 추가하기

먼저 소스 코드에서 12시간 포맷을 사용하기 위해 intl 패키지를 추가해야 합니다. 이 패키지를 이용하여 시간을 원하는 포맷으로 변환할 수 있습니다.

dependencies:
  flutter:
    sdk: flutter
  ...
  intl: ^0.17.0

pubspec.yaml 파일의 dependencies 섹션에 위의 코드를 추가합니다. 그리고 다음 명령을 터미널에서 실행하여 패키지를 가져옵니다.

flutter pub get

2. 12시간 포맷으로 변환

intl 패키지를 추가한 후에는 TimePicker의 시간을 12시간 포맷으로 변환할 수 있습니다.

import 'package:intl/intl.dart';

...

String formatTime(DateTime time) {
  final formatter = DateFormat('hh:mm a');
  return formatter.format(time);
}

해당 코드에서 formatTime 메서드는 DateTime 값을 받아서 12시간 포맷으로 변환한 뒤 해당 값을 문자열로 반환합니다.

3. TimePicker에 12시간 포맷 적용하기

이제 플러터의 TimePicker 위젯에서 12시간 포맷을 적용하는 방법을 알아봅시다. 우선 showTimePicker 메서드를 호출하여 TimePicker를 띄웁니다.

void openTimePicker(BuildContext context) async {
  final initialTime = TimeOfDay.now();
  final selectedTime = await showTimePicker(
    context: context,
    initialTime: initialTime,
  );
  if (selectedTime != null) {
    final formattedTime = formatTime(DateTime(selectedTime.hour, selectedTime.minute));
    print(formattedTime);
  }
}

해당 코드에서 openTimePicker 메서드는 현재 시간을 초기 시간으로 설정하고 showTimePicker를 호출합니다. 사용자가 시간을 선택한 후에는 선택한 시간을 12시간 포맷으로 변환하여 출력합니다.

4. 실행 결과 확인하기

애플리케이션을 실행하면 TimePicker에서 시간을 선택하는 화면이 나타납니다. 사용자가 원하는 시간을 선택한 후에는 선택한 시간이 12시간 포맷으로 출력됩니다.

12:30 PM

결론

플러터에서 TimePicker의 시간 포맷을 설정하는 방법에 대해 알아보았습니다. intl 패키지를 사용하여 시간 값을 12시간 포맷으로 변환하고, 변환된 값을 TimePicker에 적용하는 방법을 다루었습니다. 이를 통해 사용자가 좀 더 편리하게 12시간 형식으로 시간을 선택할 수 있게 되었습니다.