[flutter] 플러터 TimePicker에서 선택한 시간 정보 전송하기

07 Dec 2023

flutter

앱 개발 중에 시간 정보를 입력받아야하는 경우가 많습니다. 플러터에서는 TimePicker를 사용하여 사용자로부터 시간을 선택할 수 있습니다. 이번 포스트에서는 플러터의 TimePicker에서 선택한 시간 정보를 다른 화면으로 전송하는 방법에 대해 알아보겠습니다.

1. TimePicker 구현하기

먼저, 플러터의 material 패키지에서 제공하는 showTimePicker 함수를 사용하여 TimePicker를 구현합니다. 아래는 기본적인 TimePicker의 예제 코드입니다.

var selectedTime = TimeOfDay.now();

Future<void> _selectTime(BuildContext context) async {
  final TimeOfDay? picked = await showTimePicker(
    context: context,
    initialTime: selectedTime,
  );
  if (picked != null && picked != selectedTime) {
    setState(() {
      selectedTime = picked;
    });
  }
}

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Text('Selected Time: ${selectedTime.format(context)}'),
          ElevatedButton(
            onPressed: () {
              _selectTime(context);
            },
            child: Text('Select Time'),
          ),
        ],
      ),
    ),
  );
}

위 코드에서는 showTimePicker 함수를 호출하여 사용자로부터 시간을 선택하고, 선택된 시간은 selectedTime 변수에 저장됩니다. 선택된 시간은 화면에 텍스트로 표시되며, “Select Time” 버튼을 누르면 TimePicker가 표시됩니다.

2. 시간 정보 전송하기

선택한 시간 정보를 다른 화면으로 전송하기 위해서는 선택한 시간을 다음 화면의 생성자로 전달해야 합니다. 이를 위해 아래와 같이 코드를 수정해보겠습니다.

class SecondScreen extends StatelessWidget {
  final TimeOfDay selectedTime;

  SecondScreen({required this.selectedTime});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Second Screen'),
      ),
      body: Center(
        child: Text('Selected Time: ${selectedTime.format(context)}'),
      ),
    );
  }
}

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Text('Selected Time: ${selectedTime.format(context)}'),
          ElevatedButton(
            onPressed: () {
              Navigator.push(
                context,
                MaterialPageRoute(
                  builder: (context) => SecondScreen(selectedTime: selectedTime),
                ),
              );
            },
            child: Text('Go to Second Screen'),
          ),
        ],
      ),
    ),
  );
}

위 코드에서는 SecondScreen 클래스를 생성하고, 생성자에 selectedTime을 전달합니다. 이제 “Go to Second Screen” 버튼을 누르면 현재 선택한 시간이 SecondScreen으로 전달되어 화면에 표시됩니다.

3. 정리하며

이렇게 플러터의 TimePicker에서 선택한 시간 정보를 다른 화면으로 전송하는 방법에 대해 알아보았습니다. TimePicker는 앱 개발 시 많이 사용되는 기능 중 하나이므로 숙지해두시면 유용할 것입니다.