In flutter how can we make validation error messages look beautiful

Question

I am making an application. The UI of login page i have shared. In this i used validation and due to that it shows validation message in red color below textformfield but it looks very ugly. Is there any way that we make this validation error message looks very good on screen like we do natively using different libraries?

Solution

You can customize the text field decoration in your form via InputDecoration widget, like in this example:

Your TextFormField widget:

TextFormField(
  controller: controller,
  decoration: InputDecoration(
    labelText: "Example",
    labelStyle: TextStyle(color: Colors.black),
    errorStyle: TextStyle(color: Colors.red),
    errorBorder: OutlineInputBorder(
      borderSide: BorderSide(color: Colors.red),  
    ),
  ),
  validator: (value) {
    if (value == null || value == '') {
      return "Error";
    }
  },
)

In particular you can see this two properties:

• errorBorder property
• errorStyle property

Comments

[Umair]

Thankyou for your response. It will give color to border of text field and some color to validation error message. Do we have any way that these validation message shown inside some icon and icon will be dispayed as error message

[alvaro fvr]

Mmmm... I think is not possible so fast becouse validator() must return String value. But you can see this post for more information about icon inside text: stackoverflow.com/questions/56840994/…