Flutter TextField: Styling labelText, hintText, and errorText

Updated: February 3, 2023 By: Pennywise Post a comment

This short and concise article shows you how to style the label text, hint text, and error text of a TextField (or TextFormField) widget in Flutter.

Note: Everything in the following examples is the same if you replace TextField with TextFormField.

labelText

You can customize the label text by configuring the labelStyle property of the InputDecoration class.

Example:

Scaffold(
      appBar: AppBar(
        title: const Text('Kindacode.com'),
      ),
      body: const Padding(
        padding: EdgeInsets.all(30.0),
        child: Center(
          child: TextField(
            decoration: InputDecoration(
                labelText: 'label text',
                labelStyle: TextStyle(
                    color: Colors.red,
                    fontSize: 22,
                    fontStyle: FontStyle.italic,
                    decoration: TextDecoration.underline)),
          ),
        ),
      ),
);

Output:

hintText

In order to style the hint text, you can manipulate the hintStyle property of the InputDecoration class.

Example:

Scaffold(
      appBar: AppBar(
        title: const Text('Kindacode.com'),
      ),
      body: const Padding(
        padding: EdgeInsets.all(30.0),
        child: Center(
          child: TextField(
            decoration: InputDecoration(
                hintText: 'hint text',
                hintStyle: TextStyle(
                    color: Colors.purple,
                    fontSize: 24,
                    fontStyle: FontStyle.italic,
                    decoration: TextDecoration.underline)),
          ),
        ),
      ),
);

Output:

errorText

The error text of a text field can be styled by setting the errorStyle property of the InputDecoration class. In addition, you can control the max lines of the error text with the errorMaxLines argument.

Example:

TextField(
            decoration: InputDecoration(
              errorText: 'Something went wrong. Please re-check your input',
              errorMaxLines: 3,
              errorStyle: TextStyle(
                color: Colors.red,
                fontSize: 24,
                fontWeight: FontWeight.bold,
                fontStyle: FontStyle.italic,
                decoration: TextDecoration.lineThrough
              )
            ),
),

Output:

Conclusion

We’ve walked through a few examples of styling label text, hint text, and error text of a TextField widget in Flutter. Continue learning more interesting things by taking a look at the following articles:

You can also check out our Flutter topic page or Dart topic page for the latest tutorials and examples.

Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments

Related Articles