Skip to content

Commit 44203b6

Browse files
huycozyhuycozy
authored
Fix DropdownMenu example RenderFlex overflowed error (#162558)
<!-- Thanks for filing a pull request! Reviewers are typically assigned within a week of filing a request. To learn more about code review, see our documentation on Tree Hygiene: https://github.com/flutter/flutter/blob/main/docs/contributing/Tree-hygiene.md --> Fix flutter/flutter#162506 | before | after | | --------------- | --------------- | <video src="https://github.com/user-attachments/assets/91c82b7c-3449-4b65-9b7a-547030dd6536"/> | <img src="https://github.com/user-attachments/assets/a32ecb23-3c87-4b95-8687-d7b3d8190863"/> ## 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. - [ ] 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]. <!-- 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 --------- Signed-off-by: huycozy <[email protected]>
1 parent e6a65af commit 44203b6

File tree

2 files changed

+91
-46
lines changed

2 files changed

+91
-46
lines changed

‎examples/api/lib/material/dropdown_menu/dropdown_menu.0.dart‎

Lines changed: 54 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -84,56 +84,64 @@ class _DropdownMenuExampleState extends State<DropdownMenuExample> {
8484
children: <Widget>[
8585
Padding(
8686
padding: const EdgeInsets.symmetric(vertical: 20),
87-
child: Row(
88-
mainAxisAlignment: MainAxisAlignment.center,
89-
children: <Widget>[
90-
DropdownMenu<ColorLabel>(
91-
initialSelection: ColorLabel.green,
92-
controller: colorController,
93-
// requestFocusOnTap is enabled/disabled by platforms when it is null.
94-
// On mobile platforms, this is false by default. Setting this to true will
95-
// trigger focus request on the text field and virtual keyboard will appear
96-
// afterward. On desktop platforms however, this defaults to true.
97-
requestFocusOnTap: true,
98-
label: const Text('Color'),
99-
onSelected: (ColorLabel? color) {
100-
setState(() {
101-
selectedColor = color;
102-
});
103-
},
104-
dropdownMenuEntries: ColorLabel.entries,
105-
),
106-
const SizedBox(width: 24),
107-
DropdownMenu<IconLabel>(
108-
controller: iconController,
109-
enableFilter: true,
110-
requestFocusOnTap: true,
111-
leadingIcon: const Icon(Icons.search),
112-
label: const Text('Icon'),
113-
inputDecorationTheme: const InputDecorationTheme(
114-
filled: true,
115-
contentPadding: EdgeInsets.symmetric(vertical: 5.0),
87+
child: SingleChildScrollView(
88+
scrollDirection: Axis.horizontal,
89+
child: Row(
90+
mainAxisSize: MainAxisSize.min,
91+
mainAxisAlignment: MainAxisAlignment.center,
92+
children: <Widget>[
93+
DropdownMenu<ColorLabel>(
94+
initialSelection: ColorLabel.green,
95+
controller: colorController,
96+
// The default requestFocusOnTap value depends on the platform.
97+
// On mobile, it defaults to false, and on desktop, it defaults to true.
98+
// Setting this to true will trigger a focus request on the text field, and
99+
// the virtual keyboard will appear afterward.
100+
requestFocusOnTap: true,
101+
label: const Text('Color'),
102+
onSelected: (ColorLabel? color) {
103+
setState(() {
104+
selectedColor = color;
105+
});
106+
},
107+
dropdownMenuEntries: ColorLabel.entries,
116108
),
117-
onSelected: (IconLabel? icon) {
118-
setState(() {
119-
selectedIcon = icon;
120-
});
121-
},
122-
dropdownMenuEntries: IconLabel.entries,
123-
),
124-
],
109+
const SizedBox(width: 24),
110+
DropdownMenu<IconLabel>(
111+
controller: iconController,
112+
enableFilter: true,
113+
requestFocusOnTap: true,
114+
leadingIcon: const Icon(Icons.search),
115+
label: const Text('Icon'),
116+
inputDecorationTheme: const InputDecorationTheme(
117+
filled: true,
118+
contentPadding: EdgeInsets.symmetric(vertical: 5.0),
119+
),
120+
onSelected: (IconLabel? icon) {
121+
setState(() {
122+
selectedIcon = icon;
123+
});
124+
},
125+
dropdownMenuEntries: IconLabel.entries,
126+
),
127+
],
128+
),
125129
),
126130
),
127131
if (selectedColor != null && selectedIcon != null)
128-
Row(
129-
mainAxisAlignment: MainAxisAlignment.center,
130-
children: <Widget>[
131-
Text('You selected a ${selectedColor?.label} ${selectedIcon?.label}'),
132-
Padding(
133-
padding: const EdgeInsets.symmetric(horizontal: 5),
134-
child: Icon(selectedIcon?.icon, color: selectedColor?.color),
135-
),
136-
],
132+
SingleChildScrollView(
133+
scrollDirection: Axis.horizontal,
134+
child: Row(
135+
mainAxisSize: MainAxisSize.min,
136+
mainAxisAlignment: MainAxisAlignment.center,
137+
children: <Widget>[
138+
Text('You selected a ${selectedColor?.label} ${selectedIcon?.label}'),
139+
Padding(
140+
padding: const EdgeInsets.symmetric(horizontal: 5),
141+
child: Icon(selectedIcon?.icon, color: selectedColor?.color),
142+
),
143+
],
144+
),
137145
)
138146
else
139147
const Text('Please select a color and an icon.'),

‎examples/api/test/material/dropdown_menu/dropdown_menu.0_test.dart‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -70,4 +70,41 @@ void main() {
7070
await tester.pumpAndSettle();
7171
expect(FocusScope.of(tester.element(iconMenu)).hasFocus, isTrue);
7272
});
73+
74+
testWidgets('DropdownMenu on small screen', (WidgetTester tester) async {
75+
await tester.pumpWidget(const example.DropdownMenuExample());
76+
77+
final Finder colorMenu = find.byType(DropdownMenu<example.ColorLabel>);
78+
final Finder iconMenu = find.byType(DropdownMenu<example.IconLabel>);
79+
expect(colorMenu, findsOneWidget);
80+
expect(iconMenu, findsOneWidget);
81+
82+
Finder findMenuItem(String label) {
83+
return find.widgetWithText(MenuItemButton, label).last;
84+
}
85+
86+
await tester.tap(colorMenu);
87+
await tester.pumpAndSettle();
88+
final Finder menuBlue = findMenuItem('Blue');
89+
await tester.ensureVisible(menuBlue);
90+
await tester.tap(menuBlue);
91+
await tester.pumpAndSettle();
92+
93+
await tester.tap(iconMenu);
94+
await tester.pumpAndSettle();
95+
final Finder menuSmile = findMenuItem('Smile');
96+
await tester.ensureVisible(menuSmile);
97+
await tester.tap(menuSmile);
98+
await tester.pumpAndSettle();
99+
100+
expect(find.text('You selected a Blue Smile'), findsOneWidget);
101+
102+
// Resize the screen to small screen and make sure no overflowed error appears.
103+
tester.binding.window.physicalSizeTestValue = const Size(200, 160);
104+
tester.binding.window.devicePixelRatioTestValue = 1.0;
105+
addTearDown(tester.binding.window.clearPhysicalSizeTestValue);
106+
await tester.pump();
107+
108+
expect(tester.takeException(), isNull);
109+
});
73110
}

0 commit comments

Comments
 (0)