Skip to content

Commit 589c16c

Browse files
davidhicks980davidhicks980
authored
[cupertino.dart] Implement CupertinoMenuAnchor and CupertinoMenuItem using RawMenuAnchor (#182036)
This PR implements `CupertinoMenuAnchor`, `CupertinoMenuItem`, and `CupertinoMenuDivider` using `RawMenuAnchor`. Resolves flutter/flutter#60298, notDmDrl/pull_down_button#26, flutter/flutter#137936. https://github.com/user-attachments/assets/cdaee8da-888b-4f64-8bf3-49c873f6d6e1 Dartpad: https://dartpad.dev/8c6bba779b6a00e95582b61b132292bc @dkwingsmt ---- Edit: Reland of flutter/flutter#174695 after revert flutter/flutter#182010 due to breakage when tests were randomized. Per @jason-simmons - > The error seen on CI can be reproduced by running: > flutter test --test-randomize-ordering-seed=20260206 test/cupertino/menu_anchor_test.dart Thanks to those who caught the error -- sorry I didn't notice. From what I can deduce, two errors were present. **Test 1: Menus do not close on root menu internal scroll (and others)** The first error occurred due to TestPointers being created with an existing pointer number. This was fixed by using tester.nextPointer instead of a fixed number. Code: https://github.com/davidhicks980/flutter/blob/054f3b03f2ab04822760c600e4259fbd828ebd4d/packages/flutter/test/cupertino/menu_anchor_test.dart#L968 ```dart final pointer = TestPointer( 1, // Fixed with tester.nextPointer ui.PointerDeviceKind.mouse ); await tester.sendEventToBinding(pointer.hover(tester.getCenter(find.text(Tag.a.text)))); await tester.pump(); ``` **Test 2: `Menu scale rebounds to full size when swipe gesture ends`** The second error occurred due to the _SwipeRegion's GestureRecognizer outliving its state and calling didSwipeLeave on a disposed CupertinoMenuItem. <s>This shouldn't be a problem -- swiping is supposed to continue so long as a user has their pointer down -- but the CupertinoMenuItem should have checked whether it was mounted before entering code that could schedule a rebuild (e.g. _handleActivation, isSwiped)</s> Nevermind -- I realize now there isn't much of a reason for letting the swipe outlive the region, so I just disposed of the swipe when the SwipeRegion is unmounted. I still kept the mounted check. Code: https://github.com/davidhicks980/flutter/blob/054f3b03f2ab04822760c600e4259fbd828ebd4d/packages/flutter/test/cupertino/menu_anchor_test.dart#L1285 ```dart @OverRide void didSwipeLeave({bool pointerUp = false}) { // This function could be called after disposal, but _handleActivation and isSwiped both could trigger rebuilds. // Fix: // if (!mounted) { // return // } if (isEnabled && pointerUp) { _handleActivation(); } isSwiped = false; } ``` I ran an additional 500 randomized menu_anchor_test.dart runs and did not experience another exception. I believe everything should be good-to-go, but I'll pay closer attention to cocoon. --- ## 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]. **Note**: The Flutter team is currently trialing the use of [Gemini Code Assist for GitHub](https://developers.google.com/gemini-code-assist/docs/review-github-code). Comments from the `gemini-code-assist` bot should not be taken as authoritative feedback from the Flutter team. If you find its comments useful you can update your code accordingly, but if you are unsure or disagree with the feedback, please feel free to wait for a Flutter team member's review for guidance on which automated comments should be addressed. <!-- 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
1 parent 296cf6c commit 589c16c

4 files changed

Lines changed: 3267 additions & 2 deletions

File tree

‎examples/api/lib/cupertino/menu_anchor/menu_anchor.0.dart‎

Lines changed: 86 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
// Copyright 2014 The Flutter Authors. All rights reserved.
2+
// Use of this source code is governed by a BSD-style license that can be
3+
// found in the LICENSE file.
4+
5+
import 'package:flutter/cupertino.dart';
6+
7+
/// Flutter code sample for a basic [CupertinoMenuAnchor].
8+
void main() => runApp(const CupertinoMenuAnchorApp());
9+
10+
class CupertinoMenuAnchorApp extends StatelessWidget {
11+
const CupertinoMenuAnchorApp({super.key});
12+
13+
@override
14+
Widget build(BuildContext context) {
15+
return const CupertinoApp(
16+
home: CupertinoPageScaffold(child: CupertinoMenuAnchorExample()),
17+
);
18+
}
19+
}
20+
21+
class CupertinoMenuAnchorExample extends StatefulWidget {
22+
const CupertinoMenuAnchorExample({super.key});
23+
24+
@override
25+
State<CupertinoMenuAnchorExample> createState() =>
26+
_CupertinoMenuAnchorExampleState();
27+
}
28+
29+
class _CupertinoMenuAnchorExampleState
30+
extends State<CupertinoMenuAnchorExample> {
31+
// Optional: Create a focus node to allow focus traversal between the menu
32+
// button and the menu overlay.
33+
final FocusNode _buttonFocusNode = FocusNode(debugLabel: 'Menu Button');
34+
AnimationStatus _animationStatus = AnimationStatus.dismissed;
35+
36+
@override
37+
void dispose() {
38+
_buttonFocusNode.dispose();
39+
super.dispose();
40+
}
41+
42+
@override
43+
Widget build(BuildContext context) {
44+
return Stack(
45+
children: <Widget>[
46+
Center(
47+
child: CupertinoMenuAnchor(
48+
onAnimationStatusChanged: (AnimationStatus status) {
49+
// Since we are only checking the animation status when the button
50+
// is pressed, we don't need to call setState here.
51+
_animationStatus = status;
52+
},
53+
childFocusNode: _buttonFocusNode,
54+
menuChildren: <Widget>[
55+
CupertinoMenuItem(
56+
onPressed: () {},
57+
subtitle: const Text('Subtitle'),
58+
trailing: const Icon(CupertinoIcons.star),
59+
child: const Text('Menu Item'),
60+
),
61+
],
62+
builder:
63+
(
64+
BuildContext context,
65+
MenuController controller,
66+
Widget? child,
67+
) {
68+
return CupertinoButton(
69+
sizeStyle: CupertinoButtonSize.small,
70+
focusNode: _buttonFocusNode,
71+
onPressed: () {
72+
if (_animationStatus.isForwardOrCompleted) {
73+
controller.close();
74+
} else {
75+
controller.open();
76+
}
77+
},
78+
child: const Icon(CupertinoIcons.ellipsis_vertical_circle),
79+
);
80+
},
81+
),
82+
),
83+
],
84+
);
85+
}
86+
}

‎examples/api/lib/cupertino/menu_anchor/menu_anchor.1.dart‎

Lines changed: 135 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,135 @@
1+
// Copyright 2014 The Flutter Authors. All rights reserved.
2+
// Use of this source code is governed by a BSD-style license that can be
3+
// found in the LICENSE file.
4+
5+
import 'package:flutter/cupertino.dart';
6+
7+
/// Flutter code sample for a [CupertinoMenuAnchor] that shows a menu with three
8+
/// [CupertinoMenuItem]s and one [CupertinoMenuDivider].
9+
void main() => runApp(const CupertinoMenuAnchorApp());
10+
11+
class CupertinoMenuAnchorApp extends StatelessWidget {
12+
const CupertinoMenuAnchorApp({super.key});
13+
14+
@override
15+
Widget build(BuildContext context) {
16+
return const CupertinoApp(
17+
home: CupertinoPageScaffold(
18+
navigationBar: CupertinoNavigationBar(
19+
middle: Text('CupertinoMenuAnchor Example'),
20+
),
21+
child: CupertinoMenuAnchorExample(),
22+
),
23+
);
24+
}
25+
}
26+
27+
class CupertinoMenuAnchorExample extends StatefulWidget {
28+
const CupertinoMenuAnchorExample({super.key});
29+
30+
@override
31+
State<CupertinoMenuAnchorExample> createState() =>
32+
_CupertinoMenuAnchorExampleState();
33+
}
34+
35+
class _CupertinoMenuAnchorExampleState
36+
extends State<CupertinoMenuAnchorExample> {
37+
// Optional: Create a focus node to allow focus traversal between the menu
38+
// button and the menu overlay.
39+
final FocusNode _buttonFocusNode = FocusNode(debugLabel: 'Menu Button');
40+
String _pressedItem = '';
41+
AnimationStatus _status = AnimationStatus.dismissed;
42+
43+
@override
44+
void dispose() {
45+
_buttonFocusNode.dispose();
46+
super.dispose();
47+
}
48+
49+
@override
50+
Widget build(BuildContext context) {
51+
return Center(
52+
child: Column(
53+
spacing: 20,
54+
mainAxisAlignment: MainAxisAlignment.center,
55+
children: <Widget>[
56+
CupertinoMenuAnchor(
57+
onAnimationStatusChanged: (AnimationStatus status) {
58+
setState(() {
59+
_status = status;
60+
});
61+
},
62+
childFocusNode: _buttonFocusNode,
63+
menuChildren: <Widget>[
64+
CupertinoMenuItem(
65+
onPressed: () {
66+
setState(() {
67+
_pressedItem = 'Regular Item';
68+
});
69+
},
70+
subtitle: const Text('Subtitle'),
71+
child: const Text('Regular Item'),
72+
),
73+
CupertinoMenuItem(
74+
onPressed: () {
75+
setState(() {
76+
_pressedItem = 'Colorful Item';
77+
});
78+
},
79+
decoration: const WidgetStateProperty<BoxDecoration>.fromMap(<
80+
WidgetStatesConstraint,
81+
BoxDecoration
82+
>{
83+
WidgetState.dragged: BoxDecoration(color: Color(0xAEE48500)),
84+
WidgetState.pressed: BoxDecoration(color: Color(0xA6E3002A)),
85+
WidgetState.hovered: BoxDecoration(color: Color(0xA90069DA)),
86+
WidgetState.focused: BoxDecoration(color: Color(0x9B00C8BE)),
87+
WidgetState.any: BoxDecoration(color: Color(0x00000000)),
88+
}),
89+
child: const Text('Colorful Item'),
90+
),
91+
const CupertinoMenuDivider(),
92+
CupertinoMenuItem(
93+
trailing: const Icon(CupertinoIcons.delete),
94+
isDestructiveAction: true,
95+
child: const Text('Destructive Item'),
96+
onPressed: () {
97+
setState(() {
98+
_pressedItem = 'Destructive Item';
99+
});
100+
},
101+
),
102+
],
103+
builder:
104+
(
105+
BuildContext context,
106+
MenuController controller,
107+
Widget? child,
108+
) {
109+
return CupertinoButton(
110+
sizeStyle: CupertinoButtonSize.medium,
111+
focusNode: _buttonFocusNode,
112+
onPressed: () {
113+
if (_status.isForwardOrCompleted) {
114+
controller.close();
115+
} else {
116+
controller.open();
117+
}
118+
},
119+
child: Text(
120+
_status.isForwardOrCompleted ? 'Close Menu' : 'Open Menu',
121+
),
122+
);
123+
},
124+
),
125+
Text(
126+
_pressedItem.isEmpty
127+
? 'No items pressed'
128+
: 'You Pressed: $_pressedItem',
129+
style: CupertinoTheme.of(context).textTheme.textStyle,
130+
),
131+
],
132+
),
133+
);
134+
}
135+
}

0 commit comments

Comments
 (0)