mirror of
https://github.com/flutter/flutter.git
synced 2025-06-03 00:51:18 +00:00
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 https://github.com/flutter/flutter/issues/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 <huy@nevercode.io>
This commit is contained in:
Huy
GitHub
parent
e6a65afca4
commit
44203b67f5
@ -84,56 +84,64 @@ class _DropdownMenuExampleState extends State<DropdownMenuExample> {
|
||||
children: <Widget>[
|
||||
Padding(
|
||||
padding: const EdgeInsets.symmetric(vertical: 20),
|
||||
child: Row(
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
children: <Widget>[
|
||||
DropdownMenu<ColorLabel>(
|
||||
initialSelection: ColorLabel.green,
|
||||
controller: colorController,
|
||||
// requestFocusOnTap is enabled/disabled by platforms when it is null.
|
||||
// On mobile platforms, this is false by default. Setting this to true will
|
||||
// trigger focus request on the text field and virtual keyboard will appear
|
||||
// afterward. On desktop platforms however, this defaults to true.
|
||||
requestFocusOnTap: true,
|
||||
label: const Text('Color'),
|
||||
onSelected: (ColorLabel? color) {
|
||||
setState(() {
|
||||
selectedColor = color;
|
||||
});
|
||||
},
|
||||
dropdownMenuEntries: ColorLabel.entries,
|
||||
),
|
||||
const SizedBox(width: 24),
|
||||
DropdownMenu<IconLabel>(
|
||||
controller: iconController,
|
||||
enableFilter: true,
|
||||
requestFocusOnTap: true,
|
||||
leadingIcon: const Icon(Icons.search),
|
||||
label: const Text('Icon'),
|
||||
inputDecorationTheme: const InputDecorationTheme(
|
||||
filled: true,
|
||||
contentPadding: EdgeInsets.symmetric(vertical: 5.0),
|
||||
child: SingleChildScrollView(
|
||||
scrollDirection: Axis.horizontal,
|
||||
child: Row(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
children: <Widget>[
|
||||
DropdownMenu<ColorLabel>(
|
||||
initialSelection: ColorLabel.green,
|
||||
controller: colorController,
|
||||
// The default requestFocusOnTap value depends on the platform.
|
||||
// On mobile, it defaults to false, and on desktop, it defaults to true.
|
||||
// Setting this to true will trigger a focus request on the text field, and
|
||||
// the virtual keyboard will appear afterward.
|
||||
requestFocusOnTap: true,
|
||||
label: const Text('Color'),
|
||||
onSelected: (ColorLabel? color) {
|
||||
setState(() {
|
||||
selectedColor = color;
|
||||
});
|
||||
},
|
||||
dropdownMenuEntries: ColorLabel.entries,
|
||||
),
|
||||
onSelected: (IconLabel? icon) {
|
||||
setState(() {
|
||||
selectedIcon = icon;
|
||||
});
|
||||
},
|
||||
dropdownMenuEntries: IconLabel.entries,
|
||||
),
|
||||
],
|
||||
const SizedBox(width: 24),
|
||||
DropdownMenu<IconLabel>(
|
||||
controller: iconController,
|
||||
enableFilter: true,
|
||||
requestFocusOnTap: true,
|
||||
leadingIcon: const Icon(Icons.search),
|
||||
label: const Text('Icon'),
|
||||
inputDecorationTheme: const InputDecorationTheme(
|
||||
filled: true,
|
||||
contentPadding: EdgeInsets.symmetric(vertical: 5.0),
|
||||
),
|
||||
onSelected: (IconLabel? icon) {
|
||||
setState(() {
|
||||
selectedIcon = icon;
|
||||
});
|
||||
},
|
||||
dropdownMenuEntries: IconLabel.entries,
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
if (selectedColor != null && selectedIcon != null)
|
||||
Row(
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
children: <Widget>[
|
||||
Text('You selected a ${selectedColor?.label} ${selectedIcon?.label}'),
|
||||
Padding(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 5),
|
||||
child: Icon(selectedIcon?.icon, color: selectedColor?.color),
|
||||
),
|
||||
],
|
||||
SingleChildScrollView(
|
||||
scrollDirection: Axis.horizontal,
|
||||
child: Row(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
children: <Widget>[
|
||||
Text('You selected a ${selectedColor?.label} ${selectedIcon?.label}'),
|
||||
Padding(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 5),
|
||||
child: Icon(selectedIcon?.icon, color: selectedColor?.color),
|
||||
),
|
||||
],
|
||||
),
|
||||
)
|
||||
else
|
||||
const Text('Please select a color and an icon.'),
|
||||
|
||||
@ -70,4 +70,41 @@ void main() {
|
||||
await tester.pumpAndSettle();
|
||||
expect(FocusScope.of(tester.element(iconMenu)).hasFocus, isTrue);
|
||||
});
|
||||
|
||||
testWidgets('DropdownMenu on small screen', (WidgetTester tester) async {
|
||||
await tester.pumpWidget(const example.DropdownMenuExample());
|
||||
|
||||
final Finder colorMenu = find.byType(DropdownMenu<example.ColorLabel>);
|
||||
final Finder iconMenu = find.byType(DropdownMenu<example.IconLabel>);
|
||||
expect(colorMenu, findsOneWidget);
|
||||
expect(iconMenu, findsOneWidget);
|
||||
|
||||
Finder findMenuItem(String label) {
|
||||
return find.widgetWithText(MenuItemButton, label).last;
|
||||
}
|
||||
|
||||
await tester.tap(colorMenu);
|
||||
await tester.pumpAndSettle();
|
||||
final Finder menuBlue = findMenuItem('Blue');
|
||||
await tester.ensureVisible(menuBlue);
|
||||
await tester.tap(menuBlue);
|
||||
await tester.pumpAndSettle();
|
||||
|
||||
await tester.tap(iconMenu);
|
||||
await tester.pumpAndSettle();
|
||||
final Finder menuSmile = findMenuItem('Smile');
|
||||
await tester.ensureVisible(menuSmile);
|
||||
await tester.tap(menuSmile);
|
||||
await tester.pumpAndSettle();
|
||||
|
||||
expect(find.text('You selected a Blue Smile'), findsOneWidget);
|
||||
|
||||
// Resize the screen to small screen and make sure no overflowed error appears.
|
||||
tester.binding.window.physicalSizeTestValue = const Size(200, 160);
|
||||
tester.binding.window.devicePixelRatioTestValue = 1.0;
|
||||
addTearDown(tester.binding.window.clearPhysicalSizeTestValue);
|
||||
await tester.pump();
|
||||
|
||||
expect(tester.takeException(), isNull);
|
||||
});
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user