如何自定义Flutter DropdownButton外观使其匹配文本输入框样式？

我希望通过以下调整让下拉框样式与文本输入框一致：

• 移除黄色框内的底线
• 缩进“Use Email”使其与“Email Address”左对齐
• 使下拉框与文本框尺寸相同（默认尺寸）
• 将下拉箭头放置在下拉框右侧附近
• 添加边框

现有代码 #

Container(
  width: double.infinity,
  decoration: BoxDecoration(
    color: Colors.yellow[600],
    borderRadius: BorderRadius.circular(4),
  ),
child: DropdownButton(
  value: DropDownValue,
  icon: const Icon(Icons.keyboard_arrow_down),
  items: DropDownItems.map((String DropDownItems) {
    return DropdownMenuItem(
      value: DropDownItems,
      child: Text(DropDownItems),
    );
  }).toList(),
  onChanged: (String? newValue) {
    setState(() {
      DropDownValue = newValue!;
      if (DropDownValue == 'Use Email') {
        RegisterType = 'Email';
      } else {
        RegisterType = 'Mobile';
      }
    });
  },
),
),
SizedBox(height: 10),
TextField(
  decoration: InputDecoration(
      border: OutlineInputBorder(), labelText: RegisterType),
  controller: _EmailAddressController,
),

解决方案 #

改用DropdownButtonFormField能更便捷地匹配TextField的样式，调整后的代码如下：

Container(
  width: double.infinity,
  child: DropdownButtonFormField<String>(
    value: DropDownValue,
    // 配置和TextField一致的输入装饰
    decoration: InputDecoration(
      border: OutlineInputBorder(),
      contentPadding: EdgeInsets.symmetric(horizontal: 16, vertical: 14),
    ),
    icon: const Icon(Icons.keyboard_arrow_down),
    iconSize: 24,
    isExpanded: true, // 让下拉框占满容器宽度，箭头自动靠右
    underline: SizedBox(), // 移除默认底线
    items: DropDownItems.map((String item) {
      return DropdownMenuItem(
        value: item,
        child: Text(item), // 若需更精确缩进，可给Text套Padding调整left值
      );
    }).toList(),
    onChanged: (String? newValue) {
      setState(() {
        DropDownValue = newValue!;
        RegisterType = newValue == 'Use Email' ? 'Email' : 'Mobile';
      });
    },
  ),
),
SizedBox(height: 10),
TextField(
  decoration: InputDecoration(
      border: OutlineInputBorder(), labelText: RegisterType),
  controller: _EmailAddressController,
),

对应需求的调整说明：

1. 移除底线：通过underline: SizedBox()完全清除默认底线组件
2. 文本对齐：默认状态下DropdownMenuItem的文本与TextField输入文本对齐，若有偏差可给Text添加Padding(left: 8)这类微调
3. 匹配尺寸：InputDecoration的contentPadding设置为TextField默认内边距，isExpanded: true确保宽度一致
4. 箭头靠右：isExpanded: true自动将下拉箭头定位到容器最右侧
5. 添加边框：InputDecoration的border: OutlineInputBorder()实现与TextField完全一致的边框样式

内容的提问来源于stack exchange，提问作者Tony Lam