[flutter] DropdownButton 위젯을 사용하여 날짜 선택하기

08 Dec 2023

flutter

Flutter에서 DropdownButton 위젯을 사용하여 사용자가 날짜를 선택할 수 있는 기능을 구현하는 방법을 알아보겠습니다.

DropdownButton 위젯

DropdownButton 위젯은 사용자가 항목을 선택할 수 있는 드롭다운 목록을 제공합니다. 각 항목은 드롭다운 버튼에 표시되고, 사용자가 원하는 항목을 선택할 수 있습니다.

아래는 DropdownButton 위젯의 간단한 예시입니다.

String selectedDate = '2022-01-01';

List<String> dates = [
  '2022-01-01',
  '2022-01-02',
  '2022-01-03',
  // ... 
];

DropdownButton<String>(
  value: selectedDate,
  items: dates.map((String date) {
    return DropdownMenuItem<String>(
      value: date,
      child: Text(date),
    );
  }).toList(),
  onChanged: (String? newDate) {
    setState(() {
      selectedDate = newDate!;
    });
  },
)

위 코드에서 DropdownButton 위젯은 dates 리스트에 있는 항목들을 드롭다운 버튼으로 제공하고, 사용자가 새로운 날짜를 선택하면 onChanged 콜백을 통해 선택된 날짜를 갱신합니다.

날짜 선택 기능 추가하기

DropdownButton 위젯을 사용하여 날짜 선택 기능을 구현하는 방법은 다양합니다. 예를 들어, 날짜 형식을 변경하거나, 날짜 범위를 지정하는 등의 추가적인 기능을 구현할 수 있습니다.

날짜 형식을 변경하는 예시:

final DateFormat formatter = DateFormat('yyyy-MM-dd');
String formattedDate = formatter.format(DateTime.now());

날짜 범위를 지정하는 예시:

DateTime start = DateTime(2022, 1, 1);
DateTime end = DateTime(2022, 12, 31);
List<String> dates = [];

for (var i = start; i.isBefore(end); i = i.add(Duration(days: 1))) {
  dates.add(formatter.format(i));
}

결론

Flutter에서 DropdownButton을 사용하여 날짜를 선택하는 기능을 구현하는 방법을 알아보았습니다. DropdownButton을 활용하여 사용자가 쉽게 날짜를 선택할 수 있도록 기능을 제공할 수 있습니다.

향후 프로젝트에서 날짜 선택 기능이 필요한 경우 DropdownButton을 유용하게 사용해보세요!

참고: Flutter 공식 문서 - DropdownButton