颤动删除 DropdownButton 左填充

Question

我一直在努力删除 flutter 的 DropdownButton 左填充，以便它可以匹配下面的 TextField。有人可以帮忙吗？

这是我的代码：

DropdownButton<MenuModel>(
  itemHeight: itemHeight,
  isExpanded: true,
  underline: null,
  value: currentValue,
  hint: Text(placeholder, style: hintStyle),
  style: textStyle,
  disabledHint: Text(currentValue?.label ?? placeholder, style: textStyle),
  onChanged: widget.modalMode ? null : _onChanged,
  items: widget.listMenu.map<DropdownMenuItem<MenuModel>>((MenuModel val) {
    return DropdownMenuItem<MenuModel>(
      child: Text(val.label),
      value: val,
    );
  }).toList(),
)

Answer 1

试试下面的代码希望对你有帮助。参考 Dropdown here。只需将我的小部件更改为您的小部件

创建变量和下拉列表：

var selectedCategory;
    List categoryDropDownList = [
      'One',
      'Two',
      'Three',
      'Four',
    ];

您的小部件：

  DropdownButton(
        isDense: true,
        isExpanded: true,
        hint: Text(
          'Select Category',
          style: TextStyle(
            color: Colors.black,
            fontSize: 15,
          ),
          textAlign: TextAlign.center,
        ),
        value: selectedCategory,
        items: categoryDropDownList.map<DropdownMenuItem<String>>(
          (value) {
            return DropdownMenuItem<String>(
              value: value,
              child: Text(
                value.toString(),
                style: TextStyle(
                  fontSize: 17,
                ),
              ),
            );
          },
        ).toList(),
        onChanged: (var value) {
          setState(
            () {
              selectedCategory = value;
            },
          );
        },
      ),

你的结果屏幕->

Answer 2

终于找到问题所在了。所以它发生了，因为我用 ButtonTheme(alignedDropdown: true)

包装了 DropdownButton

ButtonTheme(
  alignedDropdown: true, // it's the culprit
  child: DropdownButton<MenuModel>(
    itemHeight: itemHeight,
    isExpanded: true,
    underline: null,
    value: currentValue,
    hint: Text(placeholder, style: hintStyle),
    style: textStyle,
    disabledHint: Text(currentValue?.label ?? placeholder, style: textStyle),
    onChanged: widget.modalMode ? null : _onChanged,
    items: widget.listMenu.map<DropdownMenuItem<MenuModel>>((MenuModel val) {
      return DropdownMenuItem<MenuModel>(
        child: Text(val.label),
        value: val,
      );
    }).toList(),
  ),
)

感谢您的帮助。

Answer 3

我尝试使用与您使用的相同的样式，并设法通过以下代码完成了该操作。我希望这对你有用。我附上了屏幕截图以及输出。

Padding(
      padding: const EdgeInsets.only(left: 20.0, right: 20),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          DropdownButton<String>(
            itemHeight: 50,
            isExpanded: true,
            underline: null,
            value: dropdownValue,
            hint: const Text('Honorific', style: TextStyle(color: Colors.grey)),
            icon: const Icon(Icons.arrow_drop_down),
            iconSize: 24,
            elevation: 16,
            style: const TextStyle(color: Colors.deepPurple),
            onChanged: (String? newValue) {
              setState(() {
                dropdownValue = newValue!;
              });
            },
            items: <String>['Honorific']
                .map<DropdownMenuItem<String>>((String value) {
              return DropdownMenuItem<String>(
                value: value,
                child: Text(value),
              );
            }).toList(),
          ),
          TextFormField(
            controller: controller,
            validator: (value) {
              if (value!.isEmpty || !value.contains('@')) {
                return 'Please enter a valid email address';
              }
              return null;
            },
            textInputAction: TextInputAction.next,
            keyboardType: TextInputType.emailAddress,
          ),
        ],
      ),
    ),

output

颤动删除 DropdownButton 左填充

flutter remove DropdownButton left padding

flutter

flutter-layout