Skip to content

Implement custom screen padding and vertical padding for PopupMenuButton #143512

@fa-fifi

Description

@fa-fifi

Use case

Revisit the feature requested by @NidheeshMt inside issue #57110.

The issue was considered solved and closed, but somehow the PR #96657 made by @arafaysaleem got reverted back, and this feature got ignored for years. I am trying to create a Flutter app based on Carbon Design System, so the PopMenuButton widget should have zero vertical and screen padding to replicate the looks of Carbon Design's right panel UI.

As of now, the only way to solve this issue is by forking the Flutter repo and manually editing the _kMenuVerticalPadding and _kMenuScreenPadding values inside the popup_menu.dart, as described here. Obviously, this is not practical and difficult to maintain every time Flutter release a new version. It will be great if we can configure the paddings however we want without using the default ones.

Proposal

I would like to configure the vertical padding and the screen padding directly inside the PopupMenuButton widget like below:

PopupMenuButton(
    tooltip: 'More',
    iconSize: 20,
    constraints: const BoxConstraints(minWidth: 256),
    padding: EdgeInsets.zero,
    position: PopupMenuPosition.under,
    shape: const RoundedRectangleBorder(),
    verticalPadding: _verticalPadding,  // <-- Set my own custom vertical padding
    screenPadding: _screenPadding, // <-- Set my own custom screen padding
    itemBuilder: (context) => [...],
)

This is the final looks that I try to achieve. The popover menu item should always be aligned with the button despite its position inside the screen while the vertical padding inside the popover menu item is always zero.
Screenshot

This particularly requested feature have to be provided by Flutter directly since the problem to implement this feature is within the Flutter framework itself.

Metadata

Metadata

Assignees

Labels

P2Important issues not at the top of the work listc: new featureNothing broken; request for a new capabilityc: proposalA detailed proposal for a change to Flutterf: material designflutter/packages/flutter/material repository.frameworkflutter/packages/flutter repository. See also f: labels.r: fixedIssue is closed as already fixed in a newer versionteam-designOwned by Design Languages teamtriaged-designTriaged by Design Languages team

Type

No type

Projects

Status

Done (PR merged)

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions