MenuAnchor overlay opens above anchor button within auto_route navigation context

[dmarotta77]

Flutter 3.27.1
Webapp

The MenuAnchor widget incorrectly positions its menu overlay when used within routes managed by auto_route. Instead of opening below the anchor button, the menu opens above it, resulting in an incorrect vertical offset. This issue only occurs within the auto_route navigation context; when MenuAnchor is used outside of auto_route (e.g., in the main AppBar), the menu is positioned correctly.

Code sample

pubspec.yaml

name: nested_route_menu_anchor
description: "A new Flutter project."

publish_to: 'none' # Remove this line if you wish to publish to pub.dev

version: 1.0.0+1

environment:
  sdk: ^3.6.0

dependencies:
  flutter:
    sdk: flutter

  auto_route: ^9.2.2
  cupertino_icons: ^1.0.8

dev_dependencies:
  flutter_test:
    sdk: flutter

  auto_route_generator: ^9.0.0
  build_runner: ^2.4.14
  flutter_lints: ^5.0.0

flutter:
  uses-material-design: true

main.dart

import 'package:auto_route/auto_route.dart';
import 'package:flutter/material.dart';
import 'package:nested_route_menu_anchor/main.gr.dart';

void main() {
  runApp(NestedNavigationApp());
}

class NestedNavigationApp extends StatelessWidget {
  NestedNavigationApp({super.key});

  final nestedRouter = NestedRouter();

  @override
  Widget build(BuildContext context) {
    return MaterialApp.router(
      routerConfig: nestedRouter.config(),
      debugShowCheckedModeBanner: false,
    );
  }
}

@AutoRouterConfig()
class NestedRouter extends RootStackRouter {
  @override
  List<AutoRoute> get routes => [
        AutoRoute(
          initial: true,
          page: HostRoute.page,
          children: [
            AutoRoute(page: FirstRoute.page, initial: true),
          ],
        ),
      ];
}

@RoutePage()
class HostScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Host Screen'),
        actions: [MyCascadingMenu()],

        /// This will automatically display a back button if the nested router can pop
        leading: AutoLeadingButton(),
      ),
      body: AutoRouter(),
    );
  }
}

@RoutePage()
class FirstScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Nested Screen'),
        actions: [MyCascadingMenu()],
      ),
      body: Center(
        child: MyCascadingMenu(),
      ),
    );
  }
}

class MyCascadingMenu extends StatelessWidget {
  const MyCascadingMenu({super.key});

  @override
  Widget build(BuildContext context) {
    return MenuAnchor(
      menuChildren: <Widget>[
        MenuItemButton(
          onPressed: () {},
          child: const Text('Revert'),
        ),
        MenuItemButton(
          onPressed: () {},
          child: const Text('Setting'),
        ),
        MenuItemButton(
          onPressed: () {},
          child: const Text('Send Feedback'),
        ),
      ],
      builder: (_, MenuController controller, Widget? child) {
        return IconButton(
          onPressed: () {
            if (controller.isOpen) {
              controller.close();
            } else {
              controller.open();
            }
          },
          icon: const Icon(Icons.more_vert),
        );
      },
    );
  }
}

This image depicts a Flutter screen containing three AnchorMenu widgets

• AnchorMenu 1: This menu is located outside the scope of auto_route.
• AnchorMenu 2 & 3: These menus are positioned within the auto_route context.
  

The image shows Menu 1, outside of auto_route, opening in the correct position below the button

Menus within auto_route open in the wrong position, overlapping the button