[flutter] 플러터 TimePicker에서 시간 단위 선택 옵션 사용하기

07 Dec 2023

flutter

플러터에서는 TimePicker 위젯을 사용하여 사용자에게 시간을 선택할 수 있는 기능을 제공합니다. 하지만 기본적으로 TimePicker는 24시간 단위로 시간을 표시하고 선택할 수 있습니다.

만약 사용자에게 12시간 단위로 시간을 선택할 수 있도록 옵션을 제공하고 싶은 경우에는 어떻게 해야 할까요? 이번 글에서는 플러터에서 시간 단위 선택 옵션을 사용하는 방법에 대해 알아보겠습니다.

1. Flutter TimePicker를 사용하여 시간 선택하기

우선 기본적으로 제공되는 플러터 TimePicker를 사용하여 시간을 선택하는 방법을 알아보겠습니다.

import 'package:flutter/material.dart';

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

class _MyTimePickerState extends State<MyTimePicker> {
  TimeOfDay _selectedTime;

  @override
  void initState() {
    super.initState();
    _selectedTime = TimeOfDay.now();
  }

  Future<void> _selectTime(BuildContext context) async {
    final TimeOfDay picked = await showTimePicker(
      context: context,
      initialTime: _selectedTime,
    );
    if (picked != null && picked != _selectedTime) {
      setState(() {
        _selectedTime = picked;
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Text(
          '선택된 시간: ${_selectedTime.format(context)}',
          style: TextStyle(fontSize: 16),
        ),
        RaisedButton(
          onPressed: () => _selectTime(context),
          child: Text('시간 선택'),
        ),
      ],
    );
  }
}

위 코드에서는 MyTimePicker라는 위젯을 정의하고, showTimePicker 메서드를 사용하여 시간을 선택할 수 있는 다이얼로그를 띄운 후 선택된 시간을 화면에 표시하게 됩니다.

2. 12시간 단위로 시간 선택 옵션 추가하기

이제 12시간 단위로 시간을 선택할 수 있는 옵션을 TimePicker에 추가해보겠습니다.

import 'package:flutter/material.dart';

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

class _MyTimePickerState extends State<MyTimePicker> {
  TimeOfDay _selectedTime;

  @override
  void initState() {
    super.initState();
    _selectedTime = TimeOfDay.now();
  }

  Future<void> _selectTime(BuildContext context) async {
    final TimeOfDay picked = await showTimePicker(
      context: context,
      initialTime: _selectedTime,
      builder: (BuildContext context, Widget child) {
        return MediaQuery(
          data: MediaQuery.of(context).copyWith(alwaysUse24HourFormat: false),
          child: child,
        );
      },
    );
    if (picked != null && picked != _selectedTime) {
      setState(() {
        _selectedTime = picked;
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Text(
          '선택된 시간: ${_selectedTime.format(context)}',
          style: TextStyle(fontSize: 16),
        ),
        RaisedButton(
          onPressed: () => _selectTime(context),
          child: Text('시간 선택'),
        ),
      ],
    );
  }
}

위 코드에서는 showTimePicker 메서드의 builder 속성을 사용하여 MediaQuery 위젯을 추가하고, alwaysUse24HourFormat 속성을 false로 설정해 12시간 단위로 시간을 선택할 수 있도록 합니다.

이제 MyTimePicker 위젯을 사용하면 12시간 단위로 시간을 선택할 수 있는 TimePicker를 사용할 수 있습니다.

결론

플러터 TimePicker에서 시간 단위를 선택할 수 있는 옵션을 사용할 수 있도록 MediaQuery를 활용하는 방법에 대해 알아보았습니다. 만약 12시간 단위로 시간을 선택해야 하는 경우, 위 예제 코드를 사용하여 간단하게 구현할 수 있습니다.