Блог

Я могу центрировать текстовые элементы, используемые в DropdownMenuItem s, предоставленные для DropDownButton , но как выбранный элемент может быть центрирован, когда меню закрыто?

Это сработало для меня:

 List<String> targetOptions = ['No target', '1', '2', '3', '4']; 



 return DropdownButton<String>(
                        value: target,
                        selectedItemBuilder: (BuildContext context) {
                          return targetOptions.map<Widget>((String item) {
                            return SizedBox(width: 70, child: Center(child: Text(item, style: TextStyle(color: Colors.white))));
                          }).toList();
                        },
                        items: targetOptions.map((String value) {
                          return new DropdownMenuItem<String>(
                            value: value == 'No target' ? '0' : value,
                            child: Center(
                              child: new Text(
                                value,
                                style: TextStyle(color: Colors.white),
                              ),
                            ),
                          );
                        }).toList(),
                        onChanged: (val) {
                          SettingManager.put(SettingManager.SETTING_DAILY_TARGET, val);
                          setState(() {
                            target = val;
                          });
                        },
                      )
  

Что-то вроде этого:

           DropdownMenuItem<int>(
            value: model.id,
            child: SizedBox(
              width: width,
              child: Text(
                model.toString(),
                textAlign: TextAlign.center, //this will do that
              ),
            ),
          )
  

Я использую что-то вроде этого:

 String dropdownValue = 'One';

DropdownButton<String>(
          value: dropdownValue,
          onChanged: (String newValue) {
            setState(() {
              dropdownValue = newValue;
            });
          },
          items: <String>['One', 'Two', 'three', 'Four'].map((item) {
            return DropdownMenuItem<String>(
                value: item,
                child: Builder(builder: (BuildContext context) {
                  final bool isDropDown = context.ancestorStateOfType(TypeMatcher<_MyAppState>()) == null;
                  if (!isDropDown) {
                    return Center(child: Text(item), widthFactor: 2,);
                  } else {
                    return Text(item);
                  }
                },)
            );
          }).toList(),
        ),
  

Вы можете сделать это, обернув свой DropdownMenuItem дочерний Text элемент в a Container и предоставив его width вместе с alignment .

 int _value = 0;

Widget _buildDropdown() {
  return DropdownButton(
    value: _value,
    items: [
      DropdownMenuItem(
        value: 0,
        child: Container(
          child: Text("Zero"),
          width: 200,
          alignment: Alignment.center,
        ),
      ),
      DropdownMenuItem(
        value: 1,
        child: Container(
          child: Text("One"),
          width: 200,
          alignment: Alignment.center,
        ),
      ),
    ],
    onChanged: (value) => setState(() => _value = value),
  );
}