HOME
NOTE

[Flutter] DropdownMenu 커스텀하기

CREATED
2025. 3. 20. 오전 1:00:20
UPDATED
2025. 3. 20. 오전 8:02:27
TAGS
#Flutter

Flutter의 기본 위젯들은 대부분 기본 스타일이 덕지덕지 붙어있기 때문에 커스텀을 피할 수 없다. 대략 아래처럼 DropdownMenu을 커스텀할 수 있다.

class Menu {
  final int index;
  final String name;

  const Menu({
    required this.index,
    required this.name,
  });
}

class Dropdown extends StatelessWidget {
  final int? initialIndex;
  final List<Menu> menus;
  final void Function(int value) onSelected;

  const Dropdown({
    super.key,
    required this.menus,
    required this.onSelected,
    this.initialIndex,
  });

  @override
  Widget build(BuildContext context) {
    return DropdownMenu<Menu>(
      initialSelection: initialIndex ?? menus.first,
      trailingIcon: MyIcons.arrow_down(
        size: 14,
        color: MyColors.gray8,
      ), // 화살표 아이콘
      selectedTrailingIcon: MyIcons.arrow_up(
        size: 14,
        color: MyColors.gray8,
      ), // 메뉴 열렸을 때 나오는 화살표 아이콘
      textStyle: MyTextStyles.body2.copyWith(
        color: MyColors.gray8,
      ), // input 영역 텍스트 스타일
      menuStyle: MenuStyle(
        backgroundColor: WidgetStatePropertyAll<Color>(MyColors.black),
      ), // menu 영역 스타일
      inputDecorationTheme: InputDecorationTheme(
        suffixIconColor: MyColors.scoreRed,
        enabledBorder: OutlineInputBorder(
          borderRadius: BorderRadius.circular(8),
          borderSide: BorderSide(
            color: MyColors.gray5,
            width: 1,
          ),
        ),
      ), // input 영역 스타일
      onSelected: (Menu? menu) {
        onSelected(menu!.index);
      },
      dropdownMenuEntries: menus.map<DropdownMenuEntry<Menu>>((Menu menu) {
        return DropdownMenuEntry<Menu>(
          value: menu,
          label: menu.name,
        );
      }).toList(),
    );
  }
}

참고