[flutter] 플러터 TimePicker에서 현재 시간 이외의 다른 시간 선택 방법

07 Dec 2023

flutter

플러터의 TimePicker 위젯은 사용자가 시간을 선택할 수 있는 인터페이스를 제공합니다. 하지만 기본적으로 현재 시간만 선택할 수 있습니다. 현재 시간 이외에 다른 시간을 선택하려면 어떻게 해야할까요? 이번 글에서는 플러터 TimePicker에서 현재 시간 이외의 다른 시간 선택 방법에 대해 알아보겠습니다.

1. CurrentTimePicker 사용하기

플러터에서 현재 시간 이외의 다른 시간을 선택할 수 있는 방법 중 하나는 CurrentTimePicker 위젯을 사용하는 것입니다. CurrentTimePicker는 showTimePicker 함수를 사용하여 호출할 수 있습니다. 아래는 예시 코드입니다.

showTimePicker(
  context: context,
  initialTime: TimeOfDay.now(),
  builder: (BuildContext context, Widget child) {
    return MediaQuery(
      data: MediaQuery.of(context).copyWith(alwaysUse24HourFormat: true),
      child: child,
    );
  },
).then((pickedTime) {
  if (pickedTime != null) {
    // 시간 선택 완료 시 실행할 로직 작성
  }
});

initialTime 매개변수를 통해 초기 시간을 현재 시간으로 설정할 수 있습니다. builder를 사용하여 시간 선택 화면을 커스텀할 수 있습니다. 선택한 시간은 then 안에서 사용할 수 있습니다.

2. custom_time_picker 패키지 사용하기

또 다른 방법으로는 custom_time_picker 패키지를 사용하는 것입니다. custom_time_picker는 플러터의 기본 TimePicker보다 더 많은 설정 옵션을 제공합니다. 아래는 custom_time_picker 패키지를 사용한 예시 코드입니다.

import 'package:custom_time_picker/custom_time_picker.dart';

CustomTimePicker(
  initialTime: TimeOfDay.now(),
  timeInterval: Duration(minutes: 15),
  onTimeSelected: (time) {
    // 시간 선택 완료 시 실행할 로직 작성
  },
);

initialTime을 통해 초기 시간을 설정할 수 있고, timeInterval을 통해 시간 간격을 설정할 수 있습니다. 선택한 시간은 onTimeSelected 콜백 함수 안에서 사용할 수 있습니다.

이렇게 custom_time_picker 패키지를 사용하면 플러터 TimePicker에서 현재 시간 이외의 다른 시간을 선택할 수 있습니다.

1. CurrentTimePicker 사용하기

2. custom_time_picker 패키지 사용하기

참고 자료