Question

TextFormField 验证参数采用一个函数，如果字段内容有效则返回 null，如果内容无效则返回字符串。我的颤振项目中有空安全性，我无法从验证函数中返回空值。我如何编写一个有效的验证函数，并启用 null 安全？

AppWidget.buildUserInput(
     hint: 'Referral code',
     borderRadius: BorderRadius.circular(5),
     prefixIcon: Icon(Icons.local_offer_outlined),
     onSaved: (val) => model.save(
     CreateAccountViewModel.REFERRAL_CODE, val!),
     validate: (val) {
         return null; // The return type 'Null' isn't a 'String', as required by the 
                       //closure's context
         },
      ),

这是buildUser输入代码


static Widget buildUserInput(
      {String? hint,
      String? labelText,
      TextAlign textAlign = TextAlign.start,
      required Function(String? val) onSaved,
      Function(String val)? onChanged,
      required String Function(String val) validate,
      TextInputType? keyboardType,
      BorderRadius borderRadius = BorderRadius.zero,
      TextEditingController? controller,
      String? initialValue,
      Widget? suffixIcon,
      Widget? prefixIcon,
      String? prefixText,
      bool hasBorder = true,
      Widget? prefix,
      bool filled = false,
      Color? fillColor,
      Color? enabledBorderColor,
      Color? focusedBorderColor,
      TextStyle? style,
      bool obscureText = false}) {
    return Container(
      margin: EdgeInsets.symmetric(vertical: 9),
      child: TextFormField(
        initialValue: initialValue,
        controller: controller,
        onSaved: onSaved,
        onChanged: onChanged,
        validator: validate,
        keyboardType: keyboardType,
        obscureText: obscureText,
        textAlign: textAlign,
        style: style ?? TextStyle(),
        decoration: InputDecoration(
          filled: filled,
          fillColor: fillColor,
          prefixText: prefixText, prefix: prefix,
          prefixStyle: TextStyle(color: AppColors.appGreen),
          suffixIcon: suffixIcon,
          prefixIcon: prefixIcon,
          hintText: hint,
          labelText: labelText,
          labelStyle: userInputStyle(),
          hintStyle: userInputStyle(),
          // filled: true,
          // fillColor: AppColors.textColor2.withOpacity(.05),
          border: hasBorder
              ? borderRadius != null
                  ? OutlineInputBorder(
                      borderRadius: borderRadius,
                      borderSide: BorderSide(
                          style: BorderStyle.solid,
                          color: enabledBorderColor ?? AppColors.appGreen,
                          width: 1))
                  : UnderlineInputBorder(
                      borderRadius: borderRadius,
                      borderSide: BorderSide(
                          style: BorderStyle.solid,
                          color: enabledBorderColor ?? AppColors.appGreen,
                          width: 1))
              : InputBorder.none,
          focusedBorder: hasBorder
              ? borderRadius != null
                  ? OutlineInputBorder(
                      borderRadius: borderRadius,
                      borderSide: BorderSide(
                          style: BorderStyle.solid,
                          color: focusedBorderColor ?? AppColors.appGreen,
                          width: 1))
                  : UnderlineInputBorder(
                      borderRadius: borderRadius,
                      borderSide: BorderSide(
                          style: BorderStyle.solid,
                          color: focusedBorderColor ?? AppColors.appGreen,
                          width: 1))
              : InputBorder.none,
          enabledBorder: hasBorder
              ? borderRadius != null
                  ? OutlineInputBorder(
                      borderRadius: borderRadius,
                      borderSide: BorderSide(
                          style: BorderStyle.solid,
                          color: enabledBorderColor ?? AppColors.appGreen,
                          width: 1))
                  : UnderlineInputBorder(
                      borderRadius: borderRadius,
                      borderSide: BorderSide(
                          style: BorderStyle.solid,
                          color: enabledBorderColor ?? AppColors.appGreen,
                          width: 1))
              : InputBorder.none,
        ),
      ),
    );
  }
}

Answer 1

问题不清楚。所以如果你想使用 Flutter Form()。您需要一个表单键 = GlobalKey()。如果您想在无效时收到警告，则不能返回 ''。当您的值无效时，它会发出红色警告。

   Form(
      key: GlobalKey<FormState>()
      child: TextFormField(
        validator: (value) {
          if (value invalid) {
            return '';
          }
          return null;
        },
      ),
    )

Answer 2

我找到了解决方案，我将自定义验证函数的返回类型设为可空，这样我就可以返回 null。谢谢各位。

static Widget buildUserInput(
      {String? hint,
      String? labelText,
      TextAlign textAlign = TextAlign.start,
      required Function(String? val) onSaved,
      Function(String val)? onChanged,
      required String? Function(String? val)? validate,
      TextInputType? keyboardType,
      BorderRadius borderRadius = BorderRadius.zero,
      TextEditingController? controller,
      String? initialValue,
      Widget? suffixIcon,
      ...

Answer 3

您可以按照此示例来解决您的问题。假设这是我用于电子邮件验证的 TextFormField：-

          TextFormField(
          decoration: InputDecoration(
              labelText: 'EMAIL',
              labelStyle: TextStyle(
                  fontFamily: 'Trueno',
                  fontSize: 12.0,
                  color: Colors.grey.withOpacity(0.5)),
              focusedBorder: UnderlineInputBorder(
                borderSide: BorderSide(color: greenColor),
              )),
          onChanged: (value) {
            this.email = value;
          },
          validator: (value) =>
              value!.isEmpty ? 'Email is required' : validateEmail(value))

这是我的电子邮件验证方法：-

  String? validateEmail(String value) {
RegExp regex = RegExp(some regex pattern);
if (!regex.hasMatch(value))
  return 'Enter Valid Email';
else
  return null; }

要修复返回 null 时的错误，我们必须将 validateEmail(String value) 方法的返回类型设为可空。即 String? >

具有空安全性的 Flutter 表单验证

3 个答案: