FlutterFlow Docs
Search…
TextField
The TextField widget allows users to input text into your app. You can use the TextField widget for building forms, send messages, dialogs, search, etc.

Adding The TextField To Your Project

To add the TextField widget to your project:
Simply drag the TextField widget from the Form Elements tab (in the Widget Panel) or add it directly from the widget tree.
By default, the TextField widget includes [Some hint text...] inside the TextField.

Changing the Properties

The Properties Panel can be used to customize the appearance and behavior of your TextField widget.

Add Padding

​Here are the instructions on how to add padding.

Adjust The Alignment

​Here are the instructions on adjusting the alignment.

Using The TextField For Passwords

Here is how to use a TextField to Passwords:
  • Select TextField from the widget tree or from the canvas area.
  • Move to the Property Editor and scroll down to the TextField Properties section.
  • Find and checkmark the Password Field property (click on it).
  • You should now see the TextField obscures whatever you type in with the dot (β€’).
  • To see and confirm the entered password, click on the Toggle Hide Password Icon (
    ). Click again to hide the password.
To customize the Password Field:
  • Select TextField, move to the Property Editor, and scroll down to the Toggle Hide Password Icon Properties (Under the TextField Properties).
  • Enter the value in the Toggle Hide Icon Size property to change the size of the icon.
  • To change the color of the icon, find the Toggle Hide Icon Color property and click on the box next to #757575, select the color, and then click Use Selected Color or click on #757575 and enter a Hex Code directly.

Ability To Clear The TextField

A Clear Field icon inside the TextField allows the users to quickly remove the previously entered text. The Search box is a common use case for enabling TextField to clear the text.
To enable the TextField to clear the text:
  • Select TextField from the widget tree or from the canvas area.
  • Move to the Property Editor and scroll down to the TextField Properties section.
  • Find and checkmark the Show Clear Field Icon property (click on it).
  • You should now see the Clear Field Icon inside the TextField.
  • Click on it to clear the entered text.
To customize the Clear Field:
  • Select TextField, move to the Property Editor, and scroll down to the Clear Field Icon Properties (Under the TextField Properties).
  • Enter the value in the Clear Field Icon Size property to change the size of the icon.
  • To change the color of the icon, find the Clear Field Icon Color property and click on the box next to #757575, select the color, and then click Use Selected Color or click on #757575 and enter a Hex Code directly.

TextField With Prefilled Value

You may want to have your TextField appear with an initial value (e.g. What are you searching for, Input your Email, etc.).
To set the initial value to the TextField:
  • Select TextField from the widget tree or from the canvas area.
  • Move to the Property Editor and scroll down to the TextField Properties section.
  • Find the Initial Value property and enter the text.

Adding Label Text For TextField

Showing a label for a TextField helps users understand what should be entered into the TextField. If you don't have an initial value set, the Label Text will appear as full size in the TextField. Once the user taps the TextField, the Label Text will become smaller and the Hint Text will appear.
To set the label for TextField:
  • Select TextField from the widget tree or from the canvas area.
  • Move to the Property Editor and scroll down to the TextField Properties section.
  • Find the Label Text property and enter the text.
To change the label style:
  • Scroll down more to find the Label Style Same as Above checkbox.
  • Click on it to remove the checkmark.
  • Scroll down a bit to see the Label Style section (Below the Leading Icon section).
  • Find the Theme Text Style dropdown, Click on Body Text 1 (inside the dropdown) to see other options and choose any.

Setting Hint Text For TextField

Showing a hint text for TextField, helps users know what information is needed to enter into the TextField. For example, showing hint text as 'Enter Your Email Here' clearly informs the user to enter their email.
To set the hint text for TextField:
  • Select TextField from the widget tree or from the canvas area.
  • Move to the Property Editor and scroll down to the TextField Properties section.
  • Find the Hint Text property and enter the text.
To change the hint text style:
  • Scroll down more to find the Hint Style Same as Above checkbox.
  • Click on it to remove the checkmark.
  • Scroll down a bit to see the Hint Style section (Below the Leading Icon section).
  • Find the Theme Text Style dropdown, Click on Body Text 1 (inside the dropdown) to see other options and choose any.

Styling the Text

You may want to customize the text style of your TextField to match your design. Various properties under the TextField Properties help you customize the TextField.
​Here are the instructions on styling the Text.

Align The Text Inside Of A TextField

To align the text inside the TextField:
  • Select the TextField from the widget tree or from the canvas area.
  • Move to the Property Editor and under the TextField Properties section, scroll down to find the Text Align property.
  • By default, the first alignment option is selected which is Left align. Click on the other alignment option to change the text alignment.

Making TextField Multiline

By default, a TextField is only one line. When you type in more text than fits on the screen, some text will not be visible. However, you can change this behavior by using the Max Lines property.
Here's an example of how you can make a TextField multiline:
  • Select TextField from the widget tree or from the canvas area.
  • Move to the Property Editor and under the TextField Properties section, scroll down to find the Max Lines property.
  • Enter the value 3 in the Max Lines property. This will show the text up to 3 lines. Any text that is more than 3 lines will be scrollable.

Add A Leading Icon To Your Text Field

Sometimes you may want to show an icon at the start of the TextField to help indicate the purpose of TextField.
Here's an example of how you can add a Leading Icon:
  • Select TextField from the widget tree or from the canvas area.
  • Move to the Property Editor and under the TextField Properties section, scroll down to find the Leading Icon property.
  • Click on the None button, then search and select the icon name with search.
  • Enter the value in Icon Size and Icon Color property to change the size and color of the icon respectively.

Decorating TextField

Various properties under the Input Decoration Properties allow you to customize the TextField to match your design.

Changing the Color of TextField

To change the background color of TextField:
  • Select TextField from the widget tree or from the canvas area.
  • Move to the Property Editor and scroll down to the Input Decoration Properties section.
  • Find and select the Filled property (click the checkbox).
  • Find the Fill Color property, click on the box next to Unset, select the color, and then click Use Selected Color or click on Unset and enter a Hex Code directly. You can also choose the color by clicking on the Palette and Simple button.

Adding Border

Here's an example of how you can add a border around the TextField:
  • Select TextField from the widget tree or from the canvas area.
  • Move to the Property Editor and scroll down to the Input Decoration Properties section.
  • Select the Input Border Type dropdown. Choose Outline (a border will be placed around the entire TextField) or Underline (a birder will be placed only on the bottom of the TextField).
  • Scroll down a bit to find the Border Color property, click on the box next to Unset, select the color, and then click Use Selected Color or click on Unset and enter a Hex Code directly. You can also choose the color by clicking on the Palette and Simple button.
  • Find the Border Width property below, enter the value 5.
  • Now, In the Border Radius property enter the value 50. By default, the value 50 will be set for all corners which are TL (Top left), TR (top right), BL (bottom left), and BR (bottom right). Click on the lock icon (
    ) to change each corner separately.

Add Content Padding

Content Padding adds space between the Text and Border of your TextField.
Here's an example of how to add Content Padding:
  • Select TextField from the widget tree or from the canvas area.
  • Move to the Property Editor and scroll down to the Input Decoration Properties section.
  • Find the Content Padding property, enter the value 0 in T (top) and B (bottom) input boxes.
Last modified 11d ago