Question 183187 in Flutter Question posted in
The official Flutter documentation can be found here.

Flutter – Remove default padding from DropdownButtonFormField2 and resize the width

I have this dropdown list and I want a few things changed, but have no clue how to do so.

  1. I want the width of the dropdown to equal the width of the container above. As you can see in the example I provided above, it is not equal and that looks really bad.
  2. There is way too much padding in the dropdown options right now. I need everything to be compressed to minimum padding so I can specify the padding I want

Here is my code for the Dropdown FormField, and here is a screenshot

Thanks!

                Container(
                  width: size.width * .9,
                  child: DropdownButtonFormField2(
                    decoration: InputDecoration(
                      border: UnderlineInputBorder(),
                      labelText: 'Muscle',
                      filled: true,
                      isDense: true,
                      fillColor: Colors.white24,
                      hintStyle: TextStyle(color: Colors.green),
                      focusedBorder: UnderlineInputBorder(
                        borderSide: BorderSide(color: Colors.white),
                      ),
                    ),
                    style: TextStyle(color: Colors.black),
                    value: selectedMuscleGroup,
                    onChanged: (String? newValue) {
                      setState(() {
                        selectedMuscleGroup = newValue;
                      });
                    },
                    items: <String>[
                      'Biceps',
                      'Triceps',
                      'Chest',
                      'Back',
                      'Legs',
                      'Shoulders'
                    ].map<DropdownMenuItem<String>>((String value) {
                      return DropdownMenuItem<String>(
                        value: value,
                        child: Container(
                            padding: EdgeInsets.zero, child: Text(value)),
                      );
                    }).toList(),
                  ),
                ),

Thank you so much in advance!!

Tags:

2

Answers


  1. 0

    Wrap your DropdownButtonFormField in a ButtonTheme widget, and set the alignedDropdown: true property of the ButtonTheme widget.

    Login or Signup to reply.
  2. 0

    DropdownButtonFormField2 provides flexible options to customize.

    To Manage Padding:
    Overall dropdownPadding can be set via dropdownStyleData and
    Specific menu padding can be set via menuItemStyleData

    To Control Width:
    There is width property and offset to set overall width of dropdown padding and its position in dropdownStyleData.

    Example for your case,

    Code:

    Container(
      color: Colors.white,
      width: 250,
      child: DropdownButtonFormField2(
        decoration: const InputDecoration(
          border: UnderlineInputBorder(),
          labelText: 'Muscle',
          hintStyle: TextStyle(color: Colors.green),
          focusedBorder: UnderlineInputBorder(
            borderSide: BorderSide(color: Colors.white),
          ),
        ),
        style: const TextStyle(color: Colors.black),
        dropdownStyleData: const DropdownStyleData(
          width: 250.0,
          padding: EdgeInsets.all(0.0)
        ),
        menuItemStyleData: const MenuItemStyleData(
          padding: EdgeInsets.all(0.0),
          height: 36.0,
        ),
        value: selectedMuscleGroup,
        onChanged: (String? newValue) {
          setState(() {
            selectedMuscleGroup = newValue;
          });
        },
        items: <String>['Biceps', 'Triceps', 'Chest', 'Back', 'Legs', 'Shoulders']
            .map<DropdownMenuItem<String>>((String value) {
          return DropdownMenuItem<String>(
            value: value,
            child: Text(value),
          );
        }).toList(),
      ),
    );

    Output:

    output

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search