[flutter] 플러터 TimePicker의 다양한 플러그인 활용 방법

07 Dec 2023

flutter

플러터에서 시간 선택 기능을 구현하려면 TimePicker를 사용해야 합니다. Flutter에서는 여러 가지 플러그인을 활용하여 다양한 TimePicker를 만들 수 있습니다. 이번 블로그 포스트에서는 몇 가지 인기 있는 플러그인과 그 활용 방법을 알아보겠습니다.

1. flutter_datetime_picker

flutter_datetime_picker 플러그인은 Flutter에서 날짜와 시간을 선택할 수 있는 다양한 피커를 제공합니다. 이 플러그인은 다른 플러그인과 달리 별도의 패키지로 제공되며, pub.dev에서 확인할 수 있습니다.

import 'package:flutter_datetime_picker/flutter_datetime_picker.dart';

// 시간 선택 버튼을 눌렀을 때 호출되는 함수
void _showTimePicker() {
    DatePicker.showTimePicker(
        context,
        showTitleActions: true,
        onChanged: (date) {
            print('change $date');
        },
        onConfirm: (date) {
            print('confirm $date');
        },
        currentTime: DateTime.now(),
        locale: LocaleType.ko // 언어 설정
    );
}

위 예제에서는 DatePicker.showTimePicker 함수를 사용하여 플러터 TimePicker를 호출하고, 선택된 시간에 대한 콜백 함수를 정의하고 있습니다. currentTime를 통해 초기 시간을 설정할 수 있으며, locale을 통해 언어를 설정할 수 있습니다.

2. cupertino_picker

Flutter의 Material 디자인을 사용하지 않고 iOS 디자인을 구현할 때는 cupertino_picker 플러그인을 사용할 수 있습니다. 이 플러그인을 사용하면 iOS에서 제공하는 TimePicker를 더욱 쉽게 구현할 수 있습니다. pub.dev에서 확인할 수 있습니다.

import 'package:flutter/cupertino.dart';

// 시간 선택 버튼을 눌렀을 때 호출되는 함수
void _showTimePicker() {
    showCupertinoModalPopup(
        context: context,
        builder: (_) => Container(
            height: 300,
            child: CupertinoDatePicker(
            mode: CupertinoDatePickerMode.time,
            initialDateTime: DateTime.now(),
            onDateTimeChanged: (date) {
                print(date);
            },
        ),
    ));
}

위 예제에서는 CupertinoDatePicker 위젯을 사용하여 TimePicker를 구현하고 있습니다. mode를 통해 시간 선택 모드를 설정할 수 있으며, initialDateTime을 통해 초기 시간을 설정할 수 있습니다.

3. time_picker_dialog

time_picker_dialog 플러그인은 다이얼로그 형태로 시간을 선택할 수 있는 기능을 제공합니다. pub.dev에서 확인할 수 있습니다.

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

// 시간 선택 버튼을 눌렀을 때 호출되는 함수
void _showTimePicker() async {
    final TimeOfDay pickedTime = await showTimePicker(
        context: context,
        initialTime: TimeOfDay.now(),
    );

    if (pickedTime != null) {
        print('Selected Time: ${pickedTime.format(context)}');
    }
}

위 예제에서는 showTimePicker 함수를 사용하여 다이얼로그 형태의 TimePicker를 호출하고, 선택된 시간에 대한 콜백 함수를 정의하고 있습니다.

마무리

이번 포스트에서는 플러터에서 다양한 TimePicker 플러그인을 활용하는 방법에 대해 알아보았습니다. ‘flutter_datetime_picker’, ‘cupertino_picker’, ‘time_picker_dialog’ 플러그인을 사용하면 각각 다른 스타일의 TimePicker를 구현할 수 있습니다. 필요에 맞게 플러그인을 선택하여 사용하여 플러터 앱에 시간 선택 기능을 추가해 보세요. Happy coding!