[flutter] 플러터 TimePicker에서 12시간 형식으로 시간 표시하기

07 Dec 2023

flutter

Flutter에서는 TimePicker를 사용하여 시간을 선택할 수 있습니다. 기본적으로 TimePicker는 24시간 형식으로 시간을 표시하지만, 12시간 형식으로 시간을 표시하고 싶을 때가 있습니다. 이번 포스트에서는 플러터 TimePicker에서 12시간 형식으로 시간을 표시하는 방법을 알아보겠습니다.

1. intl 패키지 설치

intl 패키지는 다양한 지역화와 포맷팅 기능을 제공합니다. 12시간 형식으로 시간을 표시하기 위해 intl 패키지를 사용할 것입니다. pubspec.yaml 파일에 다음과 같이 intl 패키지를 추가합니다.

dependencies:
  flutter:
    sdk: flutter
  intl: ^0.17.0

의존성을 추가한 후, 터미널에서 flutter packages get 명령을 실행하여 패키지를 설치합니다.

2. TimePicker 사용하기

intl 패키지를 사용하여 시간을 12시간 형식으로 포맷팅하기 위해 intl을 임포트해야 합니다. 다음과 같이 코드를 작성해보겠습니다.

import 'package:flutter/material.dart';
import 'package:intl/intl.dart';

class TimePickerPage extends StatefulWidget {
  @override
  _TimePickerPageState createState() => _TimePickerPageState();
}

class _TimePickerPageState extends State<TimePickerPage> {
  TimeOfDay _selectedTime;
  final DateFormat _dateFormat = DateFormat('hh:mm a');

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('12시간 형식 TimePicker'),
      ),
      body: Center(
        child: RaisedButton(
          child: Text(
            _selectedTime == null ? '시간 선택' : _dateFormat.format(DateTime(2022, 1, 1, _selectedTime.hour, _selectedTime.minute)),
          ),
          onPressed: () {
            showTimePicker(
              context: context,
              initialTime: _selectedTime ?? TimeOfDay.now(),
            ).then((time) {
              setState(() {
                _selectedTime = time;
              });
            });
          },
        ),
      ),
    );
  }
}

위의 코드에서 showTimePicker 함수를 호출할 때 initialTime 파라미터에 TimeOfDay.now()를 사용하고 있습니다. initialTime은 TimePicker가 열릴 때 표시할 초기 시간을 의미합니다.

또한, Text 위젯에서 $selectedTime을 _dateFormat을 사용해서 12시간 형식으로 변환하여 표시하고 있습니다. DateFormat의 포맷 문자열 ‘hh:mm a’는 시간을 12시간 형식으로 표시하고, 오전과 오후를 ‘am’과 ‘pm’으로 표시합니다.

이제 위의 코드를 실행해보면 TimePicker에서 시간을 선택할 때 12시간 형식으로 표시되는 것을 확인할 수 있습니다.

결론

이번 포스트에서는 플러터 TimePicker에서 12시간 형식으로 시간을 표시하는 방법에 대해 알아보았습니다. intl 패키지를 사용하여 시간을 포맷팅하여 표시할 수 있는데, 다양한 지역화와 포맷팅 기능을 제공합니다. 12시간 형식으로 시간을 표시하고 싶은 경우, 위의 코드를 참고하여 적용해보세요.