[flutter] 플러터 TimePicker에서 날짜 선택 기능 추가하기

07 Dec 2023

flutter

플러터의 TimePicker 위젯은 시간을 선택할 수 있는 간단한 인터페이스를 제공합니다. 하지만 기본적으로 날짜 선택 기능은 포함되어 있지 않습니다. 이번 튜토리얼에서는 플러터의 TimePicker에서 날짜 선택 기능을 추가하는 방법에 대해 알아보겠습니다.

필요한 패키지 설치하기

먼저, 날짜 선택 기능을 추가하기 위해 flutter_datetime_picker 패키지를 설치해야 합니다. pubspec.yaml 파일에 다음과 같이 패키지를 추가해주세요:

dependencies:
  flutter_datetime_picker: ^2.0.0

패키지를 추가한 후, 터미널에서 flutter packages get 명령을 실행하여 패키지를 가져옵니다.

날짜 선택 기능 추가하기

이제 TimePicker에서 날짜 선택 기능을 추가할 준비가 되었습니다. 아래의 코드를 참고하여 작성해주세요:

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

class TimePickerPage extends StatefulWidget {
  @override
  _TimePickerPageState createState() => _TimePickerPageState();
}

class _TimePickerPageState extends State<TimePickerPage> {
  DateTime selectedDate = DateTime.now();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('TimePicker with Date Selection'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              'Selected Date:',
              style: TextStyle(fontSize: 18),
            ),
            Text(
              '${selectedDate.year}-${selectedDate.month}-${selectedDate.day}',
              style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
            ),
            SizedBox(height: 20),
            RaisedButton(
              child: Text('Select Date'),
              onPressed: () {
                DatePicker.showDatePicker(
                  context,
                  showTitleActions: true,
                  onChanged: (date) {
                    setState(() {
                      selectedDate = date;
                    });
                  },
                  currentTime: selectedDate,
                );
              },
            ),
          ],
        ),
      ),
    );
  }
}

위 코드에서는 flutter_datetime_picker 패키지를 사용하여 DatePicker를 호출하고, 선택한 날짜를 상태 관리 변수인 selectedDate에 저장합니다. 선택한 날짜는 selectedDate 변수의 값을 텍스트로 출력하는 방식으로 보여줍니다.

이제 위의 코드를 사용하여 원하는 곳에서 TimePicker 페이지를 호출할 수 있습니다.

Navigator.push(
  context,
  MaterialPageRoute(builder: (context) => TimePickerPage()),
);

위와 같이 MaterialPageRoute를 사용하여 TimePicker 페이지로 이동할 수 있습니다.

마무리

이번 튜토리얼에서는 플러터 TimePicker에서 날짜 선택 기능을 추가하는 방법을 알아보았습니다. flutter_datetime_picker 패키지를 사용하여 간편하게 날짜 선택 기능을 구현할 수 있습니다. 이를 응용하여 플러터 앱을 더욱 다양하게 개발해보세요.

참고 자료

flutter_datetime_picker 패키지