[flutter] DropdownButton 위젯으로 정렬 기능 구현하기

08 Dec 2023

flutter

Flutter 앱을 개발할 때 DropdownButton 위젯을 사용하여 목록을 정렬하는 기능을 구현할 수 있습니다. 이번 글에서는 DropdownButton 위젯을 통해 간단한 정렬 기능을 구현하는 방법에 대해 알아보겠습니다.

1. DropdownButton 위젯 이해

DropdownButton 위젯은 Flutter에서 목록에서 하나의 값을 선택할 수 있는 드롭다운 버튼을 제공합니다. 이를 통해 사용자가 목록에서 원하는 값을 선택할 수 있도록 도와줍니다.

DropdownButton<String>(
  value: selectedValue,
  items: items.map((String value) {
    return DropdownMenuItem<String>(
      value: value,
      child: Text(value),
    );
  }).toList(),
  onChanged: (String newValue) {
    setState(() {
      selectedValue = newValue;
    });
  },
)

2. DropdownButton을 이용한 정렬 기능 구현

정렬 기능을 구현할 때, DropdownButton을 사용하여 사용자에게 정렬 방식을 선택할 수 있는 목록을 제공할 수 있습니다.

아래는 DropdownButton을 이용해 정렬 방식을 선택하는 예제 코드입니다.

String selectedSortBy = '이름 순';

DropdownButton<String>(
  value: selectedSortBy,
  items: <String>['이름 순', '가격 순', '등록일 순'].map((String value) {
    return DropdownMenuItem<String>(
      value: value,
      child: Text(value),
    );
  }).toList(),
  onChanged: (String newValue) {
    setState(() {
      selectedSortBy = newValue;
      // 선택된 정렬 방식에 따라 데이터를 정렬하는 로직 구현
      // ex) setState로 데이터를 정렬하거나, 새로운 쿼리를 수행하여 데이터를 불러오는 등의 작업 수행
    });
  },
)

위의 코드에서 DropdownButton의 items에는 정렬 방식 목록이 포함되어 있습니다. onChanged 콜백에서는 선택된 정렬 방식에 따라 해당 데이터를 정렬하는 로직을 수행할 수 있습니다.

이렇게 DropdownButton을 이용하여 간단하게 정렬 기능을 구현할 수 있습니다.

마무리

Flutter의 DropdownButton 위젯을 이용하면 사용자에게 다양한 목록에서 하나의 값을 선택할 수 있는 기능을 제공할 수 있습니다. 정렬 기능 외에도 여러 가지 목적으로 활용할 수 있는데, 필요한 기능에 맞게 유연하게 사용해보시기 바랍니다.