I’m trying to display a custom menu that overlays directly on top of a DropdownMenu in Flutter, but the menu is not appearing in the desired position. What’s the best approach to achieve this overlay effect and position the custom menu exactly on top of the DropdownMenu?
I’ve tried using the alignment property of the MenuStyle, but it doesn’t seem to work as expected.
2
Do you have more information on how to your coding and customize it? I might be able to help you. It is my coding used by DropdownMenu
enum ColorLabel {
blue('Blue', Colors.blue),
pink('Pink', Colors.pink),
green('Green', Colors.green),
orange('Orange', Colors.orange),
grey('Grey', Colors.grey);
const ColorLabel(this.label, this.color);
final String label;
final Color color;
}
ColorLabel? selectedColor;
@Widget
DropdownMenu<ColorLabel>(
initialSelection: ColorLabel.green,
controller: colorController,
requestFocusOnTap: true,
label: const Text('Color'),
onSelected: (ColorLabel? color) {
setState(() {
selectedColor = color;
});
},
dropdownMenuEntries: ColorLabel.values
.map<DropdownMenuEntry<ColorLabel>>(
(ColorLabel color) {
return DropdownMenuEntry<ColorLabel>(
value: color,
label: color.label,
enabled: color.label != 'Grey',
style: MenuItemButton.styleFrom(
foregroundColor: color.color,
),
);
}).toList(),
),
and result is
If your want to more information about DropdownMenu. I recommented this document document for DropdownMenu
I hope I can help you!
1