Flutter如何去除TextField首尾空白以匹配容器UI样式

问题诉求 #

移除TextField的首尾多余空白，让输入框样式和外层灰色圆角容器的展示效果完全匹配，当前实现代码如下：

Container(
  decoration: const BoxDecoration(
    borderRadius: BorderRadius.all(Radius.circular(10)),
    color: Color(0xFFD9D9D9),
  ),
  child: TextFormField(
    maxLines: 1,
    expands: false,
    textAlign: TextAlign.center,
    decoration: InputDecoration(
      hintText: _auth.user.uid,
      hintStyle: TextStyle(color: Colors.grey.shade500),
      isDense: true,
      contentPadding: EdgeInsets.symmetric(horizontal: 0, vertical: 12),
      border: InputBorder.none,
    ),
    style: const TextStyle(
      fontSize: 12,
      backgroundColor: Color(0xFFD9D9D9)
    ),
  ),
)

问题原因 #

首尾残留空白是Flutter TextFormField的默认预留空间：仅设置border: InputBorder.none和contentPadding水平为0时，组件依然会保留默认的水平边距用来适配光标、点击热区，同时不同状态下的边框（未聚焦、聚焦态）也会占用微小空间。

修复方案 #

在原有InputDecoration配置基础上新增3个属性，即可彻底清除首尾多余空白：

InputDecoration(
  // 原有配置保留
  hintText: _auth.user.uid,
  hintStyle: TextStyle(color: Colors.grey.shade500),
  isDense: true,
  contentPadding: EdgeInsets.symmetric(horizontal: 0, vertical: 12),
  border: InputBorder.none,
  // 新增以下配置
  isCollapsed: true, // 折叠默认的最小边距
  enabledBorder: InputBorder.none, // 清除未聚焦态边框占位
  focusedBorder: InputBorder.none, // 清除聚焦态边框占位
)

如果调整后圆角边缘还有极细微的多余显示，给外层Container加上clipBehavior: Clip.hardEdge属性，直接裁切超出容器范围的内容，就能完全和目标UI效果对齐。

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