[flutter] 플러터 TimePicker에서 시간 변경 시 이벤트 처리 방법

07 Dec 2023

flutter

플러터(Flutter)는 크로스 플랫폼 모바일 앱 개발을 위한 프레임워크로, 다양한 위젯을 제공합니다. 그 중에는 시간을 선택할 수 있는 TimePicker도 포함되어 있습니다. 이 글에서는 플러터의 TimePicker에서 시간을 변경할 때의 이벤트 처리 방법을 알아보겠습니다.

1. TimePicker 위젯 생성하기

먼저, TimePicker 위젯을 생성해야 합니다. TimePicker 위젯은 showTimePicker() 함수를 사용하여 호출할 수 있습니다. 예를 들어, 아래와 같이 코드를 작성할 수 있습니다:

DateTime selectedTime = DateTime.now();

Future<void> _selectTime(BuildContext context) async {
  final TimeOfDay? picked = await showTimePicker(
    context: context,
    initialTime: TimeOfDay.fromDateTime(selectedTime),
  );

  if (picked != null) {
    setState(() {
      selectedTime = DateTime(
        selectedTime.year,
        selectedTime.month,
        selectedTime.day,
        picked.hour,
        picked.minute,
      );
    });
  }
}

이 코드는 selectedTime 변수에 현재 시간을 저장하고, _selectTime() 함수를 호출해서 TimePicker를 보여줍니다. 사용자가 시간을 선택하면 picked 변수에 선택한 시간이 저장됩니다. 이후에 선택한 시간이 null이 아닌 경우에, selectedTime 변수를 업데이트하여 선택한 시간을 저장합니다.

2. 이벤트 처리하기

TimePicker에서 시간이 변경될 때마다 이벤트를 처리해야 한다면, _selectTime() 함수의 내부에 이벤트 핸들러를 추가하면 됩니다. 예를 들어, 시간이 변경될 때마다 선택된 시간을 로그로 출력하는 코드는 다음과 같습니다:

Future<void> _selectTime(BuildContext context) async {
  final TimeOfDay? picked = await showTimePicker(
    context: context,
    initialTime: TimeOfDay.fromDateTime(selectedTime),
  );

  if (picked != null) {
    setState(() {
      selectedTime = DateTime(
        selectedTime.year,
        selectedTime.month,
        selectedTime.day,
        picked.hour,
        picked.minute,
      );
    });

    print('Selected time: ${picked.format(context)}');
  }
}

이제 사용자가 시간을 변경할 때마다 선택된 시간이 디버그 콘솔에 출력됩니다.

3. 추가적인 이벤트 처리

만약 선택된 시간을 다른 곳에서 사용하고 싶다면, _selectTime() 함수를 호출한 부분에서 선택된 시간을 가져와서 처리할 수 있습니다. 예를 들어, 선택된 시간을 다른 변수에 저장하고 알림창으로 표시하는 코드는 다음과 같습니다:

Future<void> _selectTime(BuildContext context) async {
  final TimeOfDay? picked = await showTimePicker(
    context: context,
    initialTime: TimeOfDay.fromDateTime(selectedTime),
  );

  if (picked != null) {
    setState(() {
      selectedTime = DateTime(
        selectedTime.year,
        selectedTime.month,
        selectedTime.day,
        picked.hour,
        picked.minute,
      );
    });

    final String formattedTime = picked.format(context);
    final alertDialog = AlertDialog(
      title: Text('Selected Time'),
      content: Text('Selected time: $formattedTime'),
      actions: [
        TextButton(
          onPressed: () => Navigator.pop(context),
          child: Text('OK'),
        ),
      ],
    );

    showDialog(
      context: context,
      builder: (BuildContext context) => alertDialog,
    );
  }
}

이 코드는 선택된 시간을 formattedTime 변수에 저장하고, 알림창으로 선택된 시간을 표시합니다.

1. TimePicker 위젯 생성하기

2. 이벤트 처리하기

3. 추가적인 이벤트 처리

참고 자료