Centering the selected value of a DropdownButton

Question

I am able to center the text items used in DropdownMenuItems provided to the DropDownButton, but how can the selected item be centered when the menu is closed?

Answer 1

This worked for me:

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

Answer 2

Something like this:

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

Answer 3

I am using something like this:

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(),
        ),

Answer 4

You can do that by wrapping your DropdownMenuItem's child Text in a Container and provide it width along with 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),
  );
}