Flutter问题：TextField下方出现多余空白区域

问题根源 #

核心问题是TextField的InputDecoration自带默认垂直内边距——这就是为什么给外层Container设了高度，TextField却填不满；移除Container高度后，下方的蓝色间隙也是这个默认内边距导致的。

可行解决方案 #

直接针对InputDecoration调整即可，以下是几种实用写法：

1. 精准控制内边距 #

通过contentPadding将垂直方向内边距设为0，仅保留水平方向留白（可按需调整）：

Container(
  height: 60,
  color: Colors.blue,
  child: TextField(
    decoration: InputDecoration(
      contentPadding: const EdgeInsets.symmetric(vertical: 0, horizontal: 16),
      hintText: "输入内容",
      border: const OutlineInputBorder(),
    ),
  ),
)

2. 紧凑模式+消除内边距 #

开启isDense让布局更紧凑，配合EdgeInsets.zero彻底移除所有内边距（无需水平留白时使用）：

TextField(
  decoration: InputDecoration(
    isDense: true,
    contentPadding: EdgeInsets.zero,
    hintText: "输入内容",
  ),
)

3. 直接给TextField设置背景 #

若不需要外层Container，用filled和fillColor为TextField本身添加背景色，同时消除间隙：

TextField(
  decoration: InputDecoration(
    filled: true,
    fillColor: Colors.blue,
    contentPadding: const EdgeInsets.symmetric(vertical: 0, horizontal: 16),
    border: InputBorder.none,
    hintText: "输入内容",
  ),
)

将上述代码替换到你的示例中，无论是固定容器高度还是自适应高度，TextField都能填满对应区域，不会再出现多余间隙。

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