Flutter：如何最小化DropdownButton的宽度

Question

Flutter中的DropdownButton根据其具有的最大DropdownMenuItem设置其宽度。如果选择了一个小项目，则该项目和箭头之间会留有很多空白。如何使按钮缩放为刚好适合所选项目的宽度？

我尝试使用Expanded和一些Flexible的东西，但我仍然无法改变宽度。

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

我试图摆脱hint和箭头之间加下划线的空格：

Answer 1

您可以尝试将其包装在ButtonTheme中并设置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 2

这有效：

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 3

如果我正确理解了您的问题，那么我也遇到了问题，并且有解决方案。只需将Wrap小部件作为DropdownButton的父级即可。它将使下拉菜单自动换成该值的大小（不过不确定该如何对空值做出反应）

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

Answer 4

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