[flutter] 플러터 DatePicker에서 선택한 날짜 가져오기

08 Dec 2023

flutter

플러터는 사용자가 쉽게 선택한 날짜를 가져올 수 있는 DatePicker 위젯을 제공합니다. 사용자가 원하는 날짜를 선택하고 해당 날짜를 애플리케이션에서 사용하려면 몇 가지 추가 작업이 필요합니다. 이 블로그에서는 DatePicker에서 선택한 날짜를 가져오는 방법에 대해 설명하겠습니다.

DatePicker 위젯 생성하기

DatePicker를 사용하려면 다음과 같이 DatePicker 위젯을 생성할 수 있습니다.

import 'package:flutter/material.dart';

class DatePickerExample extends StatefulWidget {
  @override
  _DatePickerExampleState createState() => _DatePickerExampleState();
}

class _DatePickerExampleState extends State<DatePickerExample> {
  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;
      });
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        RaisedButton(
          onPressed: () => _selectDate(context),
          child: Text('Select date'),
        ),
        Text('Selected date: ${selectedDate.toString()}'),
      ],
    );
  }
}

위의 코드는 사용자가 선택한 날짜를 나타내기 위한 간단한 DatePicker 위젯을 생성하는 예제입니다.

선택한 날짜 가져오기

의도한 바대로 DatePicker에서 선택한 날짜를 가져오려면 몇 가지 단계를 거쳐야 합니다.

먼저, _selectDate 메소드에서 showDatePicker를 호출하여 사용자에게 날짜 선택 UI를 표시합니다. 선택한 날짜는 picked 변수에 저장됩니다.

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

그런 다음, picked가 null이 아니고 선택한 날짜가 현재 선택된 날짜와 다른 경우에만 selectedDate를 업데이트합니다.

if (picked != null && picked != selectedDate)
  setState(() {
    selectedDate = picked;
  });

이제 selectedDate에는 사용자가 선택한 날짜가 저장됩니다.

결론

위의 예제를 참고하여 플러터 DatePicker에서 선택한 날짜를 가져오는 방법을 살펴보았습니다. 이를 통해 사용자가 선택한 날짜를 효과적으로 활용할 수 있을 것입니다.