DropdownMenu's example encounters layout error when being putted in small frame (docs page) #162506
Description
Steps to reproduce
- Open DropdownMenu docs page: https://api.flutter.dev/flutter/material/DropdownMenu-class.html (or even in its main docs: https://main-api.flutter.dev/flutter/material/DropdownMenu-class.html)
- Click on Run button at the first/only example and observe RenderFlex overflowed error
This is also reproducible with following steps in local:
- RunDropdownMenu sample code in web target
- Open developer tab (F12) and toggle device toolbar
- Scale app's window size to be smaller as demo video below
Expected results
RenderFlex overflowed error should not appear
Actual results
RenderFlex overflowed appears:
Code sample
Code sample (original official example)
import 'package:collection/collection.dart';
import 'package:flutter/material.dart';
// Flutter code sample for [DropdownMenu]s. The first dropdown menu
// has the default outlined border and demos using the
// [DropdownMenuEntry] style parameter to customize its appearance.
// The second dropdown menu customizes the appearance of the dropdown
// menu's text field with its [InputDecorationTheme] parameter.
void main() {
runApp(const DropdownMenuExample());
}
typedef ColorEntry = DropdownMenuEntry<ColorLabel>;
// DropdownMenuEntry labels and values for the first dropdown menu.
enum ColorLabel {
blue('Blue', Colors.blue),
pink('Pink', Colors.pink),
green('Green', Colors.green),
yellow('Orange', Colors.orange),
grey('Grey', Colors.grey);
const ColorLabel(this.label, this.color);
final String label;
final Color color;
static final List<ColorEntry> entries = UnmodifiableListView<ColorEntry>(
values.map<ColorEntry>(
(ColorLabel color) => ColorEntry(
value: color,
label: color.label,
enabled: color.label != 'Grey',
style: MenuItemButton.styleFrom(
foregroundColor: color.color,
),
),
),
);
}
typedef IconEntry = DropdownMenuEntry<IconLabel>;
// DropdownMenuEntry labels and values for the second dropdown menu.
enum IconLabel {
smile('Smile', Icons.sentiment_satisfied_outlined),
cloud('Cloud', Icons.cloud_outlined),
brush('Brush', Icons.brush_outlined),
heart('Heart', Icons.favorite);
const IconLabel(this.label, this.icon);
final String label;
final IconData icon;
static final List<IconEntry> entries = UnmodifiableListView<IconEntry>(
values.map<IconEntry>(
(IconLabel icon) => IconEntry(
value: icon,
label: icon.label,
leadingIcon: Icon(icon.icon),
),
),
);
}
class DropdownMenuExample extends StatefulWidget {
const DropdownMenuExample({super.key});
@override
State<DropdownMenuExample> createState() => _DropdownMenuExampleState();
}
class _DropdownMenuExampleState extends State<DropdownMenuExample> {
final TextEditingController colorController = TextEditingController();
final TextEditingController iconController = TextEditingController();
ColorLabel? selectedColor;
IconLabel? selectedIcon;
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(
useMaterial3: true,
colorSchemeSeed: Colors.green,
),
home: Scaffold(
body: SafeArea(
child: Column(
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),
),
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,
),
)
],
)
else
const Text('Please select a color and an icon.')
],
),
),
),
);
}
}
Screenshots or Video
Screenshots / Video demonstration
Screen.Recording.2025-01-31.at.16.20.40.mov
Logs
Logs
══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY ╞═════════════════════════════════════════════════════════
The following assertion was thrown during layout:
A RenderFlex overflowed by 69 pixels on the right.
Widget creation tracking is currently disabled. Enabling it enables improved error messages. It can
be enabled by passing `--track-widget-creation` to `flutter run` or `flutter test`.
The overflowing RenderFlex has an orientation of Axis.horizontal.
The edge of the RenderFlex that is overflowing has been marked in the rendering with a yellow and
black striped pattern. This is usually caused by the contents being too big for the RenderFlex.
Consider applying a flex factor (e.g. using an Expanded widget) to force the children of the
RenderFlex to fit within the available space instead of being sized to their natural size.
This is considered an error condition because it indicates that there is content that cannot be
seen. If the content is legitimately bigger than the available space, consider clipping it with a
ClipRect widget before putting it in the flex, or using a scrollable container rather than a Flex,
like a ListView.
The specific RenderFlex in question is: RenderFlex#016b0 relayoutBoundary=up4 OVERFLOWING:
needs compositing
creator: Row ← Padding ← Column ← MediaQuery ← Padding ← SafeArea ← KeyedSubtree-[GlobalKey#15c81] ←
_BodyBuilder ← MediaQuery ← LayoutId-[<_ScaffoldSlot.body>] ← CustomMultiChildLayout ←
_ActionsScope ← ⋯
parentData: offset=Offset(0.0, 20.0) (can use size)
constraints: BoxConstraints(0.0<=w<=265.0, 0.0<=h<=Infinity)
size: Size(265.0, 48.0)
direction: horizontal
mainAxisAlignment: center
mainAxisSize: max
crossAxisAlignment: center
textDirection: ltr
verticalDirection: down
spacing: 0.0
◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤
════════════════════════════════════════════════════════════════════════════════════════════════════Flutter Doctor output
Doctor output
[!] Flutter (Channel master, 3.29.0-1.0.pre.193, on macOS 15.3 24D60 darwin-x64, locale en-VN) [3.6s]
• Flutter version 3.29.0-1.0.pre.193 on channel master at /Users/huynq/Documents/GitHub/flutter_master
! Warning: `flutter` on your path resolves to /Users/huynq/Documents/GitHub/flutter/bin/flutter, which is not inside your current Flutter SDK checkout at /Users/huynq/Documents/GitHub/flutter_master. Consider adding /Users/huynq/Documents/GitHub/flutter_master/bin to the front of your path.
! Warning: `dart` on your path resolves to /Users/huynq/Documents/GitHub/flutter/bin/dart, which is not inside your current Flutter SDK checkout at /Users/huynq/Documents/GitHub/flutter_master. Consider adding /Users/huynq/Documents/GitHub/flutter_master/bin to the front of your path.
• Upstream repository https://github.com/flutter/flutter.git
• Framework revision 157f71d4ad (2 hours ago), 2025-01-31 18:14:54 +1100
• Engine revision 157f71d4ad
• Dart version 3.8.0 (build 3.8.0-24.0.dev)
• DevTools version 2.42.0
• If those were intentional, you can disregard the above warnings; however it is recommended to use "git" directly to perform update checks and upgrades.
[✓] Android toolchain - develop for Android devices (Android SDK version 35.0.1) [8.3s]
• Android SDK at /Users/huynq/Library/Android/sdk
• Platform android-35, build-tools 35.0.1
• ANDROID_SDK_ROOT = /Users/huynq/Library/Android/sdk
• Java binary at: /Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java
This JDK is specified in your Flutter configuration.
To change the current JDK, run: `flutter config --jdk-dir="path/to/jdk"`.
• Java version OpenJDK Runtime Environment (build 21.0.4+-12422083-b607.1)
• All Android licenses accepted.
[✓] Xcode - develop for iOS and macOS (Xcode 16.2) [3.9s]
• Xcode at /Applications/Xcode.app/Contents/Developer
• Build 16C5032a
• CocoaPods version 1.16.2
[✓] Chrome - develop for the web [356ms]
• Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome
[✓] Android Studio (version 2024.3.1) [354ms]
• Android Studio at /Applications/Android Studio Preview.app/Contents
• Flutter plugin can be installed from:
🔨 https://plugins.jetbrains.com/plugin/9212-flutter
• Dart plugin can be installed from:
🔨 https://plugins.jetbrains.com/plugin/6351-dart
• Java version OpenJDK Runtime Environment (build 21.0.5+-12771278-b631.28)
[✓] Android Studio (version 2024.2) [348ms]
• Android Studio at /Applications/Android Studio.app/Contents
• Flutter plugin can be installed from:
🔨 https://plugins.jetbrains.com/plugin/9212-flutter
• Dart plugin can be installed from:
🔨 https://plugins.jetbrains.com/plugin/6351-dart
• android-studio-dir = /Applications/Android Studio.app
• Java version OpenJDK Runtime Environment (build 21.0.4+-12422083-b607.1)
[✓] IntelliJ IDEA Community Edition (version 2024.2.3) [347ms]
• IntelliJ at /Applications/IntelliJ IDEA CE.app
• Flutter plugin version 81.1.3
• Dart plugin version 242.22855.32
[✓] VS Code (version 1.96.4) [51ms]
• VS Code at /Applications/Visual Studio Code.app/Contents
• Flutter extension version 3.102.0
[✓] Connected device (2 available) [9.3s]
• macOS (desktop) • macos • darwin-x64 • macOS 15.3 24D60 darwin-x64
• Chrome (web) • chrome • web-javascript • Google Chrome 132.0.6834.160
! Error: Browsing on the local area network for iPhone. Ensure the device is unlocked and attached with a cable or associated with the same local area network as this Mac.
The device must be opted into Developer Mode to connect wirelessly. (code -27)
[✓] Network resources [1,906ms]
• All expected network resources are available.
! Doctor found issues in 1 category.
Metadata
Metadata
Assignees
Labels
Important issues not at the top of the work listError messages from the Flutter frameworkIssues with https://api.flutter.dev/Sample code and demosflutter/packages/flutter/material repository.Found to occur in 3.29flutter/packages/flutter repository. See also f: labels.The issue has been confirmed reproducible and is ready to work onIssue is closed as already fixed in a newer versionOwned by Design Languages teamTriaged by Design Languages teamA fix is in flight