Flutter TextFormField 中的错误消息调整了文本字段的大小，并且存在巨大的填充

Question

所以我想做的是在验证后将错误文本显示在文本字段下方，如下所示：

但它的代表是这样的：

正如您在上面的照片中看到的，文本字段已调整大小并且填充很大。 我尝试将内容填充（仅底部）设置为 0，但整个文本字段都损坏了：

然后我尊重我在第一张照片上的反复试验。 我这样做的方法是在将显示错误的文本字段下制作文本，但这样做我无法检索错误消息，因为这是一个单独的小部件。 我也无法传递错误消息，因为我不确定错误是否已经发生。

这是我的代码：

文本字段小部件：

class FormInputFieldWidget extends StatelessWidget {
  String hintText;
  double width;
  String? Function(String?) validator;
  bool obscureText;
  String? Function(String?) onSave;
  Widget? suffixIcon;
  TextInputAction textInputAction;
  String? errorText;

  FormInputFieldWidget({
    required this.width,
    required this.hintText,
    required this.validator,
    required this.onSave,
    required this.textInputAction,
    this.obscureText = false,
    this.suffixIcon,
    this.errorText,
    Key? key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      width: width,
      height: SH.sh * 25 / 812,
      margin: EdgeInsets.symmetric(vertical: SH.sh * 9 / 812),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          SizedBox(
            height: SH.sh * 13 / 812,
            child: TextFormField(
              obscureText: obscureText,
              textInputAction: textInputAction,
              decoration: InputDecoration(
                errorStyle: const TextStyle(fontSize: 0.01),
                suffixIcon: suffixIcon,
                hintText: hintText,
                hintStyle: TextStyle(
                  color: AppColor.TEXTFIELD_GRAY,
                  fontSize: 12,
                  fontStyle: FontStyle.italic,
                ),
                focusedBorder: UnderlineInputBorder(
                  borderSide: BorderSide(color: AppColor.LIGHT_ORANGE),
                ),
              ),
              onSaved: onSave,
              validator: validator,
              scrollPadding: EdgeInsets.only(
                  bottom: MediaQuery.of(context).viewInsets.bottom + 10),
            ),
          ),
          SizedBox(
            height: SH.sh * 10 / 812,
            child: Text(
              errorText ?? '',
              style: TextStyle(
                color: Colors.red,
                fontSize: 10,
              ),
              maxLines: 1,
            ),
          ),
        ],
      ),
    );
  }
}

及其调用示例：

FormInputFieldWidget(
            width: SH.w * 280 / 375,
            hintText: 'Password',
            obscureText: true,
            validator: (str) {
              if (str!.length < 5) {
                Provider.of<HelperProvider>(context, listen: false)
                    .changeErrMessage('U need a longer text');
                return 'U need a longer text';
              }
              return null;
            },
            onSave: (val) {
              _userModel.password = val!;
            },
            errorText: errText,
            textInputAction: TextInputAction.done,
          ),

如您所见，我尝试使用提供程序在那里设置 errorMessage 但是通过这样做，此错误消息在任何地方都是相同的。

所以我的问题是解决这个问题的最佳方法是什么。 先谢谢了

Answer 1

降低错误文本的高度和大小。

TextFormField(
  decoration: InputDecoration(
    errorStyle: TextStyle(height: 0.1, fontSize: 8),
    errorMaxLines: 2,
))