• 들어가기
• 분 단위 선택 옵션 적용하기
• 결론

들어가기

Flutter는 Google에서 개발한 크로스 플랫폼 프레임워크로, 모바일 앱 개발을 위한 다양한 기능들을 제공합니다. 그 중에서도 TimePicker는 시간을 선택하기 위한 위젯으로 많이 사용됩니다. 기본적으로 TimePicker에서는 시간을 시(minute) 단위로 선택할 수 있지만, 이번 포스트에서는 분 단위로 선택할 수 있는 옵션을 추가하는 방법을 알아보겠습니다.

분 단위 선택 옵션 적용하기

1. 먼저, 프로젝트의 pubspec.yaml 파일에 flutter_datetime_picker 패키지를 추가합니다. dependencies에 아래와 같은 코드를 추가합니다.

dependencies:
  flutter_datetime_picker: ^1.5.0

1. 터미널에서 flutter pub get 명령어를 실행하여 패키지를 다운로드합니다.

2. 다음과 같이 TimePicker 위젯을 생성합니다.

import 'package:flutter_datetime_picker/flutter_datetime_picker.dart';

DatePicker.showTimePicker(
  context,
  showSecondsColumn: false,
  onChanged: (date) {
    print('change $date');
  },
  onConfirm: (date) {
    print('confirm $date');
  },
  pickerMode: DateTimePickerMode.custom,
  pickerModel: TimePickerModel(
    currentTime: DateTime.now(),
    timeStep: 1, // 분 단위 선택하도록 설정
    minuteDivider: 1, // 분 단위 설정
  ),
);

DatePicker.showTimePicker를 호출하여 TimePicker를 띄울 수 있습니다. pickerMode를 DateTimePickerMode.custom으로 설정하여 사용자 정의한 pickerModel을 사용할 수 있습니다. TimePickerModel을 사용하여 currentTime를 설정하고, timeStep과 minuteDivider를 사용하여 분 단위 선택 옵션을 적용할 수 있습니다.

결론

이번 포스트에서는 TimePicker에서 분 단위 선택 옵션을 사용하는 방법을 알아보았습니다. flutter_datetime_picker 패키지를 사용하여 분 단위 선택 기능을 쉽게 구현할 수 있습니다. 앞으로의 프로젝트에서 시간 관련 기능을 개발할 때 이를 참고해보세요.