[flutter] 플러터에서 DatePicker 사용 방법

08 Dec 2023

flutter

플러터(Flutter) 애플리케이션에서 사용자에게 DatePicker를 제공하는 방법에 대해 알아보겠습니다.

1. date_picker 패키지 설치

먼저 date_picker 패키지를 플러터 프로젝트에 추가합니다. pubspec.yaml 파일의 dependencies 섹션에 아래와 같이 추가합니다.

dependencies:
  date_picker: ^0.1.0

pubspec.yaml 파일을 저장한 후, 터미널에서 flutter pub get 명령어를 실행하여 패키지를 다운로드 및 추가합니다.

2. DatePicker 사용하기

DatePicker를 사용하기 위해 아래와 같이 코드를 작성합니다.

import 'package:date_picker/date_picker.dart';

DateTime selectedDate = DateTime.now();

Future<void> _selectDate(BuildContext context) async {
  final DateTime picked = await showDatePicker(
    context: context,
    initialDate: selectedDate,
    firstDate: DateTime(2015, 8),
    lastDate: DateTime(2101),
  );
  if (picked != null && picked != selectedDate)
    setState(() {
      selectedDate = picked;
    });
}

// ...

ElevatedButton(
  onPressed: () {
    _selectDate(context);
  },
  child: Text('Select date'),
)

위 코드는 현재 날짜를 기본값으로 설정하고, 사용자가 ElevatedButton을 누르면 DatePicker가 나타나게 됩니다. 사용자가 날짜를 선택하면 그에 맞게 selectedDate가 업데이트되며, 화면에 선택한 날짜가 표시됩니다.

이제 플러터 애플리케이션에서 간단히 DatePicker를 사용하는 방법에 대해 알아보았습니다.

더 많은 기능을 원하시거나 커스터마이징이 필요하다면 DatePicker 예제 및 공식 문서를 참고하세요.