[Breaking change] Making DropdownButton's hint behavior more consistent

[Shi Hao Hong]

Hello Flutter developers,

Currently, when a hint is displayed for DropdownMenuButton, the hint and the disabled hint are inconsistently aligned and constrained. I plan on making a breaking change PR that would fix two distinct situations:

1. When hint != null and selectedItemBuilder == null:

In this scenario, the hint widget is not wrapped with the correct constraints provided by DropdownMenuItem<Widget>. This leads to potential inconsistencies in the sizing of the button, as DropdownMenuItem provides alignment and enforces a minimum height constraint on the menu items and the disabled hint. This change forces the hint widget to adhere to the same constraints.

Code:

DropdownButton<String>(

  hint: Text('hint'),

  items: items.map<DropdownMenuItem<String>>((String item) {

    return DropdownMenuItem<String>(

      value: item,

      child: Text(item),

    );

  }).toList(),

// rest of params

),

Original appearance:

New appearance due to enforced alignment:

However, if you would like to retain the original hint look, selectedItemBuilder could be used to keep the items the way they were:

DropdownButton<String>(

  hint: Text('hint'),

  items: items.map<DropdownMenuItem<String>>((String item) {

    return DropdownMenuItem<String>(

      value: item,

      child: Text(item),

    );

  }).toList(),

  selectedItemBuilder: (BuildContext context) { // new block of code

    return items.map<Widget>((String item) {

      return DropdownMenuItem<String>(

        value: item,

        child: Text(item),

      );

    }).toList();

  },

// rest of params

),

2. When selectedItemBuilder != null

Since selectedItemBuilder was designed for flexibility in mind (displaying a value distinct from what is passed into DropdownButton.items), hint and disabledHint should not have to adhere to the default constraints of DropdownMenuItem, but they do. Now, hint and disabledHint are no longer forced to have the alignment and minimum sizes provided by DropdownMenuItem.

If you would like to retain the original looks in this case, simply wrap the preexisting hint and disabledHint widgets with a DropdownMenuItem. For example:

hint: DropdownMenuItem(

  child: OriginalHintWidget(),

),

Please do not hesitate to reach out to me if you need any help with migrating this behavior. Also, please comment on the GitHub PR if there if you have any questions or concerns. Thank you and have a great day! 

Best,

Shi-Hao

--

Shi-Hao Hong Software Engineer shiha...@google.com