Repository: flutter
Issue: MenuAnchor should take the available vertical space if the entire menu doesn't fit in.
Labels: c: new feature,framework,f: material design,a: desktop,has reproducible steps,P3,found in release: 3.7,found in release: 3.9,team-framework,triaged-framework

Currently, when a menu is opened and can't fit in the available vertical space, it will be positioned in the top right corner which makes it a little awkward. Ideally, it should be positioned such that it takes all of the available bottom space.

Currently: 

[Screencast from 2023-03-07 20-20-40.webm](https://user-images.githubusercontent.com/73116038/223543290-52ab04ca-5612-44d2-92a3-c9d0277db161.webm)

With the fix:

[Screencast from 2023-03-07 20-25-46.webm](https://user-images.githubusercontent.com/73116038/223544391-d1588ea6-5dcd-446a-9c50-1f68d747c4c6.webm)

An offsetAlignment could still be provided to the menu which would allow it to add a little padding at the bottom.

<details>
  <summary>Repro code:</summary>

```
import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: const ColorScheme.dark(),
      ),
      home: const Directionality(
          textDirection: TextDirection.ltr,
          child: MyHomePage(title: 'Flutter Demo Home Page')),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: const Row(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: [
          Column(
            children: [
              ButtonAnchorExample(),
              Expanded(child: SizedBox()),
            ],
          ),
          Column(
            children: [
              Expanded(child: SizedBox()),
              ButtonAnchorExample(),
            ],
          ),
        ],
      ),
    );
  }
}

class ButtonAnchorExample extends StatelessWidget {
  const ButtonAnchorExample({super.key});

  @override
  Widget build(BuildContext context) {
    return MenuAnchor(
      style: const MenuStyle(
        visualDensity: VisualDensity.compact,
      ),
      // This offset is not correct when menu direction is reversed
      alignmentOffset: const Offset(0, 10),
      builder: (context, controller, child) {
        return FilledButton.tonal(
          onPressed: () {
            if (controller.isOpen) {
              controller.close();
            } else {
              controller.open();
            }
          },
          child: const Text('Show menu'),
        );
      },
      menuChildren: [
        MenuItemButton(
          leadingIcon: const Icon(Icons.people_alt_outlined),
          child: const Text('Item 1'),
          onPressed: () {},
        ),
        MenuItemButton(
          leadingIcon: const Icon(Icons.remove_red_eye_outlined),
          child: const Text('Item 2'),
          onPressed: () {},
        ),
        MenuItemButton(
          leadingIcon: const Icon(Icons.refresh),
          onPressed: () {},
          child: const Text('Item 3'),
        ),
        SubmenuButton(
          trailingIcon: const Icon(Icons.add),
          menuStyle: const MenuStyle(
            visualDensity: VisualDensity.compact,
          ),
          alignmentOffset: const Offset(8, 0),
          menuChildren: [
            MenuItemButton(
              leadingIcon: const Icon(Icons.people_alt_outlined),
              child: const Text('Item 1'),
              onPressed: () {},
            ),
            MenuItemButton(
              leadingIcon: const Icon(Icons.remove_red_eye_outlined),
              child: const Text('Item 2'),
              onPressed: () {},
            ),
            MenuItemButton(
              leadingIcon: const Icon(Icons.refresh),
              onPressed: () {},
              child: const Text('Item 3'),
            ),
          ],
          child: const Text("SubMenuButton"),
        ),
        SubmenuButton(
          menuStyle: const MenuStyle(
            visualDensity: VisualDensity.compact,
          ),
          alignmentOffset: const Offset(8, 0),
          menuChildren: [
            MenuItemButton(
              leadingIcon: const Icon(Icons.people_alt_outlined),
              child: const Text('Item 1'),
              onPressed: () {},
            ),
            MenuItemButton(
              leadingIcon: const Icon(Icons.remove_red_eye_outlined),
              child: const Text('Item 2'),
              onPressed: () {},
            ),
            MenuItemButton(
              leadingIcon: const Icon(Icons.refresh),
              onPressed: () {},
              child: const Text('Item 3'),
            ),
          ],
          child: const Text("SubMenuButton"),
        ),
        SubmenuButton(
          menuStyle: const MenuStyle(
            visualDensity: VisualDensity.compact,
          ),
          alignmentOffset: const Offset(8, 0),
          menuChildren: [
            MenuItemButton(
              leadingIcon: const Icon(Icons.people_alt_outlined),
              child: const Text('Item 1'),
              onPressed: () {},
            ),
            MenuItemButton(
              leadingIcon: const Icon(Icons.remove_red_eye_outlined),
              child: const Text('Item 2'),
              onPressed: () {},
            ),
            MenuItemButton(
              leadingIcon: const Icon(Icons.refresh),
              onPressed: () {},
              child: const Text('Item 3'),
            ),
          ],
          child: const Text("SubMenuButton"),
        ),
        SubmenuButton(
          menuStyle: const MenuStyle(
            visualDensity: VisualDensity.compact,
          ),
          alignmentOffset: const Offset(8, 0),
          menuChildren: [
            MenuItemButton(
              leadingIcon: const Icon(Icons.people_alt_outlined),
              child: const Text('Item 1'),
              onPressed: () {},
            ),
            MenuItemButton(
              leadingIcon: const Icon(Icons.remove_red_eye_outlined),
              child: const Text('Item 2'),
              onPressed: () {},
            ),
            MenuItemButton(
              leadingIcon: const Icon(Icons.refresh),
              onPressed: () {},
              child: const Text('Item 3'),
            ),
          ],
          child: const Text("SubMenuButton"),
        ),
        SubmenuButton(
          menuStyle: const MenuStyle(
            visualDensity: VisualDensity.compact,
          ),
          alignmentOffset: const Offset(8, 0),
          menuChildren: [
            MenuItemButton(
              leadingIcon: const Icon(Icons.people_alt_outlined),
              child: const Text('Item 1'),
              onPressed: () {},
            ),
            MenuItemButton(
              leadingIcon: const Icon(Icons.remove_red_eye_outlined),
              child: const Text('Item 2'),
              onPressed: () {},
            ),
            MenuItemButton(
              leadingIcon: const Icon(Icons.refresh),
              onPressed: () {},
              child: const Text('Item 3'),
            ),
          ],
          child: const Text("SubMenuButton"),
        ),
        SubmenuButton(
          menuStyle: const MenuStyle(
            visualDensity: VisualDensity.compact,
          ),
          alignmentOffset: const Offset(8, 0),
          menuChildren: [
            SubmenuButton(
              menuStyle: const MenuStyle(
                visualDensity: VisualDensity.compact,
              ),
              alignmentOffset: const Offset(8, 0),
              menuChildren: [
                MenuItemButton(
                  leadingIcon: const Icon(Icons.people_alt_outlined),
                  child: const Text('Item 1'),
                  onPressed: () {},
                ),
                MenuItemButton(
                  leadingIcon: const Icon(Icons.remove_red_eye_outlined),
                  child: const Text('Item 2'),
                  onPressed: () {},
                ),
                MenuItemButton(
                  leadingIcon: const Icon(Icons.refresh),
                  onPressed: () {},
                  child: const Text('Item 3'),
                ),
              ],
              child: const Text("SubMenuButton"),
            ),
            SubmenuButton(
              menuStyle: const MenuStyle(
                visualDensity: VisualDensity.compact,
              ),
              alignmentOffset: const Offset(8, 0),
              menuChildren: [
                MenuItemButton(
                  leadingIcon: const Icon(Icons.people_alt_outlined),
                  child: const Text('Item 1'),
                  onPressed: () {},
                ),
                MenuItemButton(
                  leadingIcon: const Icon(Icons.remove_red_eye_outlined),
                  child: const Text('Item 2'),
                  onPressed: () {},
                ),
                MenuItemButton(
                  leadingIcon: const Icon(Icons.refresh),
                  onPressed: () {},
                  child: const Text('Item 3'),
                ),
              ],
              child: const Text("SubMenuButton"),
            ),
            SubmenuButton(
              menuStyle: const MenuStyle(
                visualDensity: VisualDensity.compact,
              ),
              alignmentOffset: const Offset(8, 0),
              menuChildren: [
                MenuItemButton(
                  leadingIcon: const Icon(Icons.people_alt_outlined),
                  child: const Text('Item 1'),
                  onPressed: () {},
                ),
                MenuItemButton(
                  leadingIcon: const Icon(Icons.remove_red_eye_outlined),
                  child: const Text('Item 2'),
                  onPressed: () {},
                ),
                MenuItemButton(
                  leadingIcon: const Icon(Icons.refresh),
                  onPressed: () {},
                  child: const Text('Item 3'),
                ),
              ],
              child: const Text("SubMenuButton"),
            ),
            SubmenuButton(
              menuStyle: const MenuStyle(
                visualDensity: VisualDensity.compact,
              ),
              alignmentOffset: const Offset(8, 0),
              menuChildren: [
                MenuItemButton(
                  leadingIcon: const Icon(Icons.people_alt_outlined),
                  child: const Text('Item 1'),
                  onPressed: () {},
                ),
                MenuItemButton(
                  leadingIcon: const Icon(Icons.remove_red_eye_outlined),
                  child: const Text('Item 2'),
                  onPressed: () {},
                ),
                MenuItemButton(
                  leadingIcon: const Icon(Icons.refresh),
                  onPressed: () {},
                  child: const Text('Item 3'),
                ),
              ],
              child: const Text("SubMenuButton"),
            ),
            SubmenuButton(
              menuStyle: const MenuStyle(
                visualDensity: VisualDensity.compact,
              ),
              alignmentOffset: const Offset(8, 0),
              menuChildren: [
                MenuItemButton(
                  leadingIcon: const Icon(Icons.people_alt_outlined),
                  child: const Text('Item 1'),
                  onPressed: () {},
                ),
                MenuItemButton(
                  leadingIcon: const Icon(Icons.remove_red_eye_outlined),
                  child: const Text('Item 2'),
                  onPressed: () {},
                ),
                SubmenuButton(
                  menuStyle: const MenuStyle(
                    visualDensity: VisualDensity.compact,
                  ),
                  alignmentOffset: const Offset(8, 0),
                  menuChildren: [
                    MenuItemButton(
                      leadingIcon: const Icon(Icons.people_alt_outlined),
                      child: const Text('Item 1'),
                      onPressed: () {},
                    ),
                    MenuItemButton(
                      leadingIcon: const Icon(Icons.remove_red_eye_outlined),
                      child: const Text('Item 2'),
                      onPressed: () {},
                    ),
                    MenuItemButton(
                      leadingIcon: const Icon(Icons.refresh),
                      onPressed: () {},
                      child: const Text('Item 3'),
                    ),
                  ],
                  child: const Text("SubMenuButton"),
                ),
                SubmenuButton(
                  menuStyle: const MenuStyle(
                    visualDensity: VisualDensity.compact,
                  ),
                  alignmentOffset: const Offset(8, 0),
                  menuChildren: [
                    MenuItemButton(
                      leadingIcon: const Icon(Icons.people_alt_outlined),
                      child: const Text('Item 1'),
                      onPressed: () {},
                    ),
                    MenuItemButton(
                      leadingIcon: const Icon(Icons.remove_red_eye_outlined),
                      child: const Text('Item 2'),
                      onPressed: () {},
                    ),
                    MenuItemButton(
                      leadingIcon: const Icon(Icons.refresh),
                      onPressed: () {},
                      child: const Text('Item 3'),
                    ),
                  ],
                  child: const Text("SubMenuButton"),
                ),
                SubmenuButton(
                  menuStyle: const MenuStyle(
                    visualDensity: VisualDensity.compact,
                  ),
                  alignmentOffset: const Offset(8, 0),
                  menuChildren: [
                    MenuItemButton(
                      leadingIcon: const Icon(Icons.people_alt_outlined),
                      child: const Text('Item 1'),
                      onPressed: () {},
                    ),
                    MenuItemButton(
                      leadingIcon: const Icon(Icons.remove_red_eye_outlined),
                      child: const Text('Item 2'),
                      onPressed: () {},
                    ),
                    MenuItemButton(
                      leadingIcon: const Icon(Icons.refresh),
                      onPressed: () {},
                      child: const Text('Item 3'),
                    ),
                  ],
                  child: const Text("SubMenuButton"),
                ),
                SubmenuButton(
                  menuStyle: const MenuStyle(
                    visualDensity: VisualDensity.compact,
                  ),
                  alignmentOffset: const Offset(8, 0),
                  menuChildren: [
                    MenuItemButton(
                      leadingIcon: const Icon(Icons.people_alt_outlined),
                      child: const Text('Item 1'),
                      onPressed: () {},
                    ),
                    SubmenuButton(
                      menuStyle: const MenuStyle(
                        visualDensity: VisualDensity.compact,
                      ),
                      alignmentOffset: const Offset(8, 0),
                      menuChildren: [
                        MenuItemButton(
                          leadingIcon: const Icon(Icons.people_alt_outlined),
                          child: const Text('Item 1'),
                          onPressed: () {},
                        ),
                        MenuItemButton(
                          leadingIcon:
                              const Icon(Icons.remove_red_eye_outlined),
                          child: const Text('Item 2'),
                          onPressed: () {},
                        ),
                        MenuItemButton(
                          leadingIcon: const Icon(Icons.refresh),
                          onPressed: () {},
                          child: const Text('Item 3'),
                        ),
                      ],
                      child: const Text("SubMenuButton"),
                    ),
                    SubmenuButton(
                      menuStyle: const MenuStyle(
                        visualDensity: VisualDensity.compact,
                      ),
                      alignmentOffset: const Offset(8, 0),
                      menuChildren: [
                        MenuItemButton(
                          leadingIcon: const Icon(Icons.people_alt_outlined),
                          child: const Text('Item 1'),
                          onPressed: () {},
                        ),
                        MenuItemButton(
                          leadingIcon:
                              const Icon(Icons.remove_red_eye_outlined),
                          child: const Text('Item 2'),
                          onPressed: () {},
                        ),
                        MenuItemButton(
                          leadingIcon: const Icon(Icons.refresh),
                          onPressed: () {},
                          child: const Text('Item 3'),
                        ),
                      ],
                      child: const Text("SubMenuButton"),
                    ),
                    MenuItemButton(
                      leadingIcon: const Icon(Icons.remove_red_eye_outlined),
                      child: const Text('Item 2'),
                      onPressed: () {},
                    ),
                    MenuItemButton(
                      leadingIcon: const Icon(Icons.refresh),
                      onPressed: () {},
                      child: const Text('Item 3'),
                    ),
                  ],
                  child: const Text("SubMenuButton"),
                ),
                MenuItemButton(
                  leadingIcon: const Icon(Icons.refresh),
                  onPressed: () {},
                  child: const Text('Item 3'),
                ),
              ],
              child: const Text("SubMenuButton"),
            ),
            MenuItemButton(
              leadingIcon: const Icon(Icons.people_alt_outlined),
              child: const Text('Item 1'),
              onPressed: () {},
            ),
            MenuItemButton(
              leadingIcon: const Icon(Icons.remove_red_eye_outlined),
              child: const Text('Item 2'),
              onPressed: () {},
            ),
            MenuItemButton(
              leadingIcon: const Icon(Icons.refresh),
              onPressed: () {},
              child: const Text('Item 3'),
            ),
          ],
          child: const Text("SubMenuButton"),
        ),
        SubmenuButton(
          menuStyle: const MenuStyle(
            visualDensity: VisualDensity.compact,
          ),
          alignmentOffset: const Offset(8, 0),
          menuChildren: [
            MenuItemButton(
              leadingIcon: const Icon(Icons.people_alt_outlined),
              child: const Text('Item 1'),
              onPressed: () {},
            ),
            MenuItemButton(
              leadingIcon: const Icon(Icons.remove_red_eye_outlined),
              child: const Text('Item 2'),
              onPressed: () {},
            ),
            MenuItemButton(
              leadingIcon: const Icon(Icons.refresh),
              onPressed: () {},
              child: const Text('Item 3'),
            ),
          ],
          child: const Text("SubMenuButton"),
        ),
        SubmenuButton(
          menuStyle: const MenuStyle(
            visualDensity: VisualDensity.compact,
          ),
          alignmentOffset: const Offset(8, 0),
          menuChildren: [
            MenuItemButton(
              leadingIcon: const Icon(Icons.people_alt_outlined),
              child: const Text('Item 1'),
              onPressed: () {},
            ),
            MenuItemButton(
              leadingIcon: const Icon(Icons.remove_red_eye_outlined),
              child: const Text('Item 2'),
              onPressed: () {},
            ),
            MenuItemButton(
              leadingIcon: const Icon(Icons.refresh),
              onPressed: () {},
              child: const Text('Item 3'),
            ),
            SubmenuButton(
              menuStyle: const MenuStyle(
                visualDensity: VisualDensity.compact,
              ),
              alignmentOffset: const Offset(8, 0),
              menuChildren: [
                MenuItemButton(
                  leadingIcon: const Icon(Icons.people_alt_outlined),
                  child: const Text('Item 1'),
                  onPressed: () {},
                ),
                MenuItemButton(
                  leadingIcon: const Icon(Icons.remove_red_eye_outlined),
                  child: const Text('Item 2'),
                  onPressed: () {},
                ),
                MenuItemButton(
                  leadingIcon: const Icon(Icons.refresh),
                  onPressed: () {},
                  child: const Text('Item 3'),
                ),
              ],
              child: const Text("SubMenuButton"),
            ),
            SubmenuButton(
              menuStyle: const MenuStyle(
                visualDensity: VisualDensity.compact,
              ),
              alignmentOffset: const Offset(8, 0),
              menuChildren: [
                MenuItemButton(
                  leadingIcon: const Icon(Icons.people_alt_outlined),
                  child: const Text('Item 1'),
                  onPressed: () {},
                ),
                MenuItemButton(
                  leadingIcon: const Icon(Icons.remove_red_eye_outlined),
                  child: const Text('Item 2'),
                  onPressed: () {},
                ),
                MenuItemButton(
                  leadingIcon: const Icon(Icons.refresh),
                  onPressed: () {},
                  child: const Text('Item 3'),
                ),
              ],
              child: const Text("SubMenuButton"),
            ),
            SubmenuButton(
              menuStyle: const MenuStyle(
                visualDensity: VisualDensity.compact,
              ),
              alignmentOffset: const Offset(8, 0),
              menuChildren: [
                MenuItemButton(
                  leadingIcon: const Icon(Icons.people_alt_outlined),
                  child: const Text('Item 1'),
                  onPressed: () {},
                ),
                MenuItemButton(
                  leadingIcon: const Icon(Icons.remove_red_eye_outlined),
                  child: const Text('Item 2'),
                  onPressed: () {},
                ),
                MenuItemButton(
                  leadingIcon: const Icon(Icons.refresh),
                  onPressed: () {},
                  child: const Text('Item 3'),
                ),
              ],
              child: const Text("SubMenuButton"),
            ),
          ],
          child: const Text("SubMenuButton"),
        ),
        SubmenuButton(
          menuStyle: const MenuStyle(
            visualDensity: VisualDensity.compact,
          ),
          alignmentOffset: const Offset(8, 0),
          menuChildren: [
            MenuItemButton(
              leadingIcon: const Icon(Icons.people_alt_outlined),
              child: const Text('Item 1'),
              onPressed: () {},
            ),
            MenuItemButton(
              leadingIcon: const Icon(Icons.remove_red_eye_outlined),
              child: const Text('Item 2'),
              onPressed: () {},
            ),
            MenuItemButton(
              leadingIcon: const Icon(Icons.refresh),
              onPressed: () {},
              child: const Text('Item 3'),
            ),
          ],
          child: const Text("SubMenuButton"),
        ),
      ],
    );
  }
}

```
</details>

This issue is reproducible on both the stable and master branch.

flutter doctor -v:
```
[✓] Flutter (Channel master, 3.9.0-1.0.pre.78, on Fedora Linux 37 (Workstation Edition)
    6.1.11-200.fc37.x86_64, locale en_GB.UTF-8)
    • Flutter version 3.9.0-1.0.pre.78 on channel master at /home/henryr/Dev/SDK/Flutter/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 81b69ca962 (2 hours ago), 2023-03-07 13:11:53 -0500
    • Engine revision b3985c3129
    • Dart version 3.0.0 (build 3.0.0-305.0.dev)
    • DevTools version 2.22.2

[!] Android toolchain - develop for Android devices (Android SDK version 33.0.2)
    • Android SDK at /home/henryr/Android/Sdk
    • Platform android-33-ext4, build-tools 33.0.2
    • Java binary at: /home/henryr/Dev/SDK/Android Studio/android-studio/jbr/bin/java
    • Java version OpenJDK Runtime Environment (build 11.0.15+0-b2043.56-8887301)
    ! Some Android licenses not accepted. To resolve this, run: flutter doctor --android-licenses

[✓] Chrome - develop for the web
    • Chrome at google-chrome

[✓] Linux toolchain - develop for Linux desktop
    • clang version 15.0.7 (Fedora 15.0.7-1.fc37)
    • cmake version 3.25.2
    • ninja version 1.10.2
    • pkg-config version 1.8.0

[✓] Android Studio (version 2022.1)
    • Android Studio at /home/henryr/Dev/SDK/Android Studio/android-studio
    • Flutter plugin version 72.0.2
    • Dart plugin version 221.6096
    • Java version OpenJDK Runtime Environment (build 11.0.15+0-b2043.56-8887301)

[✓] Connected device (2 available)
    • Linux (desktop) • linux  • linux-x64      • Fedora Linux 37 (Workstation Edition)
      6.1.11-200.fc37.x86_64
    • Chrome (web)    • chrome • web-javascript • Google Chrome 110.0.5481.100

[✓] Network resources
    • All expected network resources are available.

```