Repository navigation
Closed
Labels
P2Important issues not at the top of the work listImportant issues not at the top of the work listfound in release: 3.16Found to occur in 3.16Found to occur in 3.16frameworkflutter/packages/flutter repository. See also f: labels.flutter/packages/flutter repository. See also f: labels.has reproducible stepsThe issue has been confirmed reproducible and is ready to work onThe issue has been confirmed reproducible and is ready to work onp: material_uimaterial_ui package in flutter/packagesmaterial_ui package in flutter/packagesr: fixedIssue is closed as already fixed in a newer versionIssue is closed as already fixed in a newer versionteam-designOwned by Design Languages teamOwned by Design Languages teamtriaged-designTriaged by Design Languages teamTriaged by Design Languages team
Description
Is there an existing issue for this?
- I have searched the existing issues
- I have read the guide to filing a bug
Steps to reproduce
Details
import 'package:flutter/material.dart';
/// Flutter code sample for [DropdownMenu]s. The first dropdown menu has an outlined border.
void main() => runApp(const DropdownMenuExample());
class DropdownMenuExample extends StatefulWidget {
const DropdownMenuExample({super.key});
@override
State<DropdownMenuExample> createState() => _DropdownMenuExampleState();
}
class _DropdownMenuExampleState extends State<DropdownMenuExample> {
final TextEditingController colorController = TextEditingController();
ColorLabel? selectedColor;
@override
Widget build(BuildContext context) {
final List<DropdownMenuEntry<ColorLabel>> colorEntries =
<DropdownMenuEntry<ColorLabel>>[];
for (final ColorLabel color in ColorLabel.values) {
colorEntries.add(
DropdownMenuEntry<ColorLabel>(
value: color, label: color.label, enabled: color.label != 'Grey'),
);
}
final List<DropdownMenuEntry<IconLabel>> iconEntries =
<DropdownMenuEntry<IconLabel>>[];
for (final IconLabel icon in IconLabel.values) {
iconEntries
.add(DropdownMenuEntry<IconLabel>(value: icon, label: icon.label));
}
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>(
controller: colorController,
label: const Text('A long label'),
dropdownMenuEntries: colorEntries,
onSelected: (ColorLabel? color) {
setState(() {
selectedColor = color;
});
},
),
],
),
),
],
),
),
),
);
}
}
enum ColorLabel {
blue('Blue', Colors.blue),
pink('Pink', Colors.pink),
green('Green', Colors.green),
yellow('Yellow', Colors.yellow),
grey('Grey', Colors.grey);
const ColorLabel(this.label, this.color);
final String label;
final Color color;
}
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;
}
run the app and the label gets split into two lines which is by default a bit ugly.

Not sure if this is by design or should the default width calculate by not only the longest item but also take label into account
Actual results
The dropdown should have the same length as the label.
Logs
Logs
<!-- Paste your logs here -->
Flutter Doctor output
Doctor output
<!-- Paste your output here -->
Reacted by Jan Ochwat and Mendel Greenberg
Metadata
Metadata
Assignees
Labels
P2Important issues not at the top of the work listImportant issues not at the top of the work listfound in release: 3.16Found to occur in 3.16Found to occur in 3.16frameworkflutter/packages/flutter repository. See also f: labels.flutter/packages/flutter repository. See also f: labels.has reproducible stepsThe issue has been confirmed reproducible and is ready to work onThe issue has been confirmed reproducible and is ready to work onp: material_uimaterial_ui package in flutter/packagesmaterial_ui package in flutter/packagesr: fixedIssue is closed as already fixed in a newer versionIssue is closed as already fixed in a newer versionteam-designOwned by Design Languages teamOwned by Design Languages teamtriaged-designTriaged by Design Languages teamTriaged by Design Languages team
Type
Projects
- StatusShow more project fieldsDone (PR merged)
Activity
TahaTesser commentedon Oct 17, 2023
In Flutter,

DropdownMenuuses aTextField insidewhich adds ellipsis when a long label is providedBut I have tested in Jetpack Compose, it expands the text field width when a long label is provided
flutter-triage-bot commentedon Feb 21, 2024
This issue is assigned to @QuncCccccc but has had no recent status updates. Please consider unassigning this issue if it is not going to be addressed in the near future. This allows people to have a clearer picture of what work is actually planned. Thanks!
flutter-triage-bot commentedon May 14, 2024
This issue was assigned to @QuncCccccc but has had no status updates in a long time. To remove any ambiguity about whether the issue is being worked on, the assignee was removed.
3 remaining items
Fix DropdownMenu default width does not take label into account (#161219
github-actions commentedon Feb 27, 2025
This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of
flutter doctor -vand a minimal reproduction of the issue.