Flutter注册表单错误信息显示不全问题求助

问题根源 #

• 外层SizedBox(width:200.0)的固定宽度限制，导致错误文本被截断
• 未配置错误文本的换行属性，长文本无法自动换行展示

修复方案 #

1. 调整输入框的宽度约束

将固定宽度的SizedBox替换为ConstrainedBox（设置maxWidth），避免过度限制布局空间，让错误文本有足够的展示区域：

ConstrainedBox(
  constraints: const BoxConstraints(maxWidth: 200.0),
  child: TextFormField(
    decoration: kInputDecorationOfAuth,
    onChanged: (value) {
      FullName = value;
    },
    validator: (value) {
      if (value == null || value.isEmpty) {
        return "option vide";
      } else if (value.contains(RegExp(r'[0-9]'))) {
        return "Le nom ne contient pas de chiffres.";
      } else if (value.length < 5) {
        return "un nom doit avoir min 5 caractères";
      }
      return null;
    },
  ),
)

2. 优化InputDecoration的错误文本配置

在kInputDecorationOfAuth中添加errorMaxLines允许文本换行，同时调整errorStyle的行高提升可读性：

const kInputDecorationOfAuth = InputDecoration(
  errorStyle: TextStyle(
    color: Color(0xFFE3242B),
    fontFamily: "Eastman",
    height: 1.2,
  ),
  errorMaxLines: 2, // 根据需求调整最大行数
  hintText: '',
  fillColor: Colors.white,
  filled: true,
  contentPadding: EdgeInsets.symmetric(vertical: 10.0, horizontal: 20.0),
  border: OutlineInputBorder(
    borderRadius: BorderRadius.all(Radius.circular(32.0)),
  ),
  enabledBorder: OutlineInputBorder(
    borderSide: BorderSide(color: Color(0xFF40513B), width: 2.0),
    borderRadius: BorderRadius.all(Radius.circular(32.0)),
  ),
  focusedBorder: OutlineInputBorder(
    borderSide: BorderSide(color: Color(0xFF9DC08B), width: 3.0),
    borderRadius: BorderRadius.all(Radius.circular(32.0)),
  ),
);

3. 布局额外注意事项

如果表单处于横向布局（如Row），建议改为Column布局，确保每个字段下方有足够空间展示错误文本；若必须使用横向布局，需为每个字段预留错误文本的展示空间。

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