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

Flutter: TextFormField validation error message text padding

I used TextFormFied for a text field in flutter application. I want to remove the left padding from flutter validator error message only. I tried contentPadding, but it also removed input text padding. But I want to remove only error message padding.

enter image description here

How Can I remove this padding only? Can someone help me ?

Tags:

2

Answers


  1. 0

    The below code will create a TextFormField.

    As you can see the contentPadding is responsible for the padding of labelText and errorText. If you change the contentPadding to EdgeInsets.symmetric(horizontal: 0.0, vertical: 16.0,) then that errorText will come at your desired position.

    Padding(
  padding: const EdgeInsets.all(16.0),
  child: TextFormField(
    controller: TextInputController(),
    decoration:  InputDecoration(
      labelText: 'Input anything',
      errorText: 'hey there its an error',
      contentPadding: const EdgeInsets.symmetric(horizontal: 16.0, vertical: 16.0,),
      enabledBorder:  OutlineInputBorder(
        borderRadius: BorderRadius.circular(8.0),
        borderSide: const BorderSide(color: Colors.indigo, width: 1.2),
      ),
      focusedBorder: OutlineInputBorder(
        borderRadius: BorderRadius.circular(8.0),
        borderSide: const BorderSide(color: Colors.indigo, width: 1.2),
      ),
      errorBorder: OutlineInputBorder(
        borderRadius: BorderRadius.circular(8.0),
        borderSide: const BorderSide(color: Colors.red, width: 1.2),
      ),
      border: OutlineInputBorder(
        borderRadius: BorderRadius.circular(8.0),
        borderSide: const BorderSide(color: Colors.red, width: 1.2),
      ),
    ),
    validator: (value) {
      return "";
    },
  ),
),

    enter image description here

    Another approach can be to wrap the TextFormFields into a Column and add a Text Widget at the bottom.

    Remove the errorText from the InputDecoration.

    Here you need to manage the show and hide operation of the Text by your own logic.

    Padding(
  padding: const EdgeInsets.all(16.0),
  child: Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: [
      TextFormField(
        controller: inputController,
        decoration:  InputDecoration(
          labelText: 'Input anything',
          contentPadding: const EdgeInsets.symmetric(horizontal: 16.0, vertical: 16.0,),
          enabledBorder:  OutlineInputBorder(
            borderRadius: BorderRadius.circular(8.0),
            borderSide: const BorderSide(color: Colors.indigo, width: 1.2),
          ),
          focusedBorder: OutlineInputBorder(
            borderRadius: BorderRadius.circular(8.0),
            borderSide: const BorderSide(color: Colors.indigo, width: 1.2),
          ),
          errorBorder: OutlineInputBorder(
            borderRadius: BorderRadius.circular(8.0),
            borderSide: const BorderSide(color: Colors.red, width: 1.2),
          ),
          border: OutlineInputBorder(
            borderRadius: BorderRadius.circular(8.0),
            borderSide: const BorderSide(color: Colors.red, width: 1.2),
          ),
        ),
        validator: (value) {
          return "";
        },
      ),
      const SizedBox(
        height: 8,
      ),
      Text('hey there its an error',style: Get.textTheme.headline6?.copyWith(color: Colors.red,),),
    ],
  ),

    enter image description here

    Login or Signup to reply.
  2. 0

    There is another way to achieve this UI – You have to take one Text widget which will represent your error message. And you have to pass null for TextFormField validation. Please check below code.

    //Variable declaration
 TextEditingController emailController = TextEditingController();
 final GlobalKey<FormState> formKey = GlobalKey<FormState>();
 String errorString = "";

//Widget
Column(
    children: [
       Form(
           key: formKey,
           child: TextFormField(
               controller: emailController,
                ... ... ...    
                    validator: (value) {
                      if (value!.isEmpty) {
                        errorString = "This field is required";
                      } else {
                        errorString = "";
                      }
                      return null;
                    },
                  ),
                ),
             Align(alignment: Alignment.centerLeft, child: Text(errorString))
              ],
            ),

    Then you have to add padding and space widgets as per your requirement.

    Result :
    enter image description here

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search