#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
проблема так и не была решена. Так что я вернулся к началу.