Skip to content

DropdownMenu default width does not take label into account. #136678

Closed

Description

@chunhtai

Is there an existing issue for this?

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.
image

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 -->

Activity

  1. added
    frameworkflutter/packages/flutter repository. See also f: labels.
    p: material_uimaterial_ui package in flutter/packages
    team-designOwned by Design Languages team
    on Oct 16, 2023
  2. TahaTesser commented on Oct 17, 2023

    @TahaTesser
    Contributor

    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

    In Flutter, DropdownMenu uses a TextField inside which adds ellipsis when a long label is provided
    Screenshot 2023-10-17 at 13 14 34

    But I have tested in Jetpack Compose, it expands the text field width when a long label is provided

    Screenshot 2023-10-17 at 13 18 32

  3. added
    P2Important issues not at the top of the work list
    triaged-designTriaged by Design Languages team
    on Oct 18, 2023
  4. added
    ⏳Bot is counting down the days until it unassigns the issue
    on Feb 21, 2024
  5. flutter-triage-bot commented on Feb 21, 2024

    @flutter-triage-bot

    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!

  6. flutter-triage-bot commented on May 14, 2024

    @flutter-triage-bot

    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.

  7. removed
    ⏳Bot is counting down the days until it unassigns the issue
    on May 14, 2024
  8. 3 remaining items

  9. moved this from To do to In progress in Nevercodeon Sep 30, 2024
  10. removed their assignment
    on Oct 2, 2024
  11. self-assigned this
    on Oct 14, 2024
  12. moved this from To do to In progress in Nevercodeon Dec 19, 2024
  13. moved this from In progress to PR submitted in Nevercodeon Jan 9, 2025
  14. moved this from PR submitted to Done (PR merged) in Nevercodeon Feb 13, 2025
  15. added
    r: fixedIssue is closed as already fixed in a newer version
    on Feb 13, 2025
  16. github-actions commented on Feb 27, 2025

    @github-actions

    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 -v and a minimal reproduction of the issue.

  17. locked as resolved and limited conversation to collaborators on Feb 27, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

Labels

P2Important issues not at the top of the work listfound in release: 3.16Found to occur in 3.16frameworkflutter/packages/flutter repository. See also f: labels.has reproducible stepsThe issue has been confirmed reproducible and is ready to work onp: material_uimaterial_ui package in flutter/packagesr: fixedIssue is closed as already fixed in a newer versionteam-designOwned by Design Languages teamtriaged-designTriaged by Design Languages team

Type

No type

Projects

  • Status
    Done (PR merged)

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions