Flutter TextFormField验证错误消息重叠问题修复咨询

我的TextFormField被包裹在SizedBox中以限制尺寸，TextFormField所在区域也设置了约束，请问这个问题是否与FocusNode有关？

相关代码 #

Form(
  key: _formKey,
  child: SingleChildScrollView(
    child: Column(
      children: [
        SizedBox(
          height: 50,
          width: 320,
          child: TextFormField(
            style: const TextStyle(color: Colors.black),
            key: const ValueKey('email'),
            validator: (value) {
              if (value!.isEmpty || !value.contains('@')) {
                return 'Please enter a valid email';
              }
              return null;
            },
            keyboardType: TextInputType.emailAddress,
            decoration: InputDecoration(
              floatingLabelBehavior: FloatingLabelBehavior.always,
              labelText: 'Email Address',
              labelStyle: const TextStyle(color: Colors.black),
              enabledBorder: OutlineInputBorder(
                borderSide: const BorderSide(color: Colors.black),
                borderRadius: BorderRadius.circular(8),
              ),
            ),
            onSaved: (newValue) {
              _userEmail = newValue!;
            },
          ),
        ),
        const SizedBox(
          height: 12,
        ),
        SizedBox(
          height: 50,
          width: 320,
          child: TextFormField(
            style: const TextStyle(color: Colors.black),
            key: const ValueKey('password'),
            validator: (value) {
              if (value!.isEmpty || value.length < 7) {
                return 'Password must be atleast 7 characters';
              }
              return null;
            },
            decoration: InputDecoration(
              floatingLabelBehavior: FloatingLabelBehavior.always,
              labelText: 'Password',
              labelStyle: const TextStyle(color: Colors.black),
              enabledBorder: OutlineInputBorder(
                borderSide: const BorderSide(color: Colors.black),
                borderRadius: BorderRadius.circular(8),
              ),
            ),
            obscureText: true,
            onSaved: (newValue) {
              _userPassword = newValue!;
            },
          ),
        ),
        const SizedBox(
          height: 20,
        ),
      ],
    ),
  ),
),

问题原因 #

这个问题和FocusNode无关，核心是你给TextFormField套了固定高度为50的SizedBox。TextFormField在显示验证错误消息时，会自动尝试扩展高度来容纳提示文本，但固定高度的SizedBox限制了它的高度，导致错误消息和输入区域重叠。

修复方案 #

• 方案一：移除固定高度的SizedBox
  直接去掉包裹TextFormField的SizedBox，让TextFormField根据内容自动调整高度，同时通过InputDecoration的contentPadding控制输入框默认高度：

TextFormField(
  style: const TextStyle(color: Colors.black),
  key: const ValueKey('email'),
  validator: (value) {
    if (value!.isEmpty || !value.contains('@')) {
      return 'Please enter a valid email';
    }
    return null;
  },
  keyboardType: TextInputType.emailAddress,
  decoration: InputDecoration(
    floatingLabelBehavior: FloatingLabelBehavior.always,
    labelText: 'Email Address',
    labelStyle: const TextStyle(color: Colors.black),
    enabledBorder: OutlineInputBorder(
      borderSide: const BorderSide(color: Colors.black),
      borderRadius: BorderRadius.circular(8),
    ),
    contentPadding: const EdgeInsets.symmetric(vertical: 16, horizontal: 12), // 调整内边距控制默认高度
  ),
  onSaved: (newValue) {
    _userEmail = newValue!;
  },
),

• 方案二：增大SizedBox的高度
  如果必须保留SizedBox，把高度设置到足够容纳错误消息的数值（比如70），确保提示文本不会和输入区域重叠：

SizedBox(
  height: 70, // 增大高度预留错误提示空间
  width: 320,
  child: TextFormField(
    // 其他属性保持不变
  ),
)

• 方案三：自定义错误提示位置
  通过单独的Text组件在TextFormField下方显示错误消息，完全控制提示的位置和样式：

// 在TextFormField下方添加错误文本
TextFormField(
  key: const ValueKey('email'),
  validator: (value) {
    if (value!.isEmpty || !value.contains('@')) {
      return 'Please enter a valid email';
    }
    return null;
  },
  // ... 其他属性
),
// 手动控制错误提示显示
if (_formKey.currentState?.validate() == false)
  const Padding(
    padding: EdgeInsets.only(top: 4, left: 8),
    child: Text(
      'Please enter a valid email',
      style: TextStyle(color: Colors.red),
    ),
  ),

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