如何在 Flutter DropdownButton 中改变 DropdownMenuItem 的宽度/内边距？

Question

我们如何更改Flutter Dropdown中DropdownMenuItem的宽度/填充？

Row(
  children: <Widget>[
    Expanded(
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          LightText(
            text: "Agent",
          ),
          Padding(
            padding: EdgeInsets.only(top: 3),
          ),
          Container(
            height: 27,
            child: Row(
              children: <Widget>[
                DropdownButtonHideUnderline(
                  child: DropdownButton<Agent>(
                    // isExpanded: true,
                    hint: Text(
                      agentName == null ? "" : agentName,
                      style: TextStyle(
                        fontSize: MediaQuery.of(context).size.width * 0.035,
                      ),
                    ),

                    value: selectedAgent,
                    onChanged: (Agent value) async {
                      selectedAgent = value;
                      agentName = selectedAgent.getAgentName();
                      agentId = selectedAgent.getAgentId();
                    },
                    items: agentList.map((Agent agent) {
                      return DropdownMenuItem<Agent>(
                        value: agent,
                        child: SizedBox(
                          width: 25.0,
                          child: LightText(
                            text: agent.name,
                            textColor: Colors.black,
                          ),
                        ),
                      );
                    }).toList(),
                  ),
                ),
              ],
            ),
            decoration: ShapeDecoration(
              shape: RoundedRectangleBorder(
                side: BorderSide(width: 1.0, color: lightGrey),
                borderRadius: BorderRadius.all(Radius.circular(3.0)),
              ),
            ),
          ),
        ],
      ),
    ),
    SizedBox(
      width: 30,
    ),
    TextBoxData(
      labelText: "% Commission",
      controllerText: percentageCommision,
      enableVal: true,
      borderColor: lightGrey,
    )
  ],
)

- Parth Bhanderi

---

如果您的问题已经解决，请关闭问题：https://stackoverflow.com/help/someone-answers - Mehmet Esen

Answer 1

使用ButtonTheme包装下拉按钮并添加alignedDropdown = true，例如：

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

alignedDropdown将使菜单项的宽度与按钮匹配。然后我们需要特定的宽度，因此使用SizedBox或Container包装ButtonTheme：

alignedDropdown会让下拉菜单的宽度与按钮一致。如果需要特定的宽度，可以将ButtonTheme包装在SizedBox或Container中：

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

- Mehmet Esen

---

我尝试过许多种方法，但这一种是以非常经典的方式实现的。 - amit.flutter

如果有人遇到和我一样的问题。ButtonTheme 包装的是 DropdownButtonFormField 而不是 DropdownMenuItem。 - nck

Answer 2

您可以通过将Flutter DropdownMenuItems放在Container小部件中来控制DropdownButton中的宽度/填充。 然后，只需为该Container小部件分配高度、宽度和填充即可。

以下是示例：

Widget dropDownButtonsColumn(List<String> list, String hint){
    return Padding(
      padding: const EdgeInsets.only(left: 40, right: 40 , bottom: 24,top:12),
      child: Container(
        height: 55,  //gives the height of the dropdown button
        width: MediaQuery.of(context).size.width, //gives the width of the dropdown button
        decoration: BoxDecoration(
            borderRadius: BorderRadius.all(Radius.circular(3)),
          color: Color(0xFFF2F2F2)
        ),
        // padding: const EdgeInsets.symmetric(horizontal: 13), //you can include padding to control the menu items
        child: Theme(
            data: Theme.of(context).copyWith(
              canvasColor: Colors.yellowAccent, // background color for the dropdown items
              buttonTheme: ButtonTheme.of(context).copyWith(
                alignedDropdown: true,  //If false (the default), then the dropdown's menu will be wider than its button.
              )
            ),
            child: DropdownButtonHideUnderline(  // to hide the default underline of the dropdown button
              child: DropdownButton<String>(
                iconEnabledColor: Color(0xFF595959),  // icon color of the dropdown button
                items: list.map((String value){
                  return DropdownMenuItem<String>(
                    value: value,
                    child: Text(value,
                      style: TextStyle(
                          fontSize: 15
                      ),
                    ),
                  );
                }).toList(),
                hint: Text(hint,style: TextStyle(color: Color(0xFF8B8B8B),fontSize: 15),),  // setting hint
                onChanged: (String value){
                  setState(() {
                    bankSelected = value;  // saving the selected value
                  });
                },
                value: bankSelected,  // displaying the selected value
              ),
            )
        ),
      ),
    );
  }

输出结果：

在 Container 组件中设置水平内边距为 50：

希望这些内容能够帮助你！

- Syangden DT

---

如果我们只想更改DropdownMenuItem的宽度而不是整个DropdownButton怎么办？例如，如果我想要DropdownMenuItems的宽度比DropdownButton更大。在我的情况下，DropdownButton的宽度约为70-80像素，但我的MenuItems内容更长。这种情况下，会出现RenderFlexOverflow异常。我想扩展DropdownMenuItem的宽度而不是DropdownButton的宽度。 - Teh Sunn Liu