Flutter：如何最小化 DropdownButton 的宽度

Question

The DropdownButton in Flutter sets its width based on the largest DropdownMenuItem from the items it has. That leaves a lot of white space between the item and the arrow if a small item is selected. How do I make the button scale to just fit the selected item's width?

I tried using Expanded , some Flexible stuff and I still can't make it change its width.

DropdownButton(
    value: null,
    hint: Text("Small text"),
    items: ..., //Text widgets that have more text and are larger than the hint
)

I am trying to get rid of that space underlined between the hint and the arrow:

Answer 1

Wrap Dropdown button with ButtonTheme and add alignedDropdown = true like:

ButtonTheme(
  alignedDropdown: true,
  child: DropdownButton(...),
)

alignedDropdown will match the menu items' width with buttons. Then we need specific width, so wrap ButtonTheme with SizedBox or Container:

SizedBox(
  width: 25, // Your width for dropdowns
  child: ButtonTheme(...),
)

Answer 2

You could try wrapping it in a ButtonTheme and setting alignedDropdown: true

return Container(
    width: 300.0,
    child: DropdownButtonHideUnderline(
      child: ButtonTheme(
        alignedDropdown: true,
          child: DropdownButton(
            value: null,
            hint: Text("Small text"),
            items: ..., //Text widgets that have more text and are larger than the hint
            onChanged: onChanged,
            style: Theme.of(context).textTheme.title,
         ),
      ),
    ),
);

Answer 3

this works:

new Container(
            padding: const EdgeInsets.fromLTRB(10.0, 5, 10, 0),
            child: new Container(
              padding: const EdgeInsets.fromLTRB(10, 5, 5, 5),
              decoration: new BoxDecoration(
                  color: Colors.white,
                  borderRadius: new BorderRadius.only(
                      topLeft: const Radius.circular(5.0),
                      bottomLeft: const Radius.circular(5.0),
                      bottomRight: const Radius.circular(5.0),
                      topRight: const Radius.circular(5.0))),
              child: new Center(
                  child: new Column(children: [
                new DropdownButton(
                  underline: Text(''),
                  icon: Icon(Icons.keyboard_arrow_down),
                  hint: new Text('Small text'),
                  style: TextStyle(
                    color: Colors.white30,
                  ),
                  isExpanded: true,
                  value: _selectedLocation,
                  onChanged: (String newValue) {
                    setState(() {
                      _selectedLocation = newValue;
                    });
                  },
                  items: _locations.map((String location) {
                    return new DropdownMenuItem<String>(
                      value: location,
                      child: new Text(
                        location,
                        style: TextStyle(
                            color: myColour, fontWeight: FontWeight.bold),
                      ),
                    );
                  }).toList(),
                ),
              ])),
            ))

Answer 4

If I understand your problem correctly then I have also encountered it and I have a solution. Simply make a Wrap widget as the parent of your DropdownButton. It will make the dropdown menu wrap to the size of the value (not sure how it would react with the null value though)

Wrap(children: <Widget>[DropdownButton(
value: null,
hint: Text("Small text"),
items: //Text widgets that have more text and are larger than the hint
)])

Answer 5

到目前为止，我能够做到的方式是限制下拉列表中项目的宽度。

Answer 6

The width is actually determined by the widest item provided by the selectedItemBuilder argument (which uses the items if not defined). With this little trick I managed to have it working:

    DropdownButton<T>(
      value: value,
      selectedItemBuilder: (ctx) => [for (final item in items) value], 
      items: items,
      onChanged: (value) => ... update value

The selectedItemBuilder in the example produces a list of repeated items (the one corresponding to the selected value). You will need a stateful widget to handle the value.

Answer 7

to remove under line warp Dropdown with DropdownButtonHideUnderline

Answer 8

I managed to remove the whitespace by defining alignment: Alignment.centerRight . By default, alignment is set to Alignment.centerStart which forces the Text to align start while the Icon is set to align end. So by aligning the text center right it fills the whitespace that appears between the text and icon. Full Code Sample:

DropdownButton(
    alignment: Alignment.centerRight,
    child: .....
     )