[flutter] 플러터 TimePicker에서 시간 선택 후 콜백 함수 호출하기

07 Dec 2023

flutter

플러터에서는 TimePicker 위젯을 사용하여 시간을 선택할 수 있습니다. 이때, 시간 선택 후에 특정 작업을 수행하기 위해 콜백 함수를 호출하는 방법을 알아보겠습니다.

1. TimePicker 설치

먼저, flutter_datetime_picker 패키지를 설치해야 합니다. pubspec.yaml 파일에 아래의 의존성을 추가해주세요.

dependencies:
  flutter_datetime_picker: ^1.4.0

의존성을 추가한 후, 패키지를 적용하기 위해 터미널에서 flutter pub get 명령어를 실행해주세요.

2. TimePicker 사용하기

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

class MyTimePicker extends StatefulWidget {
  @override
  _MyTimePickerState createState() => _MyTimePickerState();
}

class _MyTimePickerState extends State<MyTimePicker> {
  TimeOfDay _selectedTime;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('TimePicker Example'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            DatePicker.showTimePicker(
              context,
              onConfirm: (time) {
                setState(() {
                  _selectedTime = time;
                });
                _handleTimeSelection();
              },
              currentTime: _selectedTime ?? TimeOfDay.now(),
              locale: LocaleType.ko,  // locale 설정 (한국어)
            );
          },
          child: Text('Select Time'),
        ),
      ),
    );
  }

  void _handleTimeSelection() {
    if (_selectedTime != null) {
      // 선택된 시간을 이용하여 작업을 수행하는 로직 구현
      print('Selected time: ${_selectedTime.format(context)}');
    }
  }
}

위의 코드에서 MyTimePicker 위젯은 시간 선택 후 콜백 함수를 호출할 준비를 합니다. DatePicker 클래스의 showTimePicker 메소드를 사용하여 시간 선택 다이얼로그를 띄워주고, onConfirm 콜백 함수에서 시간 선택 후 작업을 수행합니다.

_handleTimeSelection 메소드는 선택된 시간을 이용하여 원하는 작업을 수행하는 로직을 구현하는 부분입니다. 이 부분을 사용자의 요구에 맞게 수정해주세요.

3. 실행 결과

위의 코드를 실행하면 “Select Time” 버튼이 화면에 표시되며, 버튼을 클릭하면 시간 선택 다이얼로그가 나타납니다. 시간을 선택하고 확인 버튼을 누르면 선택된 시간이 콘솔에 출력됩니다.

이제 위의 코드를 참고하여 플러터 TimePicker를 사용하고, 시간 선택 후 원하는 작업을 수행하는 콜백 함수를 호출하는 방법에 대해 알아보았습니다.