Flutter는 Google에서 개발한 모바일 애플리케이션 개발 프레임워크로, Android와 iOS에서 동작하는 네이티브 수준의 앱을 만들 수 있습니다. 이번 포스트에서는 Flutter에서 TimePicker를 사용하는 방법을 알아보겠습니다.

TimePicker란?

TimePicker는 사용자로부터 현재 시간을 선택하도록 도와주는 팝업 창입니다. 사용자가 원하는 시간을 선택할 수 있는 기능을 제공하여, 앱에서 시간에 대한 입력을 받을 때 유용하게 사용될 수 있습니다.

패키지 설치

플러터에서 TimePicker를 사용하기 위해서는 flutter_datetime_picker 패키지를 설치해야 합니다. pubspec.yaml 파일에 아래 내용을 추가해주세요.

dependencies:
  flutter_datetime_picker: ^2.0.0

저장 후, 터미널에서 flutter pub get 명령을 실행하여 패키지를 설치해주세요.

TimePicker 사용하기

1. 먼저, flutter_datetime_picker 패키지를 임포트해야 합니다.

import 'package:flutter_datetime_picker/flutter_datetime_picker.dart';

1. 사용자가 시간을 선택할 수 있는 버튼을 생성합니다. 예를 들어, RaisedButton 위젯을 이용하여 버튼을 만들어 보겠습니다.

RaisedButton(
  onPressed: () {
    DatePicker.showTimePicker(
      context,
      showTitleActions: true,
      onChanged: (date) {
        print('Change $date');
      },
      onConfirm: (date) {
        print('Confirm $date');
      },
      currentTime: DateTime.now(),
    );
  },
  child: Text(
    '시간 선택',
    style: TextStyle(
      fontSize: 16,
    ),
  ),
);

1. 사용자가 시간을 선택하거나 변경할 때마다 onChanged 콜백 함수가 호출됩니다. 예제에서는 선택한 시간을 콘솔에 출력하도록 작성했습니다.

2. 사용자가 시간 선택을 마치고 확인 버튼을 누르면 onConfirm 콜백 함수가 호출되며, 선택한 시간을 콘솔에 출력하는 예제입니다.

마무리

이제 Flutter에서 TimePicker를 사용하는 방법을 알아보았습니다. flutter_datetime_picker 패키지를 이용하여 사용자로부터 시간을 선택하고, 선택한 시간을 다른 작업에 활용할 수 있습니다.

더 자세한 내용은 flutter_datetime_picker GitHub 페이지에서 확인하실 수 있습니다.