[Flutter] DropdownButton , DropdownMenuItem

 

여러 항목 중 하나를 선택하는 것을 구현할 때 쓰이는 DropDownButton 입니다.

 

 

간단 구현 방법

• DropDown 으로 선택된 값의 상태를 변경해주어야 하니 StatefulWidget 으로 만듭니다.
• DropDown 에 넣을 목록과 현재 선택값을 선언해주세요.
• initState 에서 현재 선택값을 목록의 첫번째 값으로 넣어줍니다.

  final _cities = ['서울', '대전', '대구', '부산', '인천', '울산', '광주'];
  String _selectedCity = '';

  @override
  void initState() {
    super.initState();
    setState(() {
      _selectedCity = _cities[0];
    });
  }

 

 

• DropdownButton 을 구현합니다.
• value 는 현재 선택된 값입니다. 아까 선언한 _selectedCity 를 넣어줍니다.
• items 는 List<DropdownMenuItem> 를 넣어줍니다. _cities 를 map 을 이용하여 만들어주면 됩니다.
• onChanged 는 Dropdown 의 값이 변했을 때 DropdownMenuItem 의 value 를 반환합니다.
• onChanged 에서 현재 선택값의 상태 변경 처리를 하면 구현은 끝납니다. 

DropdownButton(
  value: _selectedCity,
  items: _cities
      .map((e) => DropdownMenuItem(
            value: e, // 선택 시 onChanged 를 통해 반환할 value
            child: Text(e),
          ))
      .toList(),
  onChanged: (value) { // items 의 DropdownMenuItem 의 value 반환
    setState(() {
      _selectedCity = value!;
    });
  },
)

 

 

DropdownButton 속성

1. icon

 

• DropdownButton 우측에 위치는 아이콘이며 관련 속성은 다음과 같습니다.

// Dropdown 우측 아이콘 변경
Widget? icon,
  
// onChanged 가 정의되지 않았을 때 아이콘 색상 - ex) onChanged : null
Color? iconDisabledColor,
  
// onChanged 가 정의되었을 때 활성 아이콘 색상
Color? iconEnabledColor,
  
// 아이콘 크기
double iconSize,

 

 

2. hint

 

• DropdownButton의 value 값이 null 일 때 나타나는 값으로 관련 속성은 다음과 같습니다.

// value 값이 null 일 때 보여줄 위젯
Widget? hint

// onChanged 가 null 일 때 보여줄 hint 위젯
Widget? disabledHint

// hint 정렬 위치
AlignmentGeometry alignment

 

 

3. dropdown

 

• DropdownButton 을 클릭해서 펼쳐졌을 때 이며 관련 속성은 다음과 같습니다.

// 그림자 굵기
int elevation,

// dropdown radius 조절
BorderRadius? borderRadius

// dropdown text style
TextStyle? style,

// dropdown 배경색
Color? dropdownColor,

// 제한 높이  
double? menuMaxHeight

// menuItem 의 높이
double? itemHeight,

// dropdown 을 가로로 최대로 늘릴지 여부
bool isExpanded,

 

 

4. 기타

// dropdowmItem 을 직접 만듭니다.
DropdownButtonBuilder? selectedItemBuilder

// 감지된 제스처가 음향 및/또는 촉각 피드백을 제공해야 하는지 여부
bool? enableFeedback,

// 버튼의 높이 줄일지 여부
bool isDense,

// dropdownbutton 의 밑줄 
Widget? underline

// dropdownbutton click event
VoidCallback? onTap

// focus 관련 속성 입니다.
Color? focusColor,
FocusNode? focusNode,
bool autofocus,

 

 

 

DropdownMenuItem 속성

// DropdownButton 의 onChanged 에서 반환하는 값
T? value

// 활성화 여부
bool enabled

// click event
VoidCallback? onTap

 

 

 

Sample

class SampleScreen extends StatefulWidget {
  const SampleScreen({Key? key}) : super(key: key);

  @override
  State<SampleScreen> createState() => _SampleScreenState();
}

class _SampleScreenState extends State<SampleScreen> {
  final _cities = ['서울', '대전', '대구', '부산', '인천', '울산', '광주'];
  String? _selectedCity;

  @override
  void initState() {
    super.initState();
    setState(() {
      _selectedCity = _cities[0];
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: DropdownButton(
          value: _selectedCity,
          items: _cities
              .map((e) => DropdownMenuItem(
                    value: e,
                    child: Text(e),
                  ))
              .toList(),
          onChanged: (value) {
            setState(() {
              _selectedCity = value!;
            });
          },
        ),
      ),
    );
  }
}