I’m using DropdownMenu in my Flutter app.
DropdownMenu<CurrencyPair>(
width: 300,
initialSelection: CurrencyPair.getById(store.currencyId),
controller: TextEditingController(),
// requestFocusOnTap is enabled/disabled by platforms when it is null.
// On mobile platforms, this is false by default. Setting this to true will
// trigger focus request on the text field and virtual keyboard will appear
// afterward. On desktop platforms however, this defaults to true.
requestFocusOnTap: false,
onSelected: (CurrencyPair? currency) {
store.currencyId = currency?.id ?? 0;
store.setCurrencyIdByDefault(store.currencyId);
},
label: const Text('Currency pair'),
dropdownMenuEntries: CurrencyPair.values
.map<DropdownMenuEntry<CurrencyPair>>(
(CurrencyPair currency) {
return DropdownMenuEntry<CurrencyPair>(
value: currency,
label: currency.name,
style: MenuItemButton.styleFrom(
foregroundColor: const Color.fromARGB(255, 3, 1, 75).withOpacity(0.7),
),
);
}).toList(),
),
As you could see, I can customize dropdownMenuEntries, but how can I customize text of Dropdown menu?
For example I want Colors.white value
>Solution :
To change the color of the selected value in the DropdownMenu field in Flutter, you’ll need to customize the TextStyle of the dropdown field itself. This can be achieved by wrapping the DropdownMenu inside a Theme widget and specifying the DropdownMenuThemeData with the desired TextStyle.
Theme(
data: Theme.of(context).copyWith(
dropdownMenuTheme: DropdownMenuThemeData(
textStyle: TextStyle(
// Set the desired text color for the selected value
color: const Color(0xFF03014B),
fontSize: 16, // You can adjust the font size if needed
),
),
),
child: DropdownMenu<CurrencyPair>(
width: 300,
initialSelection: CurrencyPair.getById(store.currencyId),
controller: TextEditingController(),
requestFocusOnTap: false,
onSelected: (CurrencyPair? currency) {
store.currencyId = currency?.id ?? 0;
store.setCurrencyIdByDefault(store.currencyId);
},
label: const Text('Currency pair'),
dropdownMenuEntries: CurrencyPair.values.map<DropdownMenuEntry<CurrencyPair>>(
(CurrencyPair currency) {
return DropdownMenuEntry<CurrencyPair>(
value: currency,
label: currency.name,
style: MenuItemButton.styleFrom(
foregroundColor: const Color(0xFF03014B).withOpacity(0.7),
),
);
},
).toList(),
),
),
