Question 362687 in Flutter Question posted in
The official Flutter documentation can be found here.

Aligne error text in center from validator in flutter

I’m trying to put the error message in the middle.

How can I put the error text in the center of the validator’s textformfiled?

what do you suggest?

Container(
                  decoration: BoxDecoration(
                    borderRadius: borderRadius,
                  ),
                  width: screenWidth,
                  constraints: const BoxConstraints(maxWidth: 400),
                  height: containerSizeEmail,
                  child: TextFormField(
                    keyboardType: TextInputType.emailAddress,
                    controller: emailController,
                    textAlign: TextAlign.center,
                    decoration: InputDecoration(
                      alignLabelWithHint: true,
                      fillColor: Colors.white,
                      filled: true,
                      errorStyle: const TextStyle(
                        fontSize: 10.0,
                       
                      ),
                      border: OutlineInputBorder(
                        borderRadius: borderRadius,
                      ),
                      contentPadding: const EdgeInsets.only(right: 35.0),
                      labelText: AppLocalizations.of(context)!.enterEmail,
                      prefixIcon: const Padding(
                        padding:  EdgeInsets.only(left: 20.0, right: 15.0),
                        child: Icon(Icons.email,
                        ),
                      ),
                    ),
                    validator: (value) {
                      String textToReturn = "";
                      setState(() {
                        if (value!.isEmpty) {
                          containerSizeEmail = containerSizeLarge;
                          textToReturn =
                              AppLocalizations.of(context)!.enterEmail;
                        } else if (!EmailValidator.validate(value, true)) {
                          containerSizeEmail = containerSizeLarge;
                          textToReturn =
                              AppLocalizations.of(context)!.enterValidEmail;                                                             
                        } else {
                          containerSizeEmail = containerSizeNormal;
                        }
                      });
                      return textToReturn == "" ? null : textToReturn;
                    },
                  ),
                ),

https://phpout.com/wp-content/uploads/2024/03/NpCsO.png

solutions to solve please

Tags:

3

Answers


  1. 0

    You cannot align the error text. You can try adding a text widget and return null from validator and show error msg only if the textToReturn is not empty like the following

    Column(
 children: [
   Container(
                  decoration: BoxDecoration(
                    borderRadius: borderRadius,
                  ),
                  width: screenWidth,
                  constraints: const BoxConstraints(maxWidth: 400),
                  height: containerSizeEmail,
                  child: TextFormField(
                    keyboardType: TextInputType.emailAddress,
                    controller: emailController,
                    textAlign: TextAlign.center,
                    decoration: InputDecoration(
                      alignLabelWithHint: true,
                      fillColor: Colors.white,
                      filled: true,
                      errorStyle: const TextStyle(
                        fontSize: 10.0,
                       
                      ),
                      border: OutlineInputBorder(
                        borderRadius: borderRadius,
                      ),
                      contentPadding: const EdgeInsets.only(right: 35.0),
                      labelText: AppLocalizations.of(context)!.enterEmail,
                      prefixIcon: const Padding(
                        padding:  EdgeInsets.only(left: 20.0, right: 15.0),
                        child: Icon(Icons.email,
                        ),
                      ),
                    ),
                    validator: (value) {
                      String textToReturn = "";
                      setState(() {
                        if (value!.isEmpty) {
                          containerSizeEmail = containerSizeLarge;
                          textToReturn =
                              AppLocalizations.of(context)!.enterEmail;
                        } else if (!EmailValidator.validate(value, true)) {
                          containerSizeEmail = containerSizeLarge;
                          textToReturn =
                              AppLocalizations.of(context)!.enterValidEmail;                                                             
                        } else {
                          containerSizeEmail = containerSizeNormal;
                        }
                      });
                      return null;
                    },
                  ),
                ),
  if(textToReturn != "")
   Text(textToReturn, style: TextStyle(
     fontSize: 10,
     color : Colors.red
    ))
     
   )

 ]
)
    Login or Signup to reply.
  2. 0

    To be honest i don’t know any thing that can do that, but i start thinking of classic solution of an old school:

    you want to display the error text in the center of the screen, give it a prefix space equal to the the half of screen width.

    Try:

      validator: (s){
    String returnedString = '';

    if(s!.isEmpty)
      {
        for(int i =0 ; i < MediaQuery.of(context).size.width/8 ; i++ ){
          returnedString += 't';
        }
        returnedString+= 'Error!!';
        return returnedString;
      }
    return null;
  }

    There’s a correlation between 1/8 of screen width and /t it’s a long story, related to pixels.

    At last i don’t claim it’s the optimal solution, but stills out of Box.

    Hope it helps you

    Login or Signup to reply.
  3. 0

    You can try error argument it accepts a widget so you can play with it

    String errorText = "";
return Container(
  decoration: BoxDecoration(
    borderRadius: borderRadius,
  ),
  width: screenWidth,
  constraints: const BoxConstraints(maxWidth: 400),
  height: containerSizeEmail,
  child: TextFormField(
    keyboardType: TextInputType.emailAddress,
    controller: emailController,
    textAlign: TextAlign.center,
    decoration: InputDecoration(
      alignLabelWithHint: true,
      fillColor: Colors.white,
      filled: true,
      error: Visibility(
        visible: errorText.isNotEmpty,
        child: Align(
          alignment: Alignment.center,
          child: Text(
            errorText,
            textAlign: TextAlign.center,
          ),
        ),
      ),
      errorStyle: const TextStyle(
        fontSize: 10.0,
      ),
      border: OutlineInputBorder(
        borderRadius: borderRadius,
      ),
      contentPadding: const EdgeInsets.only(right: 35.0),
      labelText: AppLocalizations.of(context)!.enterEmail,
      prefixIcon: const Padding(
        padding: EdgeInsets.only(left: 20.0, right: 15.0),
        child: Icon(
          Icons.email,
        ),
      ),
    ),
    validator: (value) {
      String textToReturn = "";
      setState(() {
        if (value!.isEmpty) {
          containerSizeEmail = containerSizeLarge;
          textToReturn = AppLocalizations.of(context)!.enterEmail;
        } else if (!EmailValidator.validate(value, true)) {
          containerSizeEmail = containerSizeLarge;
          textToReturn = AppLocalizations.of(context)!.enterValidEmail;
        } else {
          containerSizeEmail = containerSizeNormal;
        }
        errorText = textToReturn;
      });
      return textToReturn == "" ? null : textToReturn;
    },
  ),
);
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search