Flutter TextField聚焦边框未占满容器问题排查与修复

问题描述 #

TextField的focused border未占满整个容器空间，尝试添加counterStyle无效果，相关代码如下：

child: Padding(
  padding: const EdgeInsets.only(left: 20.0),
  child: TextField(
    controller: _emailController,
    decoration: InputDecoration(
      hintText: 'Enter your email',
      border: InputBorder.none,
      focusedBorder: OutlineInputBorder(
        borderSide: const BorderSide(color: Colors.deepPurple),
        borderRadius: BorderRadius.circular(12),
      ),
      fillColor: Colors.grey[200],
      filled: true,
    ),
  ),
),

原因分析 #

你把Padding组件直接包在了TextField外面，这会压缩TextField的可用宽度（父容器宽度减去左边20px的padding），而TextField的聚焦边框是基于自身宽度绘制的，自然无法占满外层容器空间。counterStyle是控制输入框右下角计数器样式的属性，和边框宽度问题无关，所以添加它没有效果。

修复方案 #

将外层的Padding替换为InputDecoration的contentPadding属性，既能给输入内容添加左边距，又能让TextField宽度占满外层容器，聚焦边框也就会铺满整个容器。

修改后的代码：

child: TextField(
  controller: _emailController,
  decoration: InputDecoration(
    hintText: 'Enter your email',
    border: InputBorder.none,
    focusedBorder: OutlineInputBorder(
      borderSide: const BorderSide(color: Colors.deepPurple),
      borderRadius: BorderRadius.circular(12),
    ),
    fillColor: Colors.grey[200],
    filled: true,
    // 将左边距移到contentPadding中，同时建议添加上下内边距保证垂直居中
    contentPadding: const EdgeInsets.only(left: 20.0, top: 16, bottom: 16),
  ),
),

内容的提问来源于stack exchange，提问作者Kushal Hemanth Y