Как удалить лишнее пространство между текстовым полем и сообщением об ошибке в Flutter

#flutter #flutter-layout

Вопрос:

У меня есть текстовое поле с границами. Я использую валидатор с некоторыми условиями для отображения правильных сообщений об ошибках. Мои сообщения об ошибках отображаются точно под границей текстового поля, что мне и нужно. В моем валидаторе я использую оператор if, который должен возвращать строку, поэтому я должен добавить return '' после оператора if, как показано в моем коде:

 TextFormField buildPasswordForm() {
    return TextFormField(
      //key: ValueKey('passwordKey'),
      keyboardType: TextInputType.visiblePassword,
      obscureText: _isHidden,
      decoration: InputDecoration(
        //labelText: 'Passowrd',
        hintText: 'Password',
        floatingLabelBehavior: FloatingLabelBehavior.never,
        prefixIcon: Icon(
          Icons.lock_sharp,
          //color: kTextColor,
        ),
        suffixIcon: Padding(
          padding: EdgeInsets.symmetric(
            horizontal: getProportionateScreenWidth(12),
          ),
          child: GestureDetector(
            onTapDown: inContact,
            onTapUp: outContact,
            child: Icon(
              Icons.remove_red_eye,
              size: 26,
              //color: kTextColor,
            ),
          ),
        ),
      ),
      validator: (value) {
        if (value.isEmpty) {
          addPasswordError(error: kPasswordNullError);
          return '';
        } else if (value.length < 8) {
          addPasswordError(error: kShortPasswordError);
          return '';
        }
        return null;
      },
      onChanged: (value) {
        if (value.isNotEmpty) {
          removePasswordError(error: kPasswordNullError);
        } else if (value.length >= 8) {
          removePasswordError(error: kShortPasswordError);
        }
        return null;
      },
      onSaved: (newValue) => password = newValue,
    );
  }

  TextFormField buildEmailForm() {
    return TextFormField(
      keyboardType: TextInputType.emailAddress,
      //autofocus: true,
      decoration: InputDecoration(
        //labelText: 'Email',
        hintText: 'Enter your email',
        floatingLabelBehavior: FloatingLabelBehavior.always,
        prefixIcon: Icon(Icons.mail),
      ),
      validator: (value) {
        if (value.isEmpty) {
          addEmailError(error: kEmailNullError);
          return "";
        } else if (!emailValidatorRegExp.hasMatch(value)) {
          addEmailError(error: kInvalidEmailError);
          return "";
        }
        return null;
      },
      onChanged: (value) {
        if (value.isNotEmpty) {
          removeEmailError(error: kEmailNullError);
        } else if (emailValidatorRegExp.hasMatch(value)) {
          emailErrors.remove(kInvalidEmailError);
          addEmailError(error: kInvalidEmailError);
        }
        return null;
      },
      onSaved: (newValue) => email = newValue,
    );
  }
}
 

Если я добавлю return '' , пространство между сообщением об ошибке и нижней доской будет добавлено, но если проверка не будет выполнена, то есть: если ни адрес электронной почты, ни введенный пароль не удовлетворяют требованиям, экран не переходит к следующему, как следует. Если я удалю return '' , то пространство между сообщением об ошибке и нижними границами исчезнет, но когда я нажму «Продолжить», будут ли поля заполнены правильно или нет, экран просто перейдет к следующему.
Я хотел бы иметь решение и объяснение такого поведения.

Чего я не хочу

Чего я хочу

Ответ №1:

в моем случае это так, я обычно разделяю свой валидатор на другой класс

   class Validator{
    
    static String email(String value){
    
        String pattern = r'^[a-zA-Z0-9.] @[a-zA-Z0-9] .[a-zA-Z]';
        RegExp regExp = RegExp(pattern);
        if(!regExp.hasMatch(value)) return 'Email is invalid';
        else if(value.isEmpty) return 'Email is Empty';
        else return null;
    }
    
     }
 

затем я создаю виджет для своего текстового поля и вызываю валидатор следующим образом

   CustomTextFieldX(
    obsecure: false,
    hintText: 'Enter your email',
    nameTop: 'Email',
    controller: registerController.emails,
    keyboardType: TextInputType.emailAddress,
    validators: (value) =>Validator.email(registerController.emails.text = value),
     ),
 

я надеюсь, что это поможет. просто прокомментируйте ниже, если у них есть что уточнить.

Комментарии:

1. Спасибо вам за ответ. Я ценю это. Я попробовал ваше решение, но потерял некоторые функции, и сообщение об ошибке появилось с отступом вправо. Немного подумав, я просто решил вернуть null (я не использую null safety в этом приложении), и все прошло хорошо. Я все еще не понимаю, как if заявление должно вернуть String А.

2. После некоторой работы return null проблема так и не была решена. Так что я вернулся к началу.