Flutter问题：TextFormField无法填充父Container高度

问题描述 #

我开发了一个OTP页面，但输入框的边框无法填充父Container的高度。我将Container背景设为灰色，聚焦边框设为粉色，但二者高度不匹配。请问我的代码中遗漏了什么？

原代码：

Widget _textFieldOTP(BuildContext context, {required bool first, last}) {
  return Container(
    height: 54,
    width: 53,
    color: Colors.grey,
    child: TextFormField(
      autofocus: true,
      onChanged: (value) {
        if(value.length == 1 && last == false){
          FocusScope.of(context).nextFocus();
        }
        if(value.length == 0 && first == false){
          FocusScope.of(context).previousFocus();
        }
      },
      showCursor: false,
      readOnly: false,
      textAlign: TextAlign.center,
      style: GoogleFonts.poppins(
        textStyle: TextStyle(
          fontWeight: FontWeight.w400,
          fontSize: 24,
        ),
      ),
      keyboardType: TextInputType.number,
      maxLength: 1,
      decoration: InputDecoration(
        counter: Offstage(),
        enabledBorder: OutlineInputBorder(
          borderSide: BorderSide(width: 1, color: Color(0x1A484848)),
          borderRadius: BorderRadius.circular(6),
        ),
        focusedBorder: OutlineInputBorder(
          borderSide: BorderSide(width: 1, color: Color(0xFFFF2957)),
          borderRadius: BorderRadius.circular(6),
        ),
      ),
    ),
  );
}

问题原因 #

TextFormField默认自带上下内边距，同时InputDecoration也有默认的内边距配置，导致输入框实际高度小于父Container的54px，边框自然无法填满容器高度。

解决方法 #

通过移除输入框的默认内边距，让输入框完全贴合父容器：

• 添加contentPadding: EdgeInsets.zero移除输入框内部间距
• 可选添加isDense: true进一步压缩额外空间
• 修正参数last的类型声明，避免编译警告

修改后的代码 #

Widget _textFieldOTP(BuildContext context, {required bool first, required bool last}) {
  return Container(
    height: 54,
    width: 53,
    color: Colors.grey,
    child: TextFormField(
      autofocus: true,
      onChanged: (value) {
        if(value.length == 1 && !last){
          FocusScope.of(context).nextFocus();
        }
        if(value.length == 0 && !first){
          FocusScope.of(context).previousFocus();
        }
      },
      showCursor: false,
      readOnly: false,
      textAlign: TextAlign.center,
      style: GoogleFonts.poppins(
        textStyle: const TextStyle(
          fontWeight: FontWeight.w400,
          fontSize: 24,
        ),
      ),
      keyboardType: TextInputType.number,
      maxLength: 1,
      decoration: InputDecoration(
        counter: const Offstage(),
        contentPadding: EdgeInsets.zero, // 核心：移除输入框内边距
        isDense: true, // 可选：进一步压缩额外间距
        enabledBorder: OutlineInputBorder(
          borderSide: const BorderSide(width: 1, color: Color(0x1A484848)),
          borderRadius: BorderRadius.circular(6),
        ),
        focusedBorder: OutlineInputBorder(
          borderSide: const BorderSide(width: 1, color: Color(0xFFFF2957)),
          borderRadius: BorderRadius.circular(6),
        ),
      ),
    ),
  );
}

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