플러터는 다양한 UI 구성 요소를 제공하여 앱을 개발할 때 사용됩니다. 그 중에서도 TimePicker는 사용자가 시간을 선택할 수 있도록 도와주는 중요한 요소입니다. 이번 블로그 포스트에서는 플러터 TimePicker에서 시간 선택 화면을 커스터마이징하는 방법에 대해 알아보겠습니다.

1. TimePicker 커스터마이징

플러터에서 TimePicker는 showTimePicker 함수를 사용하여 띄울 수 있습니다. 이 함수에는 context와 선택된 시간인 initialTime 등의 인자를 전달해야 합니다.

시간 선택 화면을 커스터마이징하려면 builder 속성을 사용해야 합니다. builder 속성은 시간 선택 화면의 레이아웃 및 디자인을 커스터마이징하기 위해 사용됩니다.

다음은 시간 선택 화면을 커스터마이징하는 예시입니다.

TimeOfDay? selectedTime = await showTimePicker(
  context: context,
  initialTime: TimeOfDay.now(),
  builder: (BuildContext context, Widget? child) {
    return Theme(
      data: ThemeData.dark(), // 시간 선택 화면의 테마를 어둡게 설정
      child: child!,
    );
  },
);

위 예시에서는 builder 속성을 사용하여 테마를 어둡게 설정하였습니다. 사용자는 필요에 따라 builder 속성을 사용하여 원하는 만큼 시간 선택 화면을 커스터마이징할 수 있습니다.

2. 추가 커스터마이징 옵션

플러터 TimePicker에서는 다양한 커스터마이징 옵션을 제공합니다. 몇 가지 예시를 살펴보겠습니다.

2.1. 레이아웃 커스터마이징

TimePicker의 레이아웃을 커스터마이징하려면 child 위젯을 사용하여 원하는 형태로 구성할 수 있습니다. 예를 들어, 플러터에서 제공하는 디폴트 TimePicker를 커스터마이징하려면 cupertino_layout.dart 파일을 참고할 수 있습니다.

2.2. 시간 범위 제한

TimePicker의 시간 범위를 제한하려면 selectableDayPredicate 속성을 사용할 수 있습니다. 이를 통해 특정 시간 범위 내에서만 선택이 가능하도록 제한할 수 있습니다.

bool _selectableTimePredicate(DateTime time) {
  final currentTime = DateTime.now();
  final rangeStart = currentTime.subtract(Duration(hours: 1));
  final rangeEnd = currentTime.add(Duration(hours: 1));
  return time.isAfter(rangeStart) && time.isBefore(rangeEnd);
}

TimeOfDay? selectedTime = await showTimePicker(
  context: context,
  initialTime: TimeOfDay.now(),
  selectableDayPredicate: _selectableTimePredicate,
);

위 예시에서는 현재 시간의 1시간 전부터 1시간 후까지의 시간만 선택 가능하도록 제한하였습니다.

마무리

이번 포스트에서는 플러터 TimePicker에서 시간 선택 화면을 커스터마이징하는 방법에 대해 알아보았습니다. builder 속성을 사용하여 레이아웃 커스터마이징 및 selectableDayPredicate를 사용하여 시간 범위 제한 등 다양한 커스터마이징 옵션을 적용할 수 있습니다. 플러터의 다양한 UI 컴포넌트를 활용하여 앱의 사용자 경험을 향상시킬 수 있습니다.

더 많은 정보 및 예제는 Flutter 공식 문서를 참고하시기 바랍니다.