Text fields allow users to type text into our apps. Text fields can be used tobuild 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:TextFieldand TextFormField.

TextField

TextFieldis 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 anInputDecorationas the decorationproperty of the TextField. To remove the decoration entirely (including theunderline and the space reserved for the label), set the decoration to nullexplicitly.

  1. TextField(
  2.   decoration: InputDecoration(
  3.     border: InputBorder.none,
  4.     hintText: 'Please enter a search term'
  5.   ),
  6. );

TextFormField

TextFormFieldwraps a TextField and integrates it with the enclosingForm. This providesadditional functionality, such as validation and integration with otherFormFieldwidgets.

  1. TextFormField(
  2.   decoration: InputDecoration(
  3.     labelText: 'Enter your username'
  4.   ),
  5. );

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