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

07 Dec 2023

flutter

플러터의 TimePicker 위젯은 기본적으로 12시간 형식으로 시간을 표시합니다. 하지만 때때로 24시간 형식으로 시간을 표시해야 할 수도 있습니다.

이번 글에서는 플러터 TimePicker 위젯에서 24시간 형식으로 시간을 표시하는 방법을 알아보겠습니다.

1. 패키지 설치하기

우선, 24시간 형식으로 시간을 표시하기 위해 intl 패키지를 설치해야 합니다. 이 패키지는 날짜와 시간 포맷을 지원하는 다양한 기능을 제공합니다.

dependencies:
  flutter:
    sdk: flutter
  intl: ^0.16.1

pubspec.yaml 파일의 dependencies 섹션에 위 내용을 추가하고, 터미널에서 flutter pub get 명령을 실행해 패키지를 설치하세요.

2. 24시간 형식으로 시간 변환하기

intl 패키지를 사용하여 24시간 형식으로 시간을 변환하는 방법은 다음과 같습니다.

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

class MyTimePicker extends StatefulWidget {
  @override
  _MyTimePickerState createState() => _MyTimePickerState();
}

class _MyTimePickerState extends State<MyTimePicker> {
  TimeOfDay _selectedTime;

  Future<void> _selectTime(BuildContext context) async {
    final TimeOfDay picked = await showTimePicker(
      context: context,
      initialTime: _selectedTime ?? TimeOfDay.now(),
      builder: (BuildContext context, Widget child) {
        return MediaQuery(
          data: MediaQuery.of(context).copyWith(alwaysUse24HourFormat: true), // 여기에서 24시간 형식으로 설정
          child: child,
        );
      },
    );
    if (picked != null && picked != _selectedTime) {
      setState(() {
        _selectedTime = picked;
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('24시간 형식 TimePicker'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            RaisedButton(
              onPressed: () => _selectTime(context),
              child: Text('시간 선택'),
            ),
            SizedBox(height: 20),
            Text(
              '선택한 시간: ${_selectedTime != null ? DateFormat.Hm().format(DateTime(2022, 1, 1, _selectedTime.hour, _selectedTime.minute)) : ''}',
              style: TextStyle(fontSize: 20),
            ),
          ],
        ),
      ),
    );
  }
}

위의 코드에서 showTimePicker 위젯에서 builder 콜백을 사용하여 MediaQuery를 설정합니다. alwaysUse24HourFormat 속성을 true로 설정하면 24시간 형식으로 시간을 표시할 수 있습니다.

그리고 선택한 시간을 24시간 형식으로 변환하기 위해 DateFormat.Hm().format을 사용합니다.

3. 사용하기

마지막으로 MyTimePicker 위젯을 화면에 사용하면 됩니다.

void main() {
  runApp(MaterialApp(
    home: MyTimePicker(),
  ));
}

위의 코드를 main.dart 파일에 추가하고 앱을 실행해보면 24시간 형식으로 시간을 선택할 수 있는 TimePicker 위젯이 표시됩니다.

이렇게 플러터의 TimePicker에서 24시간 형식으로 시간을 표시하는 방법을 알아보았습니다. 이제 여러분은 필요에 따라 시간을 적절하게 표시할 수 있을 것입니다.

1. 패키지 설치하기

2. 24시간 형식으로 시간 변환하기

3. 사용하기

참고 자료