CODEWITHSUNDEEP
flutterflutter-layout
giorgio79
giorgio79

Reputation: 4189

How to style the "selected" item for a DropDownButtonFormField?

The selected item of my DropDownButtonFormField is different than the ones in the item list.

Here is what I am trying to do

class CurrencyDropDown extends StatefulWidget {
  const CurrencyDropDown({
    Key key,
  }) : super(key: key);

  @override
  _CurrencyDropDownState createState() => _CurrencyDropDownState();
}

class _CurrencyDropDownState extends State<CurrencyDropDown> {
  String selected = "EUR";

  @override
  Widget build(BuildContext context) {
    return DropdownButtonFormField<String>(
      value: selected,
      hint: new Text("Select your currency...", textAlign: TextAlign.center),
      items: ["USD", "EUR", "CHF"]
          .map((label) => DropdownMenuItem(
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceAround,
                  children: <Widget>[
                    Image.asset(
                      'icons/currency/${label.toLowerCase()}.png',
                      package: 'currency_icons',
                      width: 30,
                    ),
                    Text(label),
                  ],
                ),
                value: label,
              ))
          .toList(),
      onChanged: (value) {
        setState(() => selected = value);
      },
    );
  }
}

and displaying the widget like this

      return SingleChildScrollView(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[
            SizedBox(
              height: 30,
              width: 200,
              child: CurrencyDropDown(),
            ),

And here is how it looks when selecting enter image description here

and displaying the selection. enter image description here

I would like the selected value to have the same display like in the dropdown list, with nice spacing and alignment.

Upvotes: 1

Views: 516

Answers (1)

LonelyWolf
LonelyWolf

Reputation: 4392

The reason why your selected item is different to your dropdown is because your row width is condensed in your selected field. You can fix it by adding in your DropdownButtonFormField

isExpanded: true,

Upvotes: 3

Related Questions