9.4 C
New York
Saturday, December 2, 2023

Flutter TextField: Styling labelText, hintText, and errorText

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 following examples is the same if you replace TextField with TextFormField.Advertisements

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

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

Example:

TextField(
            decoration: InputDecoration(
              hintText: 'hint text',
              hintStyle: TextStyle(
                color: Colors.purple,
                fontSize: 24,
                fontStyle: FontStyle.italic,
                decoration: TextDecoration.underline
              )
            ),
          ),

Output:

errorText

Advertisements

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.

Related Articles

Latest Articles