Fix DropdownMenu menu does not follow the text field (#154667)

## Description

This PR fixes the `DropdownMenu` menu position when the keyboard appear on mobile device.

## Related Issue

Fixes flutter/flutter#149037.

## Tests

Adds 2 tests.

Author: bleroux

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

@@ -804,6 +804,7 @@ class _DropdownMenuState<T> extends State<DropdownMenu<T>> {
       controller: _controller,
       menuChildren: menu,
       crossAxisUnconstrained: false,
+      layerLink: LayerLink(),
       builder: (BuildContext context, MenuController controller, Widget? child) {
         assert(_initialMenu != null);
         final Widget trailingButton = Padding(

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

@@ -144,6 +144,7 @@ class MenuAnchor extends StatefulWidget {
     this.childFocusNode,
     this.style,
     this.alignmentOffset = Offset.zero,
+    this.layerLink,
     this.clipBehavior = Clip.hardEdge,
     @Deprecated(
       'Use consumeOutsideTap instead. '
@@ -205,6 +206,13 @@ class MenuAnchor extends StatefulWidget {
   /// {@endtemplate}
   final Offset? alignmentOffset;
 
+  /// An optional [LayerLink] to attach the menu to the widget that this
+  /// [MenuAnchor] surrounds.
+  ///
+  /// When provided, the menu will follow the widget that this [MenuAnchor]
+  /// surrounds if it moves because of view insets changes.
+  final LayerLink? layerLink;
+
   /// {@macro flutter.material.Material.clipBehavior}
   ///
   /// Defaults to [Clip.hardEdge].
@@ -387,11 +395,20 @@ class _MenuAnchorState extends State<MenuAnchor> {
 
   @override
   Widget build(BuildContext context) {
+    Widget contents = _buildContents(context);
+    if (widget.layerLink != null) {
+      contents = CompositedTransformTarget(
+        link: widget.layerLink!,
+        child: contents,
+      );
+    }
+
     Widget child = OverlayPortal(
       controller: _overlayController,
       overlayChildBuilder: (BuildContext context) {
         return _Submenu(
           anchor: this,
+          layerLink: widget.layerLink,
           menuStyle: widget.style,
           alignmentOffset: widget.alignmentOffset ?? Offset.zero,
           menuPosition: _menuPosition,
@@ -400,7 +417,7 @@ class _MenuAnchorState extends State<MenuAnchor> {
           crossAxisUnconstrained: widget.crossAxisUnconstrained,
         );
       },
-      child: _buildContents(context),
+      child: contents,
     );
 
     if (!widget.anchorTapClosesMenu) {
@@ -3497,6 +3514,7 @@ class _MenuPanelState extends State<_MenuPanel> {
 class _Submenu extends StatelessWidget {
   const _Submenu({
     required this.anchor,
+    required this.layerLink,
     required this.menuStyle,
     required this.menuPosition,
     required this.alignmentOffset,
@@ -3506,6 +3524,7 @@ class _Submenu extends StatelessWidget {
   });
 
   final _MenuAnchorState anchor;
+  final LayerLink? layerLink;
   final MenuStyle? menuStyle;
   final Offset? menuPosition;
   final Offset alignmentOffset;
@@ -3553,12 +3572,17 @@ class _Submenu extends StatelessWidget {
         .clamp(EdgeInsets.zero, EdgeInsetsGeometry.infinity);
     final BuildContext anchorContext = anchor._anchorKey.currentContext!;
     final RenderBox overlay = Overlay.of(anchorContext).context.findRenderObject()! as RenderBox;
-    final RenderBox anchorBox = anchorContext.findRenderObject()! as RenderBox;
-    final Offset upperLeft = anchorBox.localToGlobal(Offset(dx, -dy), ancestor: overlay);
-    final Offset bottomRight = anchorBox.localToGlobal(anchorBox.paintBounds.bottomRight, ancestor: overlay);
+
+    Offset upperLeft = Offset.zero;
+    Offset bottomRight = Offset.zero;
+    if (layerLink == null) {
+      final RenderBox anchorBox = anchorContext.findRenderObject()! as RenderBox;
+      upperLeft = anchorBox.localToGlobal(Offset(dx, -dy), ancestor: overlay);
+      bottomRight = anchorBox.localToGlobal(anchorBox.paintBounds.bottomRight, ancestor: overlay);
+    }
     final Rect anchorRect = Rect.fromPoints(upperLeft, bottomRight);
 
-    return Theme(
+    Widget child = Theme(
       data: Theme.of(context).copyWith(
         visualDensity: visualDensity,
       ),
@@ -3609,6 +3633,16 @@ class _Submenu extends StatelessWidget {
         ),
       ),
     );
+
+    if (layerLink != null) {
+      child = CompositedTransformFollower(
+        link: layerLink!,
+        targetAnchor: Alignment.bottomLeft,
+        child: child,
+      );
+    }
+
+    return child;
   }
 }
 

packages/flutter/test/material/dropdown_menu_test.dart

@@ -2791,6 +2791,47 @@ void main() {
     await tester.pumpAndSettle();
     expect(controller.offset, 0.0);
   });
+
+  // Regression test for https://github.com/flutter/flutter/issues/149037.
+  testWidgets('Dropdown menu follows the text field when keyboard opens', (WidgetTester tester) async {
+    Widget boilerplate(double bottomInsets) {
+      return MaterialApp(
+        home: MediaQuery(
+          data: MediaQueryData(viewInsets: EdgeInsets.only(bottom: bottomInsets)),
+          child: Scaffold(
+            body: Center(
+              child: DropdownMenu<TestMenu>(dropdownMenuEntries: menuChildren),
+            ),
+          ),
+        ),
+      );
+    }
+
+    // Build once without bottom insets and open the menu.
+    await tester.pumpWidget(boilerplate(0.0));
+    await tester.tap(find.byType(TextField).first);
+    await tester.pump();
+
+    Finder findMenuPanels() {
+      return find.byWidgetPredicate((Widget widget) => widget.runtimeType.toString() == '_MenuPanel');
+    }
+
+    // Menu vertical position is just under the text field.
+    expect(
+      tester.getRect(findMenuPanels()).top,
+      tester.getRect(find.byType(TextField).first).bottom,
+    );
+
+    // Simulate the keyboard opening resizing the view.
+    await tester.pumpWidget(boilerplate(100.0));
+    await tester.pump();
+
+    // Menu vertical position is just under the text field.
+    expect(
+      tester.getRect(findMenuPanels()).top,
+      tester.getRect(find.byType(TextField).first).bottom,
+    );
+  });
 }
 
 enum TestMenu {

packages/flutter/test/material/menu_anchor_test.dart

@@ -3800,6 +3800,59 @@ void main() {
         ]),
       );
     });
+
+    testWidgets('Menu follows content position when a LayerLink is provided', (WidgetTester tester) async {
+      final MenuController controller = MenuController();
+      final UniqueKey contentKey = UniqueKey();
+
+      Widget boilerplate(double bottomInsets) {
+        return MaterialApp(
+          home: MediaQuery(
+            data: MediaQueryData(
+              viewInsets: EdgeInsets.only(bottom: bottomInsets),
+            ),
+            child: Scaffold(
+              body: Center(
+                child: MenuAnchor(
+                  controller: controller,
+                  layerLink: LayerLink(),
+                  menuChildren: <Widget>[
+                    MenuItemButton(
+                      onPressed: () {},
+                      child: const Text('Button 1'),
+                    ),
+                  ],
+                  builder: (BuildContext context, MenuController controller, Widget? child) {
+                    return SizedBox(key: contentKey, width: 100, height: 100);
+                  },
+                ),
+              ),
+            ),
+          ),
+        );
+      }
+
+      // Build once without bottom insets and open the menu.
+      await tester.pumpWidget(boilerplate(0.0));
+      controller.open();
+      await tester.pump();
+
+      // Menu vertical position is just under the content.
+      expect(
+        tester.getRect(findMenuPanels()).top,
+        tester.getRect(find.byKey(contentKey)).bottom,
+      );
+
+      // Simulate the keyboard opening resizing the view.
+      await tester.pumpWidget(boilerplate(100.0));
+      await tester.pump();
+
+      // Menu vertical position is just under the content.
+      expect(
+        tester.getRect(findMenuPanels()).top,
+        tester.getRect(find.byKey(contentKey)).bottom,
+      );
+    });
   });
 
   group('LocalizedShortcutLabeler', () {