CODEWITHSUNDEEP
flutterflutter-layout
Taufik Nur Rahmanda
Taufik Nur Rahmanda

Reputation: 1969

flutter remove DropdownButton left padding

I've struggled to remove flutter's DropdownButton left padding so it can match the TextField below. Anyone can help?

Here's my code:

DropdownButton<MenuModel>(
  itemHeight: itemHeight,
  isExpanded: true,
  underline: null,
  value: currentValue,
  hint: Text(placeholder, style: hintStyle),
  style: textStyle,
  disabledHint: Text(currentValue?.label ?? placeholder, style: textStyle),
  onChanged: widget.modalMode ? null : _onChanged,
  items: widget.listMenu.map<DropdownMenuItem<MenuModel>>((MenuModel val) {
    return DropdownMenuItem<MenuModel>(
      child: Text(val.label),
      value: val,
    );
  }).toList(),
)

enter image description here

Upvotes: 1

Views: 3543

Answers (3)

Lavi Kashyap
Lavi Kashyap

Reputation: 21

I have tried to use the same style as you are using and managed to get that done with the following code. I hope that works for you. I am attaching the screenshot as well of the output.

Padding(
      padding: const EdgeInsets.only(left: 20.0, right: 20),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          DropdownButton<String>(
            itemHeight: 50,
            isExpanded: true,
            underline: null,
            value: dropdownValue,
            hint: const Text('Honorific', style: TextStyle(color: Colors.grey)),
            icon: const Icon(Icons.arrow_drop_down),
            iconSize: 24,
            elevation: 16,
            style: const TextStyle(color: Colors.deepPurple),
            onChanged: (String? newValue) {
              setState(() {
                dropdownValue = newValue!;
              });
            },
            items: <String>['Honorific']
                .map<DropdownMenuItem<String>>((String value) {
              return DropdownMenuItem<String>(
                value: value,
                child: Text(value),
              );
            }).toList(),
          ),
          TextFormField(
            controller: controller,
            validator: (value) {
              if (value!.isEmpty || !value.contains('@')) {
                return 'Please enter a valid email address';
              }
              return null;
            },
            textInputAction: TextInputAction.next,
            keyboardType: TextInputType.emailAddress,
          ),
        ],
      ),
    ),

output

Upvotes: 0

Taufik Nur Rahmanda
Taufik Nur Rahmanda

Reputation: 1969

finally I've found the problem. So it happen because I wrapped the DropdownButton with ButtonTheme(alignedDropdown: true)

ButtonTheme(
  alignedDropdown: true, // it's the culprit
  child: DropdownButton<MenuModel>(
    itemHeight: itemHeight,
    isExpanded: true,
    underline: null,
    value: currentValue,
    hint: Text(placeholder, style: hintStyle),
    style: textStyle,
    disabledHint: Text(currentValue?.label ?? placeholder, style: textStyle),
    onChanged: widget.modalMode ? null : _onChanged,
    items: widget.listMenu.map<DropdownMenuItem<MenuModel>>((MenuModel val) {
      return DropdownMenuItem<MenuModel>(
        child: Text(val.label),
        value: val,
      );
    }).toList(),
  ),
)

Thanks for the help.

Upvotes: 3

Ravindra S. Patil
Ravindra S. Patil

Reputation: 14775

Try below code hope its helpful to you. refer Dropdown here. just change my widget to your widgets

Create variable and List of dropdown:

var selectedCategory;
    List categoryDropDownList = [
      'One',
      'Two',
      'Three',
      'Four',
    ];

Your Widget:

  DropdownButton(
        isDense: true,
        isExpanded: true,
        hint: Text(
          'Select Category',
          style: TextStyle(
            color: Colors.black,
            fontSize: 15,
          ),
          textAlign: TextAlign.center,
        ),
        value: selectedCategory,
        items: categoryDropDownList.map<DropdownMenuItem<String>>(
          (value) {
            return DropdownMenuItem<String>(
              value: value,
              child: Text(
                value.toString(),
                style: TextStyle(
                  fontSize: 17,
                ),
              ),
            );
          },
        ).toList(),
        onChanged: (var value) {
          setState(
            () {
              selectedCategory = value;
            },
          );
        },
      ),

Your result Screen-> image

Upvotes: 1

Related Questions