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

How to set the overflow property of errorTextStyle from TextFormField? – Flutter

I’m trying to do set the overflow of the errorText in TextFormField widget. As you can see in the following picture, the remaining error text goes into the ellipsis.

enter image description here

I want my error message to completely visible. I’ve tried to set the overflow from the errorTextStyle, but it doesn’t work.

errorStyle: TextStyle(
                color: AppColors.secondaryRed,
                overflow: TextOverflow.visible,
              ),

Am I missing something? Or is there any workaround to achieve this?

Tags:

4

Answers


  1. 0

    Try adding errorMaxLines: 2 under the overflow.

    Login or Signup to reply.
  2. 0

    If this is not handled by error style, You can add another text which represent your error, i.e. in your validator function you have to update errorString.

    Code here:

    //Variable
String errorString = "";

//widget
   Column(
     children: [
        Form(
        key: formKey,
        child: TextFormField(
         controller: emailController,
           validator: (value) {
               if (value!.isEmpty) {
                  errorString = "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled";
                } else {
                   errorString = "";
                }
                return null;
            },
          ),
        ),
        const SizedBox(height: 10),
        Align(
           alignment: Alignment.centerLeft,
             child: Text(errorString))
     ],
  ),
    Login or Signup to reply.
  3. 0

    Just add errorMaxLines: 3 in the InputDecoration

    Output:

    enter image description here

    Complete Code:

    TextFormField(
        autovalidateMode: AutovalidateMode.always,
        decoration: InputDecoration(
          errorMaxLines: 3,    //👈 Add this
          errorStyle: TextStyle(
            color: Colors.red,
            overflow: TextOverflow.visible,
          ),
        ),
        validator: (value) {
          if (value?.isEmpty == true) {
            return 'Please enter a value Please enter a value Please enter a value Please enter a value';
          }
          return null;
        },
      ),
    Login or Signup to reply.
  4. 0

    Inside InputDecoration put this line of code errorMaxLines: 2:

    InputDecoration(
  errorMaxLines: 2,
  errorStyle: TextStyle(
      color: AppColors.secondaryRed,
      overflow: TextOverflow.visible,
   ),
)
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search