플러터(Flutter)의 TimePicker를 사용하여 시간을 선택하고, 선택한 시간을 확정하는 방법에 대해 알아보겠습니다.

1. TimePicker를 보여주기

먼저, TimePicker를 보여주기 위해 showTimePicker 함수를 사용합니다. 이 함수는 사용자가 시간을 선택하고 확정할 수 있는 TimePicker 다이얼로그를 보여줍니다.

TimeOfDay selectedTime = TimeOfDay.now();

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

  if (pickedTime != null) {
    setState(() {
      selectedTime = pickedTime;
    });
  }
}

위의 예제 코드에서는 selectedTime 변수에 현재 시간을 할당하고, _selectTime 함수에서 showTimePicker를 호출하여 선택한 시간을 가져옵니다. 이후 setState를 호출하여 화면을 다시 그립니다.

2. 선택한 시간 확정하기

이제 선택한 시간을 확정하는 방법에 대해 알아보겠습니다. 선택한 시간을 확정하기 위해선 “확인” 버튼을 누르거나 다른 이벤트를 통해 선택한 시간을 사용할 수 있어야 합니다.

예를 들어, “확인” 버튼을 사용하여 선택한 시간을 확정할 수 있는 경우 다음과 같이 처리할 수 있습니다.

ElevatedButton(
  onPressed: () {
    if (selectedTime != null) {
      _confirmSelectedTime();
    } else {
      // 선택된 시간이 없는 경우 처리할 내용 작성
    }
  },
  child: Text('확인'),
),

위의 예제 코드에서는 selectedTime 변수가 null이 아닌 경우 _confirmSelectedTime 함수를 호출하여 선택한 시간을 확정합니다. 선택된 시간이 없는 경우에 대한 처리는 개발자의 필요에 따라 작성하면 됩니다.

결론

위에서 알아본 방법을 사용하면 플러터 TimePicker에서 시간을 선택하고, 선택한 시간을 확정할 수 있습니다. 선택한 시간을 활용하여 원하는 로직을 구현할 수 있으니, 앱 개발에 유용하게 사용해보세요!

참고 자료

• Flutter 공식 문서 - TimePicker: https://api.flutter.dev/flutter/material/showTimePicker.html