Reputation: 46
I want to change the selected DropDownMenuItem's backgroundColor and colors such as hove color, splash color, highlight color of these menu items.
I'am developing it in the flutter web.
I've tried Wrapping ButtonTheme to the DropdownButtonFormField and given colors to all possible color properties no changes.
I also tried the Theme no changes.
Here is the final code
ButtonTheme(
alignedDropdown: true,
child: Theme(
data: Theme.of(context).copyWith(
dropdownMenuTheme: const DropdownMenuThemeData(
menuStyle: MenuStyle(
surfaceTintColor: WidgetStatePropertyAll(Colors.yellow),
backgroundColor: WidgetStatePropertyAll(Colors.blue),
shadowColor: WidgetStatePropertyAll(Colors.red),
))),
child: DropdownButtonFormField(
borderRadius: BorderRadius.circular(16),
decoration: InputDecoration(
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(16),
borderSide: BorderSide.none,
),
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(16),
borderSide: BorderSide.none,
),
hintText: "Select export option",
hintStyle: context.typography.body.copyWith(
color: context.colors.onSurfaceVariant,
),
fillColor: context.colors.surfaceContainer,
filled: true,
focusColor: context.colors.onPrimary,
hoverColor: context.colors.onPrimary,
),
dropdownColor: context.colors.surfaceContainer,
value: null,
style: context.typography.body.copyWith(
color: context.colors.onSurface,
),
items: const [
DropdownMenuItem(
value: "option",
child: Text("Select export option"),
),
DropdownMenuItem(
value: "qr",
child: Text("Export only QR codes"),
),
DropdownMenuItem(
value: "excel",
child: Text("Export products list"),
),
],
onChanged: (value) {},
),
),
),
OutPut
I want to change the selected color, hover color, splash color and highlight color
Upvotes: 1
Views: 78