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

76 views
Skip to first unread message

Shi Hao Hong

unread,
Oct 22, 2019, 12:43:08 PM10/22/19
to flutter-...@googlegroups.com
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:
first_look.png
New appearance due to enforced alignment:
fixed_look.png

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


--
Google Logo
Shi-Hao Hong
Software Engineer
shiha...@google.com
Reply all
Reply to author
Forward
0 new messages