I'm building a dropdown in Flutter. I started using DropdownMenu because DropdownButton styling didn't worked as desired.
This is thhe Dropdown so far, but have some concerns:
- When tapping the trailing icon, it shows a highlight:
- I read a lot of github posts but didn't found anything related to disabling that feature. Reading dropdown_menu.dart I found that it is a IconButton, but it doesn't give any way to change that atrt
final Widget trailingButton = Padding(
padding: const EdgeInsets.all(4.0),
child: IconButton(
isSelected: controller.isOpen,
icon: widget.trailingIcon ?? const Icon(Icons.arrow_drop_down),
selectedIcon: widget.selectedTrailingIcon ?? const Icon(Icons.arrow_drop_up),
onPressed: () {
handlePressed(controller);
},
),
);
This is my dropdown widget code:
import 'package:flutter/material.dart';
import 'package:k/style/app_color_schemes.dart';
class PrivacyDropdownBtn extends StatefulWidget {
const PrivacyDropdownBtn({super.key});
@override
State<PrivacyDropdownBtn> createState() => _PrivacyDropdownBtnState();
}
class _PrivacyDropdownBtnState extends State<PrivacyDropdownBtn> {
static const List<String> optionsList = <String>[
'Anyone',
'Option 1',
'Option 2',
];
String dropdownValue = optionsList.first;
@override
Widget build(BuildContext context) {
Color color = Brightness.light == Theme.of(context).brightness
? LightColorScheme.surfaceContainer
: Colors.black;
return DropdownMenu<String>(
initialSelection: dropdownValue,
width: 120,
textStyle: TextStyle(fontSize: 12),
menuStyle: MenuStyle(
backgroundColor: MaterialStateProperty.all<Color>(color),
elevation: MaterialStateProperty.all<double>(0),
shape: MaterialStateProperty.all<RoundedRectangleBorder>(
const RoundedRectangleBorder(
borderRadius: BorderRadius.vertical(
bottom: Radius.circular(10)),
),
),
),
inputDecorationTheme: InputDecorationTheme(
isDense: true,
filled: true,
fillColor: color,
contentPadding:
const EdgeInsets.symmetric(vertical: 10.0, horizontal: 10.0),
constraints: BoxConstraints.tight(const Size.fromHeight(40)),
border: const OutlineInputBorder(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(10.0),
topRight: Radius.circular(10.0),
),
borderSide: BorderSide.none,
)),
onSelected: (String? newValue) {
setState(() {
dropdownValue = newValue!;
});
},
dropdownMenuEntries:
optionsList.map<DropdownMenuEntry<String>>((String value) {
return DropdownMenuEntry<String>(
value: value,
label: value,
style: ButtonStyle(
overlayColor: MaterialStateProperty.all(Colors.transparent),
padding: MaterialStateProperty.all<EdgeInsetsGeometry>(
const EdgeInsets.symmetric(horizontal: 10)),
backgroundColor: MaterialStateProperty.all<Color>(color),
textStyle: MaterialStateProperty.all<TextStyle>(
TextStyle(color: color, fontSize: 12)),
),
);
}).toList(),
);
}
}
Thank you for any help!
PD: If anyone knows how to change the size of the DropdownMenyEntry items or removing the next lines of the dropdown I'll appreciate it!