Skip to content

Conversation

@huycozy
Copy link
Member

@huycozy huycozy commented Jul 24, 2025

desktop web
  • Demo after the fix:
desktop web
  • Description: On desktop/web platforms, VisualDensity.compact is applied by default, which caused the issue as reported.
    Previously, this compressed menus vertically.

In this PR:

  • Vertical padding affected by visual density is removed to follow Material Design specs so that visual density should not affect vertical menu padding anymore. (*)
    - Some of test values (y coordinate/height) are also updated to align with this change and also add a regression test
    - Enhance MenuAnchor documentation to prevent user confusion.
(*) Material Design specs inspection from Figma
Screen.Recording.2025-08-05.at.14.23.49.mov

Pre-launch Checklist

If you need help, consider asking for advice on the #hackers-new channel on Discord.

@huycozy huycozy self-assigned this Jul 24, 2025
@github-actions github-actions bot added framework flutter/packages/flutter repository. See also f: labels. f: material design flutter/packages/flutter/material repository. labels Jul 24, 2025
@huycozy huycozy force-pushed the fix-menu_anchor_padding-171608 branch from 83149d2 to 4b64ab8 Compare July 24, 2025 11:29
@huycozy huycozy requested a review from gspencergoog July 25, 2025 04:08
@dkwingsmt dkwingsmt requested review from dkwingsmt and removed request for gspencergoog July 30, 2025 18:30
Copy link
Contributor

@dkwingsmt dkwingsmt left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Generally good. Can you specify more clearly in the PR body where the Material spec said it, for reference in the future?

@huycozy
Copy link
Member Author

huycozy commented Aug 5, 2025

Generally good. Can you specify more clearly in the PR body where the Material spec said it, for reference in the future?

Thank you for reviewing this. I mentioned it with a URL here already 😄, let me know if it's visible for reference later on.

Screenshot 2025-08-05 at 11 52 49

@dkwingsmt
Copy link
Contributor

dkwingsmt commented Aug 5, 2025

Yeah I clicked into it but it's just the general Figma file. I might not be familiar enough with Figma. Can you point me toward where it talked about the menu padding?

@huycozy
Copy link
Member Author

huycozy commented Aug 5, 2025

@dkwingsmt I've updated the PR description to include a video for Material Design specs inspection from Figma. I hope this makes it more visible now.

@huycozy huycozy force-pushed the fix-menu_anchor_padding-171608 branch 2 times, most recently from 0618984 to 1014622 Compare August 5, 2025 09:51
@huycozy huycozy requested a review from dkwingsmt August 6, 2025 02:53
Copy link
Contributor

@dkwingsmt dkwingsmt left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM with a nit, thank you!

@huycozy huycozy added the autosubmit Merge PR when tree becomes green via auto submit App label Aug 20, 2025
@auto-submit
Copy link
Contributor

auto-submit bot commented Aug 20, 2025

autosubmit label was removed for flutter/flutter/172691, because - The status or check suite ci.yaml validation has failed. Please fix the issues identified (or deflake) before re-applying this label.

@auto-submit auto-submit bot removed the autosubmit Merge PR when tree becomes green via auto submit App label Aug 20, 2025
@huycozy huycozy force-pushed the fix-menu_anchor_padding-171608 branch from 5061920 to 7362a54 Compare August 20, 2025 03:51
@huycozy huycozy added the autosubmit Merge PR when tree becomes green via auto submit App label Aug 20, 2025
@auto-submit auto-submit bot added this pull request to the merge queue Aug 20, 2025
Merged via the queue into flutter:master with commit 00d9b6f Aug 20, 2025
76 of 77 checks passed
@flutter-dashboard flutter-dashboard bot removed the autosubmit Merge PR when tree becomes green via auto submit App label Aug 20, 2025
@huycozy huycozy deleted the fix-menu_anchor_padding-171608 branch August 20, 2025 08:13
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Aug 20, 2025
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Aug 20, 2025
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Aug 20, 2025
auto-submit bot pushed a commit to flutter/packages that referenced this pull request Aug 20, 2025
…9862)

Manual roll Flutter from e65380a22076 to 960d1078f876 (36 revisions)

Manual roll requested by [email protected]

flutter/flutter@e65380a...960d107

2025-08-20 98614782+auto-submit[bot]@users.noreply.github.com Reverts "Reapply "Add set semantics enabled API and wire iOS a11y bridge (#161… (#171198)" (flutter/flutter#174153)
2025-08-20 [email protected] Make sure that a Badge doesn't crash in 0x0 environment (flutter/flutter#172065)
2025-08-20 [email protected] Make sure that CalendarDatePicker & YearPicker don't crash in 0x0 environment (flutter/flutter#173408)
2025-08-20 [email protected] Roll Packages from 953cae0 to 58c02e0 (2 revisions) (flutter/flutter#174142)
2025-08-20 [email protected] Make sure that a CircleAvatar doesn't crash in 0x0 environment (flutter/flutter#173498)
2025-08-20 [email protected] Roll Dart SDK from 0d674ff61e2e to 0d0a0c394381 (1 revision) (flutter/flutter#174126)
2025-08-20 [email protected] [Android] Fix version code override calculation in FlutterPlugin (flutter/flutter#174081)
2025-08-20 [email protected] Make sure that a BackButton doesn't crash in 0x0 environment (flutter/flutter#172817)
2025-08-20 [email protected] Roll Dart SDK from c5f5a32df36c to 0d674ff61e2e (1 revision) (flutter/flutter#174099)
2025-08-20 [email protected] feat: Added FocusNode prop for DropdownMenu Trailing Icon Button (flutter/flutter#172753)
2025-08-20 [email protected] Make component theme data defaults use `WidgetStateProperty` (flutter/flutter#173893)
2025-08-20 [email protected] Fix Menu anchor reduce padding on web and desktop (flutter/flutter#172691)
2025-08-20 [email protected] Roll Skia from 4b788d0e5e63 to 721e68fe652a (2 revisions) (flutter/flutter#174095)
2025-08-20 [email protected] Fix time picker period selector a11y touch targets (flutter/flutter#170060)
2025-08-20 [email protected] Fix SegmentedButton focus issue (flutter/flutter#173953)
2025-08-20 [email protected] Roll Dart SDK from e936404543f1 to c5f5a32df36c (1 revision) (flutter/flutter#174089)
2025-08-20 [email protected] Roll Skia from 953bfc0e2f2a to 4b788d0e5e63 (1 revision) (flutter/flutter#174086)
2025-08-19 [email protected] Roll Skia from 07d71ea4d056 to 953bfc0e2f2a (18 revisions) (flutter/flutter#174072)
2025-08-19 [email protected] Roll Dart SDK from 9105d946af95 to e936404543f1 (5 revisions) (flutter/flutter#174074)
2025-08-19 [email protected] NavigationRail correct traversal order (flutter/flutter#173891)
2025-08-19 [email protected] Update CupertinoSliverNavigationBar.middle (flutter/flutter#173868)
2025-08-19 [email protected] Update the AccessibilityPlugin::Announce method to account for the view (flutter/flutter#172669)
2025-08-19 [email protected] [ Widget Preview ] Report an error if a web device is unavailable (flutter/flutter#174036)
2025-08-19 [email protected] [web] Fix error in ClickDebouncer when using VoiceOver (flutter/flutter#174046)
2025-08-19 [email protected] [ Tool ] Add logging to test_adapter_test.dart (flutter/flutter#174073)
2025-08-19 [email protected] Roll Fuchsia Linux SDK from n0EnLlotF2wczlOq_... to V1A1J6uXZ62Q10i9u... (flutter/flutter#174059)
2025-08-19 [email protected] Cleanup legacy `bringup: true` tasks, either removing or enabling (flutter/flutter#173815)
2025-08-19 [email protected] Add Shift+Enter shortcut example for TextField. (flutter/flutter#167952)
2025-08-19 [email protected] Check that the windows architecture is 64-bit and not the process architecture (flutter/flutter#174019)
2025-08-19 [email protected] Improve Stack widget error message for bounded constraints (flutter/flutter#173352)
2025-08-19 [email protected] [VPAT][A11y] AutoComplete dropdown option is missing button role (flutter/flutter#173297)
2025-08-19 [email protected] fix: Android build fails when minSdk is set below 24 in build.gradle.kts (#173823) (flutter/flutter#173825)
2025-08-19 [email protected] Reapply "Add set semantics enabled API and wire iOS a11y bridge (#161… (flutter/flutter#171198)
2025-08-19 [email protected] fix: only use library props for libraries (flutter/flutter#172704)
2025-08-19 [email protected] Roll Packages from 5c52c55 to 953cae0 (22 revisions) (flutter/flutter#174040)
2025-08-19 [email protected] Add `open_jdk` to `Linux linux_android_emulator.debug_x64` (flutter/flutter#173989)

If this roll has caused a breakage, revert this CL and stop the roller
using the controls here:
https://autoroll.skia.org/r/flutter-packages
Please CC [email protected],[email protected] on the revert to ensure that a human
is aware of the problem.

To file a bug in Packages: https://github.com/flutter/flutter/issues/new/choose
...
SydneyBao pushed a commit to SydneyBao/flutter that referenced this pull request Aug 22, 2025
- Fix flutter#171608
- Demo before the fix:

| desktop | web |
| --------------- | --------------- |
<img width="400"
src="https://github.com/user-attachments/assets/1abd3962-14bb-497c-9bea-f0ff847e2dd6">
| <img width="400"
src="https://github.com/user-attachments/assets/783d96b4-b93f-4b26-8cc7-abdbcf362992">

- Demo after the fix:

| desktop | web |
| --------------- | --------------- |
<img width="400"
src="https://github.com/user-attachments/assets/8a7442b9-77e6-477e-afd9-82a304fadcba">
| <img width="400"
src="https://github.com/user-attachments/assets/029ccecf-3cf6-40b3-9233-7eb3d7a88eda">

- Description: On desktop/web platforms, VisualDensity.compact is
applied by default, which caused the issue as reported.
Previously, this compressed menus vertically. 

In this PR:
- Vertical padding affected by visual density is removed to follow
[Material Design
specs](https://www.figma.com/community/file/1035203688168086460) so that
visual density should not affect vertical menu padding anymore. (*)
- Some of test values (y coordinate/height) are also updated to align
with this change and also add a regression test
    - Enhance `MenuAnchor` documentation to prevent user confusion.

<details open>
<summary>(*) Material Design specs inspection from Figma</summary>


https://github.com/user-attachments/assets/3e348a51-3917-4217-ad66-ef8cdff256ba

</details>


## Pre-launch Checklist

- [x] I read the [Contributor Guide] and followed the process outlined
there for submitting PRs.
- [x] I read the [Tree Hygiene] wiki page, which explains my
responsibilities.
- [x] I read and followed the [Flutter Style Guide], including [Features
we expect every widget to implement].
- [x] I signed the [CLA].
- [x] I listed at least one issue that this PR fixes in the description
above.
- [x] I updated/added relevant documentation (doc comments with `///`).
- [x] I added new tests to check the change I am making, or this PR is
[test-exempt].
- [x] I followed the [breaking change policy] and added [Data Driven
Fixes] where supported.
- [x] All existing and new tests are passing.

If you need help, consider asking for advice on the #hackers-new channel
on [Discord].

<!-- Links -->
[Contributor Guide]:
https://github.com/flutter/flutter/blob/main/docs/contributing/Tree-hygiene.md#overview
[Tree Hygiene]:
https://github.com/flutter/flutter/blob/main/docs/contributing/Tree-hygiene.md
[test-exempt]:
https://github.com/flutter/flutter/blob/main/docs/contributing/Tree-hygiene.md#tests
[Flutter Style Guide]:
https://github.com/flutter/flutter/blob/main/docs/contributing/Style-guide-for-Flutter-repo.md
[Features we expect every widget to implement]:
https://github.com/flutter/flutter/blob/main/docs/contributing/Style-guide-for-Flutter-repo.md#features-we-expect-every-widget-to-implement
[CLA]: https://cla.developers.google.com/
[flutter/tests]: https://github.com/flutter/tests
[breaking change policy]:
https://github.com/flutter/flutter/blob/main/docs/contributing/Tree-hygiene.md#handling-breaking-changes
[Discord]:
https://github.com/flutter/flutter/blob/main/docs/contributing/Chat.md
[Data Driven Fixes]:
https://github.com/flutter/flutter/blob/main/docs/contributing/Data-driven-Fixes.md

---------

Signed-off-by: huycozy <[email protected]>
Co-authored-by: Tong Mu <[email protected]>
SydneyBao pushed a commit to SydneyBao/flutter that referenced this pull request Aug 22, 2025
- Fix flutter#171608
- Demo before the fix:

| desktop | web |
| --------------- | --------------- |
<img width="400"
src="https://github.com/user-attachments/assets/1abd3962-14bb-497c-9bea-f0ff847e2dd6">
| <img width="400"
src="https://github.com/user-attachments/assets/783d96b4-b93f-4b26-8cc7-abdbcf362992">

- Demo after the fix:

| desktop | web |
| --------------- | --------------- |
<img width="400"
src="https://github.com/user-attachments/assets/8a7442b9-77e6-477e-afd9-82a304fadcba">
| <img width="400"
src="https://github.com/user-attachments/assets/029ccecf-3cf6-40b3-9233-7eb3d7a88eda">

- Description: On desktop/web platforms, VisualDensity.compact is
applied by default, which caused the issue as reported.
Previously, this compressed menus vertically. 

In this PR:
- Vertical padding affected by visual density is removed to follow
[Material Design
specs](https://www.figma.com/community/file/1035203688168086460) so that
visual density should not affect vertical menu padding anymore. (*)
- Some of test values (y coordinate/height) are also updated to align
with this change and also add a regression test
    - Enhance `MenuAnchor` documentation to prevent user confusion.

<details open>
<summary>(*) Material Design specs inspection from Figma</summary>


https://github.com/user-attachments/assets/3e348a51-3917-4217-ad66-ef8cdff256ba

</details>


## Pre-launch Checklist

- [x] I read the [Contributor Guide] and followed the process outlined
there for submitting PRs.
- [x] I read the [Tree Hygiene] wiki page, which explains my
responsibilities.
- [x] I read and followed the [Flutter Style Guide], including [Features
we expect every widget to implement].
- [x] I signed the [CLA].
- [x] I listed at least one issue that this PR fixes in the description
above.
- [x] I updated/added relevant documentation (doc comments with `///`).
- [x] I added new tests to check the change I am making, or this PR is
[test-exempt].
- [x] I followed the [breaking change policy] and added [Data Driven
Fixes] where supported.
- [x] All existing and new tests are passing.

If you need help, consider asking for advice on the #hackers-new channel
on [Discord].

<!-- Links -->
[Contributor Guide]:
https://github.com/flutter/flutter/blob/main/docs/contributing/Tree-hygiene.md#overview
[Tree Hygiene]:
https://github.com/flutter/flutter/blob/main/docs/contributing/Tree-hygiene.md
[test-exempt]:
https://github.com/flutter/flutter/blob/main/docs/contributing/Tree-hygiene.md#tests
[Flutter Style Guide]:
https://github.com/flutter/flutter/blob/main/docs/contributing/Style-guide-for-Flutter-repo.md
[Features we expect every widget to implement]:
https://github.com/flutter/flutter/blob/main/docs/contributing/Style-guide-for-Flutter-repo.md#features-we-expect-every-widget-to-implement
[CLA]: https://cla.developers.google.com/
[flutter/tests]: https://github.com/flutter/tests
[breaking change policy]:
https://github.com/flutter/flutter/blob/main/docs/contributing/Tree-hygiene.md#handling-breaking-changes
[Discord]:
https://github.com/flutter/flutter/blob/main/docs/contributing/Chat.md
[Data Driven Fixes]:
https://github.com/flutter/flutter/blob/main/docs/contributing/Data-driven-Fixes.md

---------

Signed-off-by: huycozy <[email protected]>
Co-authored-by: Tong Mu <[email protected]>
mboetger pushed a commit to mboetger/flutter that referenced this pull request Sep 18, 2025
- Fix flutter#171608
- Demo before the fix:

| desktop | web |
| --------------- | --------------- |
<img width="400"
src="https://github.com/user-attachments/assets/1abd3962-14bb-497c-9bea-f0ff847e2dd6">
| <img width="400"
src="https://github.com/user-attachments/assets/783d96b4-b93f-4b26-8cc7-abdbcf362992">

- Demo after the fix:

| desktop | web |
| --------------- | --------------- |
<img width="400"
src="https://github.com/user-attachments/assets/8a7442b9-77e6-477e-afd9-82a304fadcba">
| <img width="400"
src="https://github.com/user-attachments/assets/029ccecf-3cf6-40b3-9233-7eb3d7a88eda">

- Description: On desktop/web platforms, VisualDensity.compact is
applied by default, which caused the issue as reported.
Previously, this compressed menus vertically. 

In this PR:
- Vertical padding affected by visual density is removed to follow
[Material Design
specs](https://www.figma.com/community/file/1035203688168086460) so that
visual density should not affect vertical menu padding anymore. (*)
- Some of test values (y coordinate/height) are also updated to align
with this change and also add a regression test
    - Enhance `MenuAnchor` documentation to prevent user confusion.

<details open>
<summary>(*) Material Design specs inspection from Figma</summary>


https://github.com/user-attachments/assets/3e348a51-3917-4217-ad66-ef8cdff256ba

</details>


## Pre-launch Checklist

- [x] I read the [Contributor Guide] and followed the process outlined
there for submitting PRs.
- [x] I read the [Tree Hygiene] wiki page, which explains my
responsibilities.
- [x] I read and followed the [Flutter Style Guide], including [Features
we expect every widget to implement].
- [x] I signed the [CLA].
- [x] I listed at least one issue that this PR fixes in the description
above.
- [x] I updated/added relevant documentation (doc comments with `///`).
- [x] I added new tests to check the change I am making, or this PR is
[test-exempt].
- [x] I followed the [breaking change policy] and added [Data Driven
Fixes] where supported.
- [x] All existing and new tests are passing.

If you need help, consider asking for advice on the #hackers-new channel
on [Discord].

<!-- Links -->
[Contributor Guide]:
https://github.com/flutter/flutter/blob/main/docs/contributing/Tree-hygiene.md#overview
[Tree Hygiene]:
https://github.com/flutter/flutter/blob/main/docs/contributing/Tree-hygiene.md
[test-exempt]:
https://github.com/flutter/flutter/blob/main/docs/contributing/Tree-hygiene.md#tests
[Flutter Style Guide]:
https://github.com/flutter/flutter/blob/main/docs/contributing/Style-guide-for-Flutter-repo.md
[Features we expect every widget to implement]:
https://github.com/flutter/flutter/blob/main/docs/contributing/Style-guide-for-Flutter-repo.md#features-we-expect-every-widget-to-implement
[CLA]: https://cla.developers.google.com/
[flutter/tests]: https://github.com/flutter/tests
[breaking change policy]:
https://github.com/flutter/flutter/blob/main/docs/contributing/Tree-hygiene.md#handling-breaking-changes
[Discord]:
https://github.com/flutter/flutter/blob/main/docs/contributing/Chat.md
[Data Driven Fixes]:
https://github.com/flutter/flutter/blob/main/docs/contributing/Data-driven-Fixes.md

---------

Signed-off-by: huycozy <[email protected]>
Co-authored-by: Tong Mu <[email protected]>
korca0220 pushed a commit to korca0220/flutter that referenced this pull request Sep 22, 2025
- Fix flutter#171608
- Demo before the fix:

| desktop | web |
| --------------- | --------------- |
<img width="400"
src="https://github.com/user-attachments/assets/1abd3962-14bb-497c-9bea-f0ff847e2dd6">
| <img width="400"
src="https://github.com/user-attachments/assets/783d96b4-b93f-4b26-8cc7-abdbcf362992">

- Demo after the fix:

| desktop | web |
| --------------- | --------------- |
<img width="400"
src="https://github.com/user-attachments/assets/8a7442b9-77e6-477e-afd9-82a304fadcba">
| <img width="400"
src="https://github.com/user-attachments/assets/029ccecf-3cf6-40b3-9233-7eb3d7a88eda">

- Description: On desktop/web platforms, VisualDensity.compact is
applied by default, which caused the issue as reported.
Previously, this compressed menus vertically. 

In this PR:
- Vertical padding affected by visual density is removed to follow
[Material Design
specs](https://www.figma.com/community/file/1035203688168086460) so that
visual density should not affect vertical menu padding anymore. (*)
- Some of test values (y coordinate/height) are also updated to align
with this change and also add a regression test
    - Enhance `MenuAnchor` documentation to prevent user confusion.

<details open>
<summary>(*) Material Design specs inspection from Figma</summary>


https://github.com/user-attachments/assets/3e348a51-3917-4217-ad66-ef8cdff256ba

</details>


## Pre-launch Checklist

- [x] I read the [Contributor Guide] and followed the process outlined
there for submitting PRs.
- [x] I read the [Tree Hygiene] wiki page, which explains my
responsibilities.
- [x] I read and followed the [Flutter Style Guide], including [Features
we expect every widget to implement].
- [x] I signed the [CLA].
- [x] I listed at least one issue that this PR fixes in the description
above.
- [x] I updated/added relevant documentation (doc comments with `///`).
- [x] I added new tests to check the change I am making, or this PR is
[test-exempt].
- [x] I followed the [breaking change policy] and added [Data Driven
Fixes] where supported.
- [x] All existing and new tests are passing.

If you need help, consider asking for advice on the #hackers-new channel
on [Discord].

<!-- Links -->
[Contributor Guide]:
https://github.com/flutter/flutter/blob/main/docs/contributing/Tree-hygiene.md#overview
[Tree Hygiene]:
https://github.com/flutter/flutter/blob/main/docs/contributing/Tree-hygiene.md
[test-exempt]:
https://github.com/flutter/flutter/blob/main/docs/contributing/Tree-hygiene.md#tests
[Flutter Style Guide]:
https://github.com/flutter/flutter/blob/main/docs/contributing/Style-guide-for-Flutter-repo.md
[Features we expect every widget to implement]:
https://github.com/flutter/flutter/blob/main/docs/contributing/Style-guide-for-Flutter-repo.md#features-we-expect-every-widget-to-implement
[CLA]: https://cla.developers.google.com/
[flutter/tests]: https://github.com/flutter/tests
[breaking change policy]:
https://github.com/flutter/flutter/blob/main/docs/contributing/Tree-hygiene.md#handling-breaking-changes
[Discord]:
https://github.com/flutter/flutter/blob/main/docs/contributing/Chat.md
[Data Driven Fixes]:
https://github.com/flutter/flutter/blob/main/docs/contributing/Data-driven-Fixes.md

---------

Signed-off-by: huycozy <[email protected]>
Co-authored-by: Tong Mu <[email protected]>
Jaineel-Mamtora pushed a commit to Jaineel-Mamtora/flutter_forked that referenced this pull request Sep 24, 2025
- Fix flutter#171608
- Demo before the fix:

| desktop | web |
| --------------- | --------------- |
<img width="400"
src="https://github.com/user-attachments/assets/1abd3962-14bb-497c-9bea-f0ff847e2dd6">
| <img width="400"
src="https://github.com/user-attachments/assets/783d96b4-b93f-4b26-8cc7-abdbcf362992">

- Demo after the fix:

| desktop | web |
| --------------- | --------------- |
<img width="400"
src="https://github.com/user-attachments/assets/8a7442b9-77e6-477e-afd9-82a304fadcba">
| <img width="400"
src="https://github.com/user-attachments/assets/029ccecf-3cf6-40b3-9233-7eb3d7a88eda">

- Description: On desktop/web platforms, VisualDensity.compact is
applied by default, which caused the issue as reported.
Previously, this compressed menus vertically. 

In this PR:
- Vertical padding affected by visual density is removed to follow
[Material Design
specs](https://www.figma.com/community/file/1035203688168086460) so that
visual density should not affect vertical menu padding anymore. (*)
- Some of test values (y coordinate/height) are also updated to align
with this change and also add a regression test
    - Enhance `MenuAnchor` documentation to prevent user confusion.

<details open>
<summary>(*) Material Design specs inspection from Figma</summary>


https://github.com/user-attachments/assets/3e348a51-3917-4217-ad66-ef8cdff256ba

</details>


## Pre-launch Checklist

- [x] I read the [Contributor Guide] and followed the process outlined
there for submitting PRs.
- [x] I read the [Tree Hygiene] wiki page, which explains my
responsibilities.
- [x] I read and followed the [Flutter Style Guide], including [Features
we expect every widget to implement].
- [x] I signed the [CLA].
- [x] I listed at least one issue that this PR fixes in the description
above.
- [x] I updated/added relevant documentation (doc comments with `///`).
- [x] I added new tests to check the change I am making, or this PR is
[test-exempt].
- [x] I followed the [breaking change policy] and added [Data Driven
Fixes] where supported.
- [x] All existing and new tests are passing.

If you need help, consider asking for advice on the #hackers-new channel
on [Discord].

<!-- Links -->
[Contributor Guide]:
https://github.com/flutter/flutter/blob/main/docs/contributing/Tree-hygiene.md#overview
[Tree Hygiene]:
https://github.com/flutter/flutter/blob/main/docs/contributing/Tree-hygiene.md
[test-exempt]:
https://github.com/flutter/flutter/blob/main/docs/contributing/Tree-hygiene.md#tests
[Flutter Style Guide]:
https://github.com/flutter/flutter/blob/main/docs/contributing/Style-guide-for-Flutter-repo.md
[Features we expect every widget to implement]:
https://github.com/flutter/flutter/blob/main/docs/contributing/Style-guide-for-Flutter-repo.md#features-we-expect-every-widget-to-implement
[CLA]: https://cla.developers.google.com/
[flutter/tests]: https://github.com/flutter/tests
[breaking change policy]:
https://github.com/flutter/flutter/blob/main/docs/contributing/Tree-hygiene.md#handling-breaking-changes
[Discord]:
https://github.com/flutter/flutter/blob/main/docs/contributing/Chat.md
[Data Driven Fixes]:
https://github.com/flutter/flutter/blob/main/docs/contributing/Data-driven-Fixes.md

---------

Signed-off-by: huycozy <[email protected]>
Co-authored-by: Tong Mu <[email protected]>
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Nov 12, 2025
lucaantonelli pushed a commit to lucaantonelli/flutter that referenced this pull request Nov 21, 2025
- Fix flutter#171608
- Demo before the fix:

| desktop | web |
| --------------- | --------------- |
<img width="400"
src="https://github.com/user-attachments/assets/1abd3962-14bb-497c-9bea-f0ff847e2dd6">
| <img width="400"
src="https://github.com/user-attachments/assets/783d96b4-b93f-4b26-8cc7-abdbcf362992">

- Demo after the fix:

| desktop | web |
| --------------- | --------------- |
<img width="400"
src="https://github.com/user-attachments/assets/8a7442b9-77e6-477e-afd9-82a304fadcba">
| <img width="400"
src="https://github.com/user-attachments/assets/029ccecf-3cf6-40b3-9233-7eb3d7a88eda">

- Description: On desktop/web platforms, VisualDensity.compact is
applied by default, which caused the issue as reported.
Previously, this compressed menus vertically. 

In this PR:
- Vertical padding affected by visual density is removed to follow
[Material Design
specs](https://www.figma.com/community/file/1035203688168086460) so that
visual density should not affect vertical menu padding anymore. (*)
- Some of test values (y coordinate/height) are also updated to align
with this change and also add a regression test
    - Enhance `MenuAnchor` documentation to prevent user confusion.

<details open>
<summary>(*) Material Design specs inspection from Figma</summary>


https://github.com/user-attachments/assets/3e348a51-3917-4217-ad66-ef8cdff256ba

</details>


## Pre-launch Checklist

- [x] I read the [Contributor Guide] and followed the process outlined
there for submitting PRs.
- [x] I read the [Tree Hygiene] wiki page, which explains my
responsibilities.
- [x] I read and followed the [Flutter Style Guide], including [Features
we expect every widget to implement].
- [x] I signed the [CLA].
- [x] I listed at least one issue that this PR fixes in the description
above.
- [x] I updated/added relevant documentation (doc comments with `///`).
- [x] I added new tests to check the change I am making, or this PR is
[test-exempt].
- [x] I followed the [breaking change policy] and added [Data Driven
Fixes] where supported.
- [x] All existing and new tests are passing.

If you need help, consider asking for advice on the #hackers-new channel
on [Discord].

<!-- Links -->
[Contributor Guide]:
https://github.com/flutter/flutter/blob/main/docs/contributing/Tree-hygiene.md#overview
[Tree Hygiene]:
https://github.com/flutter/flutter/blob/main/docs/contributing/Tree-hygiene.md
[test-exempt]:
https://github.com/flutter/flutter/blob/main/docs/contributing/Tree-hygiene.md#tests
[Flutter Style Guide]:
https://github.com/flutter/flutter/blob/main/docs/contributing/Style-guide-for-Flutter-repo.md
[Features we expect every widget to implement]:
https://github.com/flutter/flutter/blob/main/docs/contributing/Style-guide-for-Flutter-repo.md#features-we-expect-every-widget-to-implement
[CLA]: https://cla.developers.google.com/
[flutter/tests]: https://github.com/flutter/tests
[breaking change policy]:
https://github.com/flutter/flutter/blob/main/docs/contributing/Tree-hygiene.md#handling-breaking-changes
[Discord]:
https://github.com/flutter/flutter/blob/main/docs/contributing/Chat.md
[Data Driven Fixes]:
https://github.com/flutter/flutter/blob/main/docs/contributing/Data-driven-Fixes.md

---------

Signed-off-by: huycozy <[email protected]>
Co-authored-by: Tong Mu <[email protected]>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

f: material design flutter/packages/flutter/material repository. framework flutter/packages/flutter repository. See also f: labels.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Menu anchor reduce padding on web devices

2 participants