Flutter DropdownButton 과 select

1️⃣ DropdownButton 과 select 의 연관성

• HTML에서 select 태그는 드롭다운 목록을 제공하는 요소입니다.
• Flutter에서 DropdownButton 은 이와 유사한 기능을 수행합니다.
• 두 요소 모두 사용자가 옵션 목록에서 값을 선택할 수 있도록 합니다.

📌 차이점

특징	HTML select	Flutter DropdownButton
기본 사용법	<select> <option> 태그 사용	DropdownButton 위젯 사용
UI 커스터마이징	제한적 (CSS 활용)	완전한 커스터마이징 가능
이벤트 처리	onchange 속성 사용	onChanged 콜백 함수 사용

---

2️⃣ DropdownButton 모든 요소 (속성 및 함수)

1. DropdownButton 생성자

DropdownButton<T>({
  super.key,
  required List<DropdownMenuItem<T>>? items,
  T? value,
  void Function(T?)? onChanged,
  Widget? hint,
  Widget? disabledHint,
  Color? dropdownColor,
  bool isExpanded = false,
  double? iconSize,
  Color? iconEnabledColor,
  Color? iconDisabledColor,
  bool isDense = false,
  double? itemHeight,
  AlignmentGeometry alignment = AlignmentDirectional.centerStart,
  bool autofocus = false,
  BorderRadius? borderRadius,
})

---

3️⃣ 속성 (Properties) 상세 설명

1) items (드롭다운 목록 아이템)

• 타입: List<DropdownMenuItem<T>>?
• 설명:
  • 드롭다운 리스트에 표시될 옵션 목록입니다.
  • 각 항목은 DropdownMenuItem<T> 위젯으로 생성해야 합니다.
• 예제:

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

2) value (현재 선택된 값)

• 타입: T?
• 설명:
  • 드롭다운 버튼에서 현재 선택된 값을 설정합니다.
  • items 목록 내 값 중 하나여야 합니다.
• 예제:

String selectedValue = "apple";

DropdownButton<String>(
  value: selectedValue,
  items: [
    DropdownMenuItem(value: "apple", child: Text("사과")),
    DropdownMenuItem(value: "banana", child: Text("바나나")),
  ],
  onChanged: (newValue) {
    selectedValue = newValue!;
  },
);

3) onChanged (값 변경 시 실행)

• 타입: void Function(T?)?
• 설명:
  • 사용자가 새로운 값을 선택하면 실행되는 콜백 함수입니다.
• 예제:

DropdownButton<String>(
  onChanged: (newValue) {
    print("새로운 선택: $newValue");
  },
);

4) hint (선택 전 표시할 힌트)

• 타입: Widget?
• 설명:
  • 아무것도 선택되지 않았을 때 표시할 힌트 위젯입니다.
• 예제:

DropdownButton<String>(
  hint: Text("과일을 선택하세요"),
);

5) disabledHint (비활성화 시 힌트)

• 타입: Widget?
• 설명:
  • onChanged가 null일 때 대신 표시할 힌트입니다.
• 예제:

DropdownButton<String>(
  disabledHint: Text("선택 불가능"),
  onChanged: null,
);

6) dropdownColor (드롭다운 배경색)

• 타입: Color?
• 설명:
  • 드롭다운 메뉴의 배경색을 변경합니다.
• 예제:

DropdownButton<String>(
  dropdownColor: Colors.blueAccent,
);

7) isExpanded (드롭다운 너비 확장)

• 타입: bool
• 설명:
  • true로 설정하면 버튼 너비가 부모 위젯에 맞춰 확장됩니다.
• 예제:

DropdownButton<String>(
  isExpanded: true,
);

8) iconSize (아이콘 크기)

• 타입: double?
• 설명:
  • 드롭다운 버튼의 화살표 아이콘 크기를 설정합니다.
• 예제:

DropdownButton<String>(
  iconSize: 30,
);

9) iconEnabledColor (활성화 아이콘 색상)

• 타입: Color?
• 설명:
  • 활성 상태일 때 드롭다운 아이콘의 색상을 지정합니다.
• 예제:

DropdownButton<String>(
  iconEnabledColor: Colors.green,
);

10) iconDisabledColor (비활성화 아이콘 색상)

• 타입: Color?
• 설명:
  • 비활성 상태일 때 드롭다운 아이콘의 색상을 지정합니다.
• 예제:

DropdownButton<String>(
  onChanged: null,
  iconDisabledColor: Colors.grey,
);

11) isDense (높이 조정)

• 타입: bool
• 설명:
  • true로 설정하면 버튼의 높이가 줄어듭니다.
• 예제:

DropdownButton<String>(
  isDense: true,
);

12) itemHeight (항목 높이)

• 타입: double?
• 설명:
  • 각 드롭다운 메뉴 항목의 높이를 조정합니다.
• 예제:

DropdownButton<String>(
  itemHeight: 50,
);

13) alignment (정렬)

• 타입: AlignmentGeometry
• 설명:
  • 버튼 내 텍스트 및 아이콘의 정렬을 설정합니다.
• 예제:

DropdownButton<String>(
  alignment: Alignment.centerRight,
);

14) autofocus (자동 포커스 여부)

• 타입: bool
• 설명:
  • true로 설정하면 화면이 열릴 때 드롭다운 버튼이 자동으로 포커스를 받습니다.
• 예제:

DropdownButton<String>(
  autofocus: true,
);

15) borderRadius (모서리 둥글기)

• 타입: BorderRadius?
• 설명:
  • 드롭다운 메뉴의 모서리를 둥글게 만들 수 있습니다.
• 예제:

DropdownButton<String>(
  borderRadius: BorderRadius.circular(10),
);

---

🔹 정리

• DropdownButton 은 HTML select 태그와 유사한 기능을 제공하지만, Flutter에서 더욱 강력한 커스터마이징이 가능합니다.
• 속성을 조합하여 다양한 스타일과 기능을 구현할 수 있습니다.