1. 정의

DropdownButton은 여러 아이템 중 하나를 선택할 수 있는 콤보박스 형태의 Widget입니다.

DropdownButton(
	value: ,
	icon: ,
	items: ,
  onChanged: ,
)

2. 사용 의도

검색 결과를 다양한 방식으로 정렬해서 출력하기 위하여 사용하게 되었습니다.

3. 구현 방법

DropdownButton을 사용하기 위해서 items와 버튼을 눌러 다른 값으로 바꿔주도록 할 수 있는 onChanged 속성이 반드시 필요합니다. 그리고 초기값을 표현해주기 위해 value 속성도 사용해줍니다.

final List<dynamic> _dropdownButtonList = ['최신순', '오래된순', '조회수순', '인기순'];
String _selectedValue = '최신순';

item 속성을 통해 옵션을 나열해 줄 아이템들을 List 형식으로 선언해줍니다. 또한 초기값을 표현해주는 value 속성을 나타내주기 위해 _selectedValue라는 String 변수를 선언했습니다.

DropdownButton(
	value: _selectedValue,
	items: _dropdownButtonList.map(
		(element) {
			return DropdownMenuItem(
				value: element,
				child: Text(
	        element
        ),
      );
     },
  ).toList(),
  onChanged: (value) {
	  setState(() {
	    _selectedValue = value as String;
    });
  },
)

처음에 value 속성을 _selectedValue 변수로 정의해서 초기값을 설정하고, items 속성을 앞서 선언한 _dropdownButtonList List 변수를 map() 함수를 사용해서 모든 옵션들을 DropdownMenuItem 위젯으로 return 해줍니다. onChanged 속성을 통해서 어떤 value값을 선택했다면 그 값을 보여주기 위해 _selectedValue 변수를 value값으로 초기화합니다.