Flutter中如何为TextFormField/DropdownButton设置特定边框？

优化后的实现方案 #

针对你需要的「外层灰色圆角边框+左侧红色高亮条」样式，可通过简化布局层级实现更精准的效果：

DropdownButtonFormField 版本

Container(
  width: 300,
  decoration: BoxDecoration(
    border: Border.all(
      color: const Color.fromRGBO(197, 197, 197, 1),
      width: 1,
    ),
    borderRadius: BorderRadius.circular(10),
  ),
  child: ClipRRect(
    borderRadius: BorderRadius.circular(10),
    child: Row(
      children: [
        // 左侧红色高亮条
        Container(
          width: 3,
          color: Colors.red,
          height: double.infinity,
        ),
        Expanded(
          child: DropdownButtonFormField(
            decoration: const InputDecoration(
              border: InputBorder.none,
              contentPadding: EdgeInsets.symmetric(horizontal: 8, vertical: 5),
            ),
            // 自定义下拉选项
            items: const [
              DropdownMenuItem(child: Text("选项1"), value: "1"),
              DropdownMenuItem(child: Text("选项2"), value: "2"),
            ],
            onChanged: (value) {},
          ),
        ),
      ],
    ),
  ),
)

TextFormField 版本

Container(
  width: 300,
  decoration: BoxDecoration(
    border: Border.all(
      color: const Color.fromRGBO(197, 197, 197, 1),
      width: 1,
    ),
    borderRadius: BorderRadius.circular(10),
  ),
  child: ClipRRect(
    borderRadius: BorderRadius.circular(10),
    child: Row(
      children: [
        Container(
          width: 3,
          color: Colors.red,
          height: double.infinity,
        ),
        Expanded(
          child: TextFormField(
            decoration: const InputDecoration(
              border: InputBorder.none,
              contentPadding: EdgeInsets.symmetric(horizontal: 8, vertical: 12),
              hintText: "请输入内容",
            ),
          ),
        ),
      ],
    ),
  ),
)

方案优势说明 #

• 减少冗余的Container嵌套，布局结构更清晰易维护
• 通过ClipRRect保证左侧红色条与外层圆角完全对齐，避免边角漏出直角瑕疵
• 直接设置InputBorder.none去掉组件默认下划线，比透明下划线写法更高效
• 左侧红色条采用固定宽度+自适应高度的Container，无需手动调整padding适配

原代码的问题点 #

• 多层嵌套容易引发padding与边框的对齐误差
• 用Border.left实现红色侧边时，无法与外层圆角完美匹配，视觉效果存在瑕疵
• 透明下划线的写法冗余，直接移除边框是更优解

内容的提问来源于stack exchange，提问作者Henrique Guimarães