如何移除Flutter中TextField的边框同时保留BorderRadius圆角设置

解决方案 #

直接修改InputDecoration的多状态边框配置，所有边框都设置为无边线、保留圆角即可，修改后代码如下：

decoration: InputDecoration(
  labelStyle: const TextStyle(color: Colors.black),
  contentPadding: const EdgeInsets.only(left: 25),
  // 启用未聚焦状态
  enabledBorder: OutlineInputBorder(
    borderRadius: BorderRadius.circular(40.0),
    borderSide: BorderSide.none,
  ),
  // 聚焦状态
  focusedBorder: OutlineInputBorder(
    borderRadius: BorderRadius.circular(40.0),
    borderSide: BorderSide.none,
  ),
  // 以下为可选配置，对应输入框的特殊状态，不需要可以删除
  disabledBorder: OutlineInputBorder(
    borderRadius: BorderRadius.circular(40.0),
    borderSide: BorderSide.none,
  ),
  errorBorder: OutlineInputBorder(
    borderRadius: BorderRadius.circular(40.0),
    borderSide: BorderSide.none,
  ),
  focusedErrorBorder: OutlineInputBorder(
    borderRadius: BorderRadius.circular(40.0),
    borderSide: BorderSide.none,
  ),
  // 如果需要匹配参考图的填充背景效果，可以添加以下两行
  filled: true,
  fillColor: Colors.grey.shade200, // 可自定义为你需要的背景色
),

配置说明 #

• Flutter的InputDecoration会针对输入框的不同交互状态读取独立的边框配置，仅设置border属性仅作为兜底规则，部分场景不会生效，所以需要把你用到的所有状态的边框都配置borderSide: BorderSide.none才能完全隐藏边框线。
• 每个状态的OutlineInputBorder都保留了BorderRadius.circular(40.0)配置，圆角效果不会受影响。

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