skip to Main Content

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

3

Answers


  1. 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. 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. 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