popupMenuTheme static method

PopupMenuThemeData popupMenuTheme({
  1. double? radius,
  2. double elevation = kPopupMenuElevation,
  3. Color? color,
})

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),
        ),
      ),
    );