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>

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

@@ -84,56 +84,64 @@ class _DropdownMenuExampleState extends State<DropdownMenuExample> {
             children: <Widget>[
               Padding(
                 padding: const EdgeInsets.symmetric(vertical: 20),
-                child: Row(
+                child: SingleChildScrollView(
-                  mainAxisAlignment: MainAxisAlignment.center,
+                  scrollDirection: Axis.horizontal,
-                  children: <Widget>[
+                  child: Row(
-                    DropdownMenu<ColorLabel>(
+                    mainAxisSize: MainAxisSize.min,
-                      initialSelection: ColorLabel.green,
+                    mainAxisAlignment: MainAxisAlignment.center,
-                      controller: colorController,
+                    children: <Widget>[
-                      // requestFocusOnTap is enabled/disabled by platforms when it is null.
+                      DropdownMenu<ColorLabel>(
-                      // On mobile platforms, this is false by default. Setting this to true will
+                        initialSelection: ColorLabel.green,
-                      // trigger focus request on the text field and virtual keyboard will appear
+                        controller: colorController,
-                      // afterward. On desktop platforms however, this defaults to true.
+                        // The default requestFocusOnTap value depends on the platform.
-                      requestFocusOnTap: true,
+                        // On mobile, it defaults to false, and on desktop, it defaults to true.
-                      label: const Text('Color'),
+                        // Setting this to true will trigger a focus request on the text field, and
-                      onSelected: (ColorLabel? color) {
+                        // the virtual keyboard will appear afterward.
-                        setState(() {
+                        requestFocusOnTap: true,
-                          selectedColor = color;
+                        label: const Text('Color'),
-                        });
+                        onSelected: (ColorLabel? color) {
-                      },
+                          setState(() {
-                      dropdownMenuEntries: ColorLabel.entries,
+                            selectedColor = color;
-                    ),
+                          });
-                    const SizedBox(width: 24),
+                        },
-                    DropdownMenu<IconLabel>(
+                        dropdownMenuEntries: ColorLabel.entries,
-                      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) {
+                      const SizedBox(width: 24),
-                        setState(() {
+                      DropdownMenu<IconLabel>(
-                          selectedIcon = icon;
+                        controller: iconController,
-                        });
+                        enableFilter: true,
-                      },
+                        requestFocusOnTap: true,
-                      dropdownMenuEntries: IconLabel.entries,
+                        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(
+                SingleChildScrollView(
-                  mainAxisAlignment: MainAxisAlignment.center,
+                  scrollDirection: Axis.horizontal,
-                  children: <Widget>[
+                  child: Row(
-                    Text('You selected a ${selectedColor?.label} ${selectedIcon?.label}'),
+                    mainAxisSize: MainAxisSize.min,
-                    Padding(
+                    mainAxisAlignment: MainAxisAlignment.center,
-                      padding: const EdgeInsets.symmetric(horizontal: 5),
+                    children: <Widget>[
-                      child: Icon(selectedIcon?.icon, color: selectedColor?.color),
+                      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.'),

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

@@ -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);
+  });
 }