popupMenuTheme static method
An opinionated PopupMenuThemeData with custom corner radius.
Corner radius
defaults to kPopupRadius
(10) and elevation
to
kPopupMenuElevation
(2), Flutter SDK default is (8).
When used by FlexColorScheme the corner radius of popup menus follows
the global FlexSubThemeData.defaultRadius
if defined, until and
including 10 dp. After which it stays at 10 dp. If you need a higher
corner radius on popup menus than 10 dp, with FlexColorScheme
you will have to explicitly override
FlexSubThemeData.popupMenuRadius
.
It will not look very good when it is over 10dp. The highlight inside the menu will start to overflow the corners and is not clipped along the border radius. The underlying Widget is not designed with this high border rounding in mind. This makes sense since it does not look good with too much rounding on a small menu.
The built-in behavior in FlexColorScheme allows it to match at low
inherited radius values from FlexSubThemeData.defaultRadius
but to
also stay below the usable max rounding automatically at higher global
border radius values.
The default corner radius in M3 is not yet known, it might be 12 like on Card, but with current behaviour on popup menu Overlay in Flutter using 12 was not on option, 10 was the highest value that still worked OK visually with regards to highlighted item not be clipped on top and bottom choice.
Implementation
static PopupMenuThemeData popupMenuTheme({
/// Popup menu corner radius.
///
/// Defaults to [kPopupRadius] 10.
final double? radius,
/// Popup menu elevation defaults to 3, making it more subtle.
final double elevation = kPopupMenuElevation,
/// The background color of the popup menu.
final Color? color,
}) =>
PopupMenuThemeData(
elevation: elevation,
color: color,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.all(
Radius.circular(radius ?? kPopupRadius),
),
),
);