Create and style a text field

Text fields allow users to type text into our apps. Text fields can be used to build forms, messaging apps, search experiences, and more! In this recipe, we’ll explore how to create and style text fields.

Flutter provides two text fields out of the box: TextField and TextFormField.

TextField

TextField is the most commonly used text input widget.

By default, a TextField is decorated with an underline. We can add a label, an icon, inline hint text, and error text by supplying an InputDecoration as the decoration property of the TextField. To remove the decoration entirely (including the underline and the space reserved for the label), set the decoration to null explicitly.

TextField(
  decoration: InputDecoration(
    border: InputBorder.none,
    hintText: 'Please enter a search term'
  ),
);

TextFormField

TextFormField wraps a TextField and integrates it with the enclosing Form. This provides additional functionality, such as validation and integration with other FormField widgets.

TextFormField(
  decoration: InputDecoration(
    labelText: 'Enter your username'
  ),
);

For more information on input validation, please see the Building a form with validation recipe.