[flutter] 플러터 DatePicker를 이용한 날짜 필터링

08 Dec 2023

flutter

플러터(Flutter) 어플리케이션을 개발할 때 종종 날짜 필터링 기능이 필요합니다. DatePicker를 통해 사용자가 날짜를 선택하고 그에 따라 필터링하는 기능을 구현하려면 다음과 같은 방법을 사용할 수 있습니다.

DatePicker 적용

먼저, flutter/material 라이브러리에서 제공하는 DatePicker 위젯을 사용하여 사용자가 날짜를 선택할 수 있도록 합니다.

예를 들어, 사용자가 시작일과 종료일을 선택하도록 하는 경우에는 각각의 DatePicker를 통해 날짜를 선택할 수 있도록 구성할 수 있습니다.

DateTime _startDate;
DateTime _endDate;

Future<void> _selectDate(BuildContext context, bool isStartDate) async {
  final DateTime picked = await showDatePicker(
      context: context,
      initialDate: isStartDate ? _startDate ?? DateTime.now() : _endDate ?? DateTime.now(),
      firstDate: DateTime(2015, 8),
      lastDate: DateTime(2101));
  if (picked != null && picked != (isStartDate ? _startDate : _endDate)) {
    setState(() {
      if (isStartDate) {
        _startDate = picked;
      } else {
        _endDate = picked;
      }
    });
  }
}

위 코드는 사용자가 시작일과 종료일을 선택할 수 있는 DatePicker를 구현한 예시입니다.

필터링

DatePicker에서 날짜를 선택한 후에는 해당 날짜를 이용하여 필터링을 적용할 수 있습니다. 예를 들어, 선택한 시작일과 종료일 사이의 데이터를 필터링하여 보여줄 수 있습니다.

List<Data> _filteredData() {
  return _dataList.where((data) => data.date.isAfter(_startDate) && data.date.isBefore(_endDate)).toList();
}

위 코드는 선택한 시작일과 종료일 사이의 데이터를 필터링하여 반환하는 예시입니다.

결론

플러터의 DatePicker를 이용하여 날짜 필터링 기능을 구현하는 것은 간단하지만 매우 유용합니다. 사용자가 날짜를 선택하고 그에 따라 데이터를 필터링하여 보여주는 기능을 통해 어플리케이션의 유용성을 높일 수 있습니다.

더 많은 정보는 flutter.dev에서 확인할 수 있습니다.