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(),
);
}
}