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

Good question. It is just a question I wanted to ask. – Dev Conductor Aug 10 '23 at 14:43 — Dev Conductor, Aug 10 '23 at 14:43

score 7 · Accepted Answer · answered Nov 19 '21 at 06:49

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:

Very helpful. Thank you. – Dev Conductor Aug 10 '23 at 14:42 — Dev Conductor, Aug 10 '23 at 14:42

score 1 · Answer 2 · edited Nov 19 '21 at 08:58

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

edited Nov 19 '21 at 08:58

Muhammad Hussain

966
4
15

answered Nov 19 '21 at 07:05

Ravindra S. Patil

11,757
3
13
40

thank you too, what does `InputDecoration(border: OutlineInputBorder()),` and `isDense: true` do – RenSword Nov 19 '21 at 07:18
1

@RenSword The `InputDecoration` is used for border, labels, icons, and styles of the text fields and other things and 'isDense' means it reduce or remove the button height. you can refer `InputDecoration` [here](https://api.flutter.dev/flutter/material/InputDecoration-class.html) and Dropdown `isDense` also [here](https://api.flutter.dev/flutter/material/DropdownButton-class.html) – Ravindra S. Patil Nov 19 '21 at 07:25

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

2 Answers2