Fix Menu anchor reduce padding on web and desktop (flutter#172691)

- 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]>

Author: huycozy

packages/flutter/lib/src/material/menu_anchor.dart

@@ -148,6 +148,9 @@ class _MenuAnchorScope extends InheritedWidget {
 ///
 /// ** See code in examples/api/lib/material/menu_anchor/menu_anchor.3.dart **
 /// {@end-tool}
+///
+/// The [MenuStyle.visualDensity] setting only affects horizontal padding,
+/// and it will never make it negative. Vertical padding is not affected at all.
 class MenuAnchor extends StatefulWidget {
   /// Creates a const [MenuAnchor].
   ///
@@ -3173,11 +3176,11 @@ class _MenuPanelState extends State<_MenuPanel> {
     // Per the Material Design team: don't allow the VisualDensity
     // adjustment to reduce the width of the left/right padding. If we
     // did, VisualDensity.compact, the default for desktop/web, would
-    // reduce the horizontal padding to zero.
-    final double dy = densityAdjustment.dy;
+    // reduce the horizontal padding to zero. Vertical padding
+    // is not affected at all.
     final double dx = math.max(0, densityAdjustment.dx);
     final EdgeInsetsGeometry resolvedPadding = padding
-        .add(EdgeInsets.symmetric(horizontal: dx, vertical: dy))
+        .add(EdgeInsets.symmetric(horizontal: dx))
         .clamp(EdgeInsets.zero, EdgeInsetsGeometry.infinity);
 
     BoxConstraints effectiveConstraints = visualDensity.effectiveConstraints(
@@ -3333,16 +3336,15 @@ class _Submenu extends StatelessWidget {
     // adjustment to reduce the width of the left/right padding. If we
     // did, VisualDensity.compact, the default for desktop/web, would
     // reduce the horizontal padding to zero.
-    final double dy = densityAdjustment.dy;
     final double dx = math.max(0, densityAdjustment.dx);
     final EdgeInsetsGeometry resolvedPadding = padding
-        .add(EdgeInsets.fromLTRB(dx, dy, dx, dy))
+        .add(EdgeInsets.fromLTRB(dx, 0, dx, 0))
         .clamp(EdgeInsets.zero, EdgeInsetsGeometry.infinity);
 
     final Rect anchorRect = layerLink == null
         ? Rect.fromLTRB(
             menuPosition.anchorRect.left + dx,
-            menuPosition.anchorRect.top - dy,
+            menuPosition.anchorRect.top,
             menuPosition.anchorRect.right,
             menuPosition.anchorRect.bottom,
           )

packages/flutter/test/material/menu_anchor_test.dart

@@ -271,15 +271,15 @@ void main() {
     );
     expect(
       tester.getRect(find.widgetWithText(MenuItemButton, TestMenu.subMenu10.label)),
-      equals(const Rect.fromLTRB(265.0, 40.0, 467.0, 80.0)),
+      equals(const Rect.fromLTRB(265.0, 48.0, 467.0, 88.0)),
     );
     expect(
       tester.getRect(
         find
             .ancestor(of: find.text(TestMenu.subMenu10.label), matching: find.byType(Material))
             .at(1),
       ),
-      equals(const Rect.fromLTRB(265.0, 40.0, 467.0, 160.0)),
+      equals(const Rect.fromLTRB(265.0, 40.0, 467.0, 176.0)),
     );
 
     await tester.pumpWidget(Container());
@@ -295,7 +295,7 @@ void main() {
     // 590 = 695 - 105
     expect(
       tester.getRect(find.byType(MenuBar)),
-      equals(const Rect.fromLTRB(105.0, 0.0, 695.0, 72.0)),
+      equals(const Rect.fromLTRB(105.0, 0.0, 695.0, 56.0)),
     );
 
     // Open and make sure things are the right size.
@@ -304,23 +304,19 @@ void main() {
 
     expect(
       tester.getRect(find.byType(MenuBar)),
-      equals(const Rect.fromLTRB(105.0, 0.0, 695.0, 72.0)),
-    );
-    expect(
-      tester.getRect(find.byType(MenuBar)),
-      equals(const Rect.fromLTRB(105.0, 0.0, 695.0, 72.0)),
+      equals(const Rect.fromLTRB(105.0, 0.0, 695.0, 56.0)),
     );
     expect(
       tester.getRect(find.widgetWithText(MenuItemButton, TestMenu.subMenu10.label)),
-      equals(const Rect.fromLTRB(257.0, 80.0, 491.0, 136.0)),
+      equals(const Rect.fromLTRB(257.0, 64.0, 491.0, 120.0)),
     );
     expect(
       tester.getRect(
         find
             .ancestor(of: find.text(TestMenu.subMenu10.label), matching: find.byType(Material))
             .at(1),
       ),
-      equals(const Rect.fromLTRB(249.0, 64.0, 499.0, 264.0)),
+      equals(const Rect.fromLTRB(249.0, 56.0, 499.0, 240.0)),
     );
   });
 
@@ -3803,8 +3799,8 @@ void main() {
         collectSubmenuRects(),
         equals(const <Rect>[
           Rect.fromLTRB(161.0, 0.0, 639.0, 40.0),
-          Rect.fromLTRB(265.0, 40.0, 467.0, 160.0),
-          Rect.fromLTRB(467.0, 80.0, 707.0, 240.0),
+          Rect.fromLTRB(265.0, 40.0, 467.0, 176.0),
+          Rect.fromLTRB(467.0, 80.0, 707.0, 256.0),
         ]),
       );
     });
@@ -3819,8 +3815,8 @@ void main() {
         collectSubmenuRects(),
         equals(const <Rect>[
           Rect.fromLTRB(161.0, 0.0, 639.0, 40.0),
-          Rect.fromLTRB(333.0, 40.0, 535.0, 160.0),
-          Rect.fromLTRB(93.0, 80.0, 333.0, 240.0),
+          Rect.fromLTRB(333.0, 40.0, 535.0, 176.0),
+          Rect.fromLTRB(93.0, 80.0, 333.0, 256.0),
         ]),
       );
     });
@@ -3943,6 +3939,103 @@ void main() {
       },
     );
 
+    // Regression test for https://github.com/flutter/flutter/issues/171608
+    testWidgets('Menu vertical padding should not be reduced with compact visual density', (
+      WidgetTester tester,
+    ) async {
+      // Helper function to get menu padding by measuring first/last items.
+      (double, double) getMenuPadding() {
+        // Find any menu items that are available.
+        final Finder menuItems = find.byType(SubmenuButton);
+        if (menuItems.evaluate().length < 2) {
+          return (0.0, 0.0);
+        }
+
+        final Rect firstItem = tester.getRect(menuItems.first);
+        final Rect lastItem = tester.getRect(menuItems.last);
+        final Rect menuPanel = tester.getRect(find.byType(Material).last);
+
+        final double topPadding = firstItem.top - menuPanel.top;
+        final double bottomPadding = menuPanel.bottom - lastItem.bottom;
+        return (topPadding, bottomPadding);
+      }
+
+      Future<void> buildSimpleMenuAnchor(
+        TextDirection textDirection, {
+        VisualDensity visualDensity = VisualDensity.standard,
+      }) async {
+        await tester.pumpWidget(
+          MaterialApp(
+            theme: ThemeData(visualDensity: visualDensity),
+            home: Directionality(
+              textDirection: textDirection,
+              child: Scaffold(
+                body: MenuAnchor(
+                  style: const MenuStyle(
+                    padding: WidgetStatePropertyAll<EdgeInsets>(
+                      EdgeInsets.symmetric(vertical: 12, horizontal: 4),
+                    ),
+                  ),
+                  menuChildren: const <Widget>[
+                    DecoratedBox(
+                      decoration: BoxDecoration(color: Colors.blue),
+                      child: Text('Text 1'),
+                    ),
+                    DecoratedBox(
+                      decoration: BoxDecoration(color: Colors.blue),
+                      child: Text('Text 2'),
+                    ),
+                  ],
+                  builder: (BuildContext context, MenuController controller, Widget? child) {
+                    return TextButton(
+                      onPressed: () {
+                        if (controller.isOpen) {
+                          controller.close();
+                        } else {
+                          controller.open();
+                        }
+                      },
+                      child: const Text('OPEN MENU'),
+                    );
+                  },
+                ),
+              ),
+            ),
+          ),
+        );
+
+        await tester.tap(find.text('OPEN MENU'));
+        await tester.pump();
+      }
+
+      // Pump widget with standard visual density.
+      await buildSimpleMenuAnchor(TextDirection.ltr);
+
+      final (double topStandard, double bottomStandard) = getMenuPadding();
+
+      // Pump widget with compact visual density.
+      await buildSimpleMenuAnchor(TextDirection.ltr, visualDensity: VisualDensity.compact);
+
+      final (double topCompact, double bottomCompact) = getMenuPadding();
+
+      // Compare standard vs compact padding.
+      expect(
+        topCompact,
+        equals(topStandard),
+        reason:
+            'Compact visual density should not change top padding. '
+            'Standard: $topStandard, Compact: $topCompact',
+      );
+
+      expect(
+        bottomCompact,
+        equals(bottomStandard),
+        reason:
+            'Compact visual density should not change bottom padding. '
+            'Standard: $bottomStandard, Compact: $bottomCompact',
+      );
+    });
+
     group('LocalizedShortcutLabeler', () {
       testWidgets('getShortcutLabel returns the right labels', (WidgetTester tester) async {
         String expectedMeta;

packages/flutter/test/material/menu_style_test.dart

@@ -287,15 +287,15 @@ void main() {
       );
       expect(
         tester.getRect(find.text(TestMenu.subMenu10.label)),
-        equals(const Rect.fromLTRB(372.0, 68.0, 565.0, 82.0)),
+        equals(const Rect.fromLTRB(372.0, 70.0, 565.0, 84.0)),
       );
       expect(
         tester.getRect(
           find
               .ancestor(of: find.text(TestMenu.subMenu10.label), matching: find.byType(Material))
               .at(1),
         ),
-        equals(const Rect.fromLTRB(352.0, 48.0, 585.0, 186.0)),
+        equals(const Rect.fromLTRB(352.0, 48.0, 585.0, 190.0)),
       );
     });
   });