How can i change the width/padding of a Flutter DropdownMenuItem in a DropdownButton?

Question

How can we change the width/padding of a Flutter DropdownMenuItem in a Dropdown?

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,
    )
  ],
)

Answer 1

You can control the width/padding of a Flutter DropdownMenuItems in a DropdownButton by wrapping it inside a Container widget. Then simply assign height, width and padding to that Container widget.

Example is given below:

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
              ),
            )
        ),
      ),
    );
  }

Outputs:

With horizontal padding 50, given inside the Container widget:

Hope this helps!!

Answer 2

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(...),
)