FlutterFlow Docs
Search…
⌃K

TextField

The TextField widget allows users to input text into your app. You can use the TextField widget to build forms, send messages, dialogs, search, etc.
TextField Widget

Adding TextField widget

To add the TextField widget to your project, 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.
Adding TextField widget

Customizing

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 alignment

Here are the instructions for adjusting the alignment.

Using TextField for passwords

Here is how to use a TextField to Passwords:
  • Select TextField from the widget tree or 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.
Using TextField for passwords-1
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 icon's color, 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.
Using TextField for passwords-2

Clear 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 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.
Clear TextField-1
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 icon's color, 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.
Clear TextField-2

Autofocusing TextField

When you autofocus a TextField, it mimics the tap event and immediately shows the keyboard. This makes TextField ready to receive input from you without having you click on TextField.
To autofocus a TextField, select the TextField widget, move to the properties panel, and enable the Autofocus property.
Autofocusing TextField

Autocomplete a TextField

You might want to allow users to enter the text by suggesting them a list of items. The suggested items are shown if it contains the currently entered text from TextField. For example, using autocomplete to get the Country name, Fruit name, etc.
This helps avoid spelling mistakes and enhances the user experience as users won't have to enter the complete text.
To autocomplete a textfield:
  • Select the TextField widget, move to the properties panel, and enable the Autocomplete property.
  • Inside the Autocomplete Options, click Add Option and provide item names that you would like to appear in the suggestion box.
  • You can also Set from Variable to show items from any variable, such as local state variable, API response, and Firestore collection.
If you Set from Variable and run the app in preview mode, you can try entering the country name. The list will be populated with matching countries.
Autocomplete

Making TextField multiline/auto expand

By default, a TextField is only one line. So when you type in a long text that won't fit in one line, you'll be able to see an entire message using a horizontal scrollbar. You can change this default behavior and show the full message (without a horizontal scrollbar) by making the TextField multiline/auto-expand.
Here's an example of how you can make a TextField multiline/auto-expand:
  • Select the TextField widget, move to the properties panel, and find the Max Lines and Min Lines properties.
  • To make the TextField auto-expand as long as its parent allows, remove the Max Lines value and set the Min Lines to 1.
  • To make the TextField auto-expand up to a few lines and then show a vertical scrollbar to see the full message, set Max Lines to a value up to which you like to show an entire message (e.g., 3,5) and Min Lines to 1.
Making TextField multiline/auto expand

Read Only TextField

Sometimes you might want to restrict users from entering or updating anything into TextField and only allow if they are in edit mode. You can accomplish this by switching the Read Only property.
Read only TextField

Update page on change

You may have added the TextField widget inside the search page and want to refresh the search result as the value inside the TextField changes.
Enabling this feature will refresh the page whenever a user types into TextField after a configurable delay.
To update the page on TextField value change:
  • Select TextField from the widget tree or the canvas area.
  • Move to the Property Editor and scroll down to the TextField Properties section.
  • Find and checkmark the Update Page On Change property (click on it).
  • If you want to refresh a page after a specified duration when the user has stopped typing, enter the duration in milliseconds inside the Update Delay (ms) input box. For example, If the Update Delay (ms) value is set to 2000 ms (2 seconds), The page will update 2 seconds after use is done typing.
  • We advise setting the Update Delay value if you make an API call that accepts the input from TextField.
Update page on change-1
Let's try displaying the TextField value inside the Text widget as the page updates:
  • Wrap the TextField widget inside the Column.
  • Add a Text widget after the TextField widget.
  • Move to property editor and click on the Set from Variable text. (This will open a new panel)
  • Set the Source to Widget State.
  • Set the Available Options to the TextField name.
  • (Optional) Set the default value if you wish to.
  • Click Save.
Update page on change-2
Here's how it works when you run the app:
Update page on change-3

Changing keyboard type

When the keyboard opens by default, you can type any text. You might want user input in a certain format, such as a phone number, email address, website URL, etc. In this situation, you can choose a predefined keyboard type to present the appropriate key selections.
To change the keyboard type, select the TextField widget, move to the properties panel, find the Keyboard Type dropdown, and set the right one.
Keyboard Types
Changing keyboard type

Masking input

You might want to allow users to provide input in a specific format. For example, if you want a date in a format like MM/DD/YYYY, where all input must be a number, and its length should not exceed eight digits. You can do so by formatting the user input using the specific mask.
To mask the user input, select the TextField widget, move to the properties panel, find the Mask dropdown, and set it to the one you need.
If the required format is not on the list, you can select Custom and specify the Custom Mask. The '#' sign represents the number, and 'A' represents a letter. Here are some examples of the Custom Masks:
Input
Custom Mask
Credit card number (e.g., 3424 4353 5453 3535)
#### #### #### ####
Custom date (e.g., 12-Jan-2023)
##-AAA-####
Masking input

Filtering input

You might want to allow users to provide specific input for the fields, such as a payment and user name. (i.e., only letters, numbers, or a combination of both). You can do so by filtering the user input. When you apply a filter in TextField, it will only accept the input if it falls in a specified format.
To filter the user input, select the TextField widget, move to the properties panel, find the Filter dropdown, and set it to the one you need.
If the required format is not on the list, you can select Custom Regexp and specify the Custom Filter. Here are some examples of Custom Regexp:
Input
Custom Filter
Email (e.g., [email protected])
^[a-zA-Z0-9_.+-][email protected][a-zA-Z0-9-]+.[a-zA-Z0-9-.]+$
IP address (e.g., 192.168.1.1)
^\d{1,3}.\d{1,3}.\d{1,3}.\d{1,3}$
Time in the 24-hour format (e.g., 13:45)
^([01]?[0-9]|2[0-3]):[0-5][0-9]$
Filtering input

TextField with prefilled value

You may want 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 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.
TextField with prefilled value

Adding label

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 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.
Adding label-1
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 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.
Adding label-2

Setting hint text

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 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.
Setting hint text-1
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.
Setting hint text-2

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.

Changing line height

Here are the instructions for changing the text line height.

Adjust letter spacing

Changing width

By default, the TextField widget takes all the available space in the horizontal direction. You might want to limit its width to match your design. See how to change the width of this widget.

Align text Inside

To align the text inside the TextField:
  • Select TextField from the widget tree or 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.
Align text Inside

Add leading icon

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 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 properties to change the icon's size and color, respectively.
Add leading icon

Adding trailing icon

The trailing icon appears at the end of the TextField. It helps in indicating the purpose of TextField.
To add the trailing icon:
  • Select the TextField widget, move to the properties panel, and find the Trailing Icon property.
  • Click on the None button, and then search and select the icon.
Adding trailing icon

Decorating TextField

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

Changing TextField color

To change the background color of TextField:
  • Select TextField from the widget tree or 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 the Palette and Simple buttons.
Changing TextField color

Adding border

Here's an example of how you can add a border around the TextField:
  • Select TextField from the widget tree or the canvas area.
  • Move to the Property Editor and scroll down to the Input Decoration Properties section.
  • Select from the Input Border Type dropdown.
    • Choose Outline to place a border around the entire field.
    • Choose Underline to place a border only on the bottom of the field.
    • Choose None to completely remove the border.
  • Scroll down a bit to find the Border Color and Error Border Color properties, 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 buttons.
  • Find the Border Width property below, and 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.
Adding border

Add content padding

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

Reducing TextField height

To reduce TextField's height to as minimum as possible, select the TextField widget, move to the properties panel, and enable the Dense property.
Reducing TextField height

Set color dynamically

See how to set a color from variable to any color property of this widget.

Hiding keyboard on tap

After entering a text, you have to press the back button in Android and the done button (inside the onscreen keyboard) in iOS. But some Android phones hide the virtual (on-screen) back button while interacting with the app, and iOS doesn’t show the done button when the numeric keyboard is open. So to overcome such scenarios, you can hide the keyboard by tapping anywhere on the page.
Hiding keyboard on tap-1
To hide/close the keyboard by tapping anywhere on the page:
  • Select the page.
  • Move to the Property Editor, and under the Page (Scaffold) Properties section, find the Hide Keyboard on Tap property and check/uncheck to enable/disable hiding the keyboard on tap.
Hiding keyboard on tap-2

Showing Firestore data

To show the data retrieved from your Firestore collection and document into the TextField widget, ensure you:

Trigger action

The TextField widget provides you the two types of actions (aka callbacks):
  1. 1.
    On Submit: Actions under this will be triggered when you finish entering the text in the TextField widget. i.e., pressing a done button inside the soft keyboard.
  2. 2.
    On Change: Actions under this will be triggered whenever you enter or delete a character in the TextField widget.
Be careful about adding the actions under the On Change. Specifically, you should avoid adding any action that will take more time.
Showing TextField value in snackbar message
To trigger an action:
  • Select the TextField widget from the widget tree or canvas area.
  • Select Actions from the Properties panel (the right menu), and click + Add Action.
  • Select the Type of Action among the On Submit and On Change.
  • Now you can add any action here.
Trigger action on TextField

Show/Hide TextField

Please find the instructions to show/hide the widget here