Flutter Dropdown 관련 위젯 비교 및 사용법

Flutter에서 드롭다운 UI를 구현할 때 여러 위젯을 사용할 수 있습니다. 아래는 주요 드롭다운 관련 위젯들의 비교 및 사용법입니다.

---

🔹 1️⃣ DropdownButton vs DropdownMenu 비교

속성	DropdownButton	DropdownMenu
사용 방식	간단한 선택 메뉴 제공	보다 유연한 드롭다운 메뉴 제공
선택 후 UI	선택하면 메뉴가 닫힘	선택해도 메뉴를 유지 가능
스타일 변경	기본적인 스타일 제공	커스텀 디자인 및 스타일 적용 용이
항목 표현 방식	DropdownMenuItem 사용	DropdownMenuEntry 사용
아이콘 커스터마이징	아이콘 크기, 색상 변경 가능	아이콘 직접 설정 가능

📌 DropdownButton은 기존 HTML <select> 와 비슷하며, DropdownMenu는 커스텀 드롭다운을 만들 때 더 적합합니다.

---

🔹 2️⃣ DropdownButton (드롭다운 버튼)

✅ 설명

• Flutter에서 기본적으로 제공하는 드롭다운 버튼 위젯입니다.
• 사용자가 목록에서 하나의 값을 선택할 수 있습니다.

✅ 사용 예제

DropdownButton<String>(
  value: "apple",
  items: [
    DropdownMenuItem(value: "apple", child: Text("사과")),
    DropdownMenuItem(value: "banana", child: Text("바나나")),
  ],
  onChanged: (value) {
    print("선택된 값: $value");
  },
);

---

🔹 3️⃣ DropdownMenuItem (드롭다운 항목)

✅ 설명

• DropdownButton 및 DropdownMenu 에서 사용되는 개별 항목을 나타냅니다.
• value 와 child 속성을 가집니다.

✅ 사용 예제

DropdownMenuItem<String>(
  value: "apple",
  child: Text("사과"),
);

---

🔹 4️⃣ DropdownMenu (드롭다운 메뉴)

✅ 설명

• DropdownButton 보다 유연한 방식으로 메뉴를 구성할 수 있습니다.
• DropdownMenuEntry 목록을 사용하여 구성됩니다.
• 메뉴가 열려도 닫히지 않으며, 더 많은 사용자 지정 옵션을 제공합니다.

✅ 사용 예제

DropdownMenu(
  initialSelection: "사과",
  onSelected: (value) {
    print("선택된 값: $value");
  },
  dropdownMenuEntries: [
    DropdownMenuEntry(value: "apple", label: "사과"),
    DropdownMenuEntry(value: "banana", label: "바나나"),
  ],
);

---

🔹 5️⃣ DropdownMenuEntry (드롭다운 메뉴 항목)

✅ 설명

• DropdownMenu에서 개별 항목을 정의하는 위젯입니다.
• value 와 label 속성을 가집니다.

✅ 사용 예제

DropdownMenuEntry(
  value: "banana",
  label: "바나나",
);

---

🔹 6️⃣ DropdownMenuTheme (드롭다운 메뉴 테마)

✅ 설명

• DropdownMenu 의 전체적인 테마 스타일을 지정합니다.
• DropdownMenuThemeData 를 사용하여 디자인을 적용합니다.

✅ 사용 예제

DropdownMenuTheme(
  data: DropdownMenuThemeData(
    textStyle: TextStyle(fontSize: 18, color: Colors.blue),
  ),
  child: DropdownMenu(
    dropdownMenuEntries: [
      DropdownMenuEntry(value: "apple", label: "사과"),
      DropdownMenuEntry(value: "banana", label: "바나나"),
    ],
    onSelected: (value) {
      print("선택된 값: $value");
    },
  ),
);

---

🔹 7️⃣ DropdownMenuThemeData (드롭다운 메뉴 스타일)

✅ 설명

• DropdownMenuTheme에서 사용되는 스타일 데이터입니다.
• 글꼴, 배경색, 여백 등의 스타일을 지정할 수 있습니다.

✅ 사용 예제

DropdownMenuThemeData(
  textStyle: TextStyle(fontSize: 16, color: Colors.black),
  menuStyle: MenuStyle(
    backgroundColor: MaterialStateProperty.all(Colors.white),
  ),
);

---

📌 결론: 어떤 것을 선택해야 할까?

사용 목적	추천 위젯
기본 드롭다운 구현	DropdownButton
아이템 선택 후 자동 닫힘	DropdownButton
사용자 지정 UI 필요	DropdownMenu
스타일 테마 적용	DropdownMenuTheme
개별 항목 스타일 지정	DropdownMenuEntry

DropdownButton은 기본적인 드롭다운 버튼을 만들 때 적합하며,

DropdownMenu는 더 높은 커스터마이징이 필요할 때 유용합니다!