How to increase white space in between the text and the arrow in a DropdownButton in flutter?

Question

DropdownButton(
  value: dropDownValue1,
  onChanged: (String? newValue) {
    setState(() {
      dropDownValue1 = newValue!;
    });
  },
  items: <String>[
    'Work At Office',
    'Work From Home',
  ].map<DropdownMenuItem<String>>((String value) {
    return DropdownMenuItem<String>(
      value: value,
      child: Text(value),
    );
  }).toList(),
)

how to increase space between the arrow and the text

I hope I can make it be like this, how to do it?

Thanks in advance

Answer 1

Try below code hope its helpful to you. refer my answer here also

Declare one variable for dropdown:

var dropdownValue = 'Work At Office';

Your widget

InputDecorator(
      decoration: const InputDecoration(border: OutlineInputBorder()),
      child: DropdownButtonHideUnderline(
        child: DropdownButton<String>(
          value: dropdownValue,
          isDense: true,
          isExpanded: true,
          onChanged: (String? newValue) {
            setState(() {
              dropdownValue = newValue!;
            });
          },
          items: <String>[
            'Work At Office',
            'Work From Home',
          ].map<DropdownMenuItem<String>>((String value) {
            return DropdownMenuItem<String>(
              value: value,
              child: Text(value),
            );
          }).toList(),
        ),
      ),
    ),

Answer 2

Just add isExpanded: true, under the dropdown for expanding icon

DropdownButton(
  isExpanded: true, // here need to change
  value: dropDownValue1,
  onChanged: (String? newValue) {
    setState(() {
      dropDownValue1 = newValue!;
    });
  },
  items: <String>[
    'Work At Office',
    'Work From Home',
  ].map<DropdownMenuItem<String>>((String value) {
    return DropdownMenuItem<String>(
      value: value,
      child: Text(value),
    );
  }).toList(),
)

Output: