Как стилизовать «выбранный» элемент для DropDownButtonFormField? - PullRequest
1 голос
/ 14 апреля 2020

Выбранный элемент моего DropDownButtonFormField отличается от тех, что в списке элементов.

Вот что я пытаюсь сделать

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);
      },
    );
  }
}

и отображать виджет вот так

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

А вот как это выглядит при выборе enter image description here

и отображение выбора. enter image description here

Мне бы хотелось, чтобы выбранное значение имело тот же экран, что и в раскрывающемся списке, с хорошим интервалом и выравниванием.

1 Ответ

2 голосов
/ 14 апреля 2020

Причина, по которой выбранный вами элемент отличается от вашего раскрывающегося списка, заключается в том, что ширина выбранной строки сжата в выбранном вами поле. Вы можете исправить это, добавив в свой DropdownButtonFormField

isExpanded: true,
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...