anonymous-dev
anonymous-dev

Reputation: 3489

How can I remove the error message below my TextFormField?

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

Answers (1)

Canada2000
Canada2000

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

Related Questions