Reputation: 3489
I am using Flutter 2.5.3 and I want to remove the error message bellow my TextFormField. But whatever I do it keeps adding space below the input field when the input is invalid. I tried to wrap it with a SizedBox but it will just resize inside the sized box. I need the validator though, because I want to show the red outline error border.
Widget _buildEmailForm(BuildContext context) {
final theme = Theme.of(context);
final authRepository = context.read<AuthRepository>();
return Form(
key: _formKey,
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Text(
"signInPageWelcome".tr(),
style: theme.textTheme.headline1,
),
SizedBox(height: 60),
TextFormField(
controller: _emailController,
validator: (value) {
final email = Email.dirty(value ?? "");
return "";
},
decoration: InputDecoration(
prefixIcon: Padding(
padding: const EdgeInsets.all(30.0),
child: Icon(
Icons.person,
color: theme.primaryColor,
),
),
hintText: 'signInPageFormEmailFieldHint'.tr(),
hintStyle: theme.textTheme.bodyText1,
contentPadding: EdgeInsets.symmetric(vertical: 30, horizontal: 30),
enabledBorder: OutlineInputBorder(
borderSide: BorderSide(color: theme.primaryColorLight, width: 1.0),
borderRadius: BorderRadius.circular(5.0),
),
border: OutlineInputBorder(
borderSide: BorderSide(color: theme.primaryColorLight, width: 1.0),
borderRadius: BorderRadius.circular(5.0),
),
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(color: theme.primaryColorLight, width: 1.0),
borderRadius: BorderRadius.circular(5.0),
),
errorBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.red, width: 1.0),
borderRadius: BorderRadius.circular(5.0),
),
errorStyle: TextStyle(color: Colors.transparent, fontSize: 0, height: 0),
),
),
SizedBox(height: 60),
Container(
width: double.infinity,
child: TextButton(
onPressed: () async {
if (!_formKey.currentState!.validate()) return;
await authRepository.sendOneTimePassword(email: Email.dirty(_emailController.value.text));
setState(() {
isEmailSent = true;
});
},
child: Padding(
padding: const EdgeInsets.all(25.0),
child: Text(
"signInPageFormSubmit".tr(),
style: theme.textTheme.subtitle1?.copyWith(color: theme.backgroundColor),
),
),
style: TextButton.styleFrom(
elevation: 4,
backgroundColor: theme.primaryColor,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(180.0),
),
),
),
),
],
),
);
}
Edit
The validator is always returning a string intentionally so that I can see if the error is hidden or not. When I know it will be hidden I will ofcourse return null when it is valid.
Upvotes: 0
Views: 2449
Reputation: 1698
The reason you are always getting the error is because you are always returning an empty String ""
in your validator
:
return ""
to remove the error, you need to return null
instead:
return null
Solution:
Use this: validator:
(val) => (val == null) ? 'Enter a password' : null
I dont see how you defined your function dirty
, but assuming it returns a bool
, probably you need something like this:
validator: (value) {
if (Email.dirty(value)) return "dirty email";
else return null;
},
Upvotes: 1