CODEWITHSUNDEEP
flutterwidgetflutter-layoutdropdownbutton
Uday
Uday

Reputation: 1719

How to give a constant width to a Flutter DropdownButton widget?

How can I give a constant width to a DropDownButton in a Flutter?

As I got to know why they both DropDownButton as different width size in below image, as 1st one as the highest length of value "100%" in it & the 2nd one as highest value as "90%" in it, so there is a difference in the length of the string so it wrapping accordingly.

I want to give a fixed width for them so that they look the same.

Row(
    mainAxisAlignment: MainAxisAlignment.spaceBetween,
    crossAxisAlignment: CrossAxisAlignment.center,
    children: <Widget>[
      Text(title,
          style: Theme.textTheme.body1
              .copyWith(fontWeight: ThemeData.medium)),
      DropdownButton(
        disabledHint: Text(defaultValue),
        value: currentDropDownItem,
        items: dropDownItemList,
        onChanged: isEnabled
            ? (value) {
                if (onValueChanged != null) {
                  onValueChanged(value);
                }
              }
            : null,
      ),
    ])

enter image description here

Upvotes: 0

Views: 175

Answers (1)

Kavin-K
Kavin-K

Reputation: 2117

Wrap it inside a Container or SizedBox with width as,

new Container(
   width: 75.0,
   child: //your DropdownButton here
),

or you can use Expanded inside a Row,

Row(
    mainAxisAlignment: MainAxisAlignment.spaceBetween,
    crossAxisAlignment: CrossAxisAlignment.center,
    children: <Widget>[
        Expanded(
            flex: 5,
            child: Text(
                title,
                style: Theme.textTheme.body1
                  .copyWith(fontWeight: ThemeData.medium),
            ),
        ),
        Expanded(
            flex: 1,
            child: DropdownButton(
                disabledHint: Text(defaultValue),
                value: currentDropDownItem,
                items: dropDownItemList,
                onChanged: isEnabled
                    ? (value) {
                        if (onValueChanged != null) {
                            onValueChanged(value);
                        }
                    }
                    : null,
            ),
        ),
    ],
),

Hope it might be helpful.

Upvotes: 1

Related Questions