Menu Anchor doesn't apply alignmentOffset when menu reaches window edge. #122125
Description
If an AlignmentOffset is specified, it should be applied once the menu switches sides if there isn't any space left over.
This is happening on both the stable and master channel
Screencast.from.2023-03-07.20-16-47.webm
Repro code:
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"),
),
],
);
}
}
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.