[Flutter] dropdown_button2 드롭다운 버튼 구현 방법

2024-01-02

---

사진: Unsplash 의 Polina Kuzovkova

---

1. 설치

 

dependencies:
  dropdown_button2: ^2.3.8

---

import 'package:dropdown_button2/dropdown_button2.dart';

---

2. 예제

 

https://pub.dev/packages/dropdown_button2

 

final List<String> items = [
  'Item1',
  'Item2',
  'Item3',
  'Item4',
];
String? selectedValue;

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: Center(
      child: DropdownButtonHideUnderline(
        child: DropdownButton2<String>(
          isExpanded: true,
          hint: Text( 
            'Select Item',
            style: TextStyle(
              fontSize: 14,
              color: Theme.of(context).hintColor,
            ),
          ),//최초 노출되는 버튼 내부 텍스트
          items: items
              .map((String item) => DropdownMenuItem<String>(
                    value: item,
                    child: Text(
                      item,
                      style: const TextStyle(
                        fontSize: 14,
                      ),
                    ),
                  ))
              .toList(), //드롭다운에 노출시 나오는 리스트 항목
          value: selectedValue, //선택된 값
          onChanged: (String? value) {
            setState(() {
              selectedValue = value;
            });
          }, //드롭박스 내부의 값이 선택되었을때 동작하는 함수 정의
          buttonStyleData: const ButtonStyleData(
            padding: EdgeInsets.symmetric(horizontal: 16),
            height: 40,
            width: 140,
          ), //버튼에 대한 스타일
          menuItemStyleData: const MenuItemStyleData(
            height: 40,
          ), //드롭박스에 노출되는 메뉴 스타일
        ),
      ),
    ),
  );
}

 

 

참고 : 여기서 DropdownButtonHideUnderline는 DropdownButton2 의 밑줄을 숨기려고 감싸준 것이다.

---

3. 출처

 

https://pub.dev/packages/dropdown_button2

dropdown_button2 | Flutter Package

---

메인 이미지 출처 : 사진: Unsplash의Polina Kuzovkova