FlutterFlow Docs
Search
⌃K

TextField

The TextField widget allows users to enter text, numbers, and symbols in your app. You can use the TextField widget to build forms, send messages, dialogs, search, etc.
TextField widget

Adding TextField widget

Let's see how to add a TextField widget and see an example of displaying its value in an Alert Dialog.
Displaying TextField value in an Alert Dialog
Here are the steps:
  1. 1.
    First, add the TextField widget, move to the properties panel and give it a name.
  2. 2.
    Move to the properties panel, add an Alert Dialog action. While adding this action, provide the Message From Variable > Widget State > [TextFieldName].
Adding TextField widget

Customizing

You can customize the appearance and behavior of this widget using the various properties available under the properties panel.

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.

Adding multiline/auto expand support

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.
To make a TextField multiline/auto-expand, move the Properties Panel > 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

Setting prefilled value

You might want to display a TextField with some initial value. This can be any specific value such as "What are you looking for", "Input your Email", or a value from any variable.
To set the initial value, move to the Properties Panel > TextField Properties > Initial Value and enter the specific value or Set from Variable.
Setting prefilled value

Styling the text

See how to style a text.

Changing line height

Adjust letter spacing

Adding label

Showing a label 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, move to the Properties Panel > Label Properties > enter the Label Text.
Adding label

Setting hint text

Showing a hint text 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, move to the Properties Panel > Hint Properties > enter the Hint Text.
To change the hint style, turn on the Custom Hint Style toggle and change it as per the instructions here.
Setting hin text

Decorating TextField

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

Changing TextField background color

To change the background color, move to the Properties Panel > Input Decoration Properties > enable Filled > set the Fill Color.
Changing TextField background color

Adding border

Here's an example of how you can add a border around the TextField:
  1. 1.
    Select TextField widget, move to the Properties Panel > Input Decoration Properties > select the Input Border Type.
    1. 1.
      Choose Outline to place a border around the entire field.
    2. 2.
      Choose Underline to place a border only on the bottom of the field.
    3. 3.
      Choose None to completely remove the border.
  2. 2.
    You can also set a color to the border for various states, such as when TextField is in a Focused or Error state. To do so, use the Border Color, Focused Border Color, and Error Border Color.
  3. 3.
    To increase the border thickness, use the Border Width property.
  4. 4.
    To create the rounded border, use the Border Radius property. By default, any value your enter 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. Use the refresh icon to reset the values.
Adding border

Add content padding

Content Padding adds space between the test and the border of your TextField.
To add content padding, move to the Properties Panel > Input Decoration Properties > enter the Content Padding value.
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 > enable the Dense property.
Reducing TextField height

Adding Icon

You might want to add an icon inside the TextField, either at the start or end. You can do so using the Leading and Trailing Icon property.
To add a leading or trailing icon, move to the Properties Panel > find the Leading and Trailing Icon property > Click on the None button > search and select the icon.
Adding leading and trailing icon

Using TextField for passwords

To make a TextField a Password Field, move to the Properties Panel > Additional Properties > enable the Password Field.
When you enter a password, it will be obscured with the dot (•). You can see and confirm the entered password by clicking on the Toggle Hide Password Icon (
). You can also customize its size and color.
Using TextField for passwords

Clear TextField

A clear field icon inside the TextField allows the users to quickly remove the entered text.
To clear a TextField, move to the Properties Panel > Additional Properties > enable the Show Clear Field Icon. You can also customize the icon's color and size.
Clear TextField

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 > Additional Properties > 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 > Additional Properties > enable the Autocomplete property.
Now you can customize the autocomplete using the Autocomplete Properties section. Here's how you do it:
  1. 1.
    Inside the Autocomplete Options, click Add Option and provide item names that you would like to appear in the suggestion box.
  2. 2.
    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.
Enabling Autocomplete
  1. 3.
    You can also customize the appearance of the suggestion box using properties such as Height, Elevation, Background Color, and Highlight Color (highlighting the currently selected option in the dropdown list).
  2. 4.
    To style the text displayed inside the dropdown list, you can use the Option Text Style and Substring Style (can be used to highlight the matching text in an item name).
Change autocomplete text style

Auto fill hint

When Auto Fill Hint property is enabled, it uses the operating system's autofill service to suggest the relevant information to the user, such as usernames, passwords, or credit card numbers, based on the context of the text field.
For example, you have a form where the user needs to enter their credit card information. You can use this property to help the autofill service suggest the user's credit card number and expiration date.
To enable the Auto Fill Hint property:
  1. 1.
    Select the TextField widget, move to the Properties Panel > Additional Properties > enable the Auto Fill Hint property.
  2. 2.
    Set the Auto Fill Hint Options to one that you want to provide a hint about.
The availability and behavior of the Auto Fill Hint may vary by platform and user settings, and it does not guarantee that the operating system's autofill service will suggest the correct information to the user.
Auto Fill Hint

Update page on change

You might 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.
Here's an example of displaying the TextField value in a Text widget in realtime:
  1. 1.
    Select the TextField widget, move to the Properties Panel > Additional Properties > enable the Update Page On Change property.
  2. 2.
    Also, set the Update Delay (ms) after which the page will refresh its UI when the user has stopped typing. 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. For this example, let's keep it to 0.
  3. 3.
    Now select the Text widget, move to the Properties Panel > Set from Variable > Widget State > [TextFieldName]. Tip: You can also set the default value to be displayed until the user has entered any text.
We advise setting the delay value if you make an API call that accepts the input from TextField.
Update page on change

Read only TextField

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

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 > Additional Properties > set the Keyboard Type to 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 > Additional Properties > set the Mask dropdown 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 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 restrict the type of characters that can be entered into a TextField. Let's say you are building an app that requires its employees to enter their employee ID when they clock in and out for their shifts. The employee ID consists of only letters and numbers, and the app should only allow these characters to be entered. You can do so by filtering the user input
To filter the user input, select the TextField widget, move to the Properties Panel > Additional Properties > set the Filter dropdown to the one you need.
To check user input for certain criteria or requirements (e.g., email), see step 3 on how to add validation.
Filtering input

Validating input

You can validate the TextField value by wrapping it inside the Form widget and adding the validation criteria.
Tip: Filtering ensures that only the allowed characters or values are entered, whereas the validation checks the entire input data against certain criteria. Both techniques can be used together or independently to ensure the correctness of user input in a TextField widget.

Capitalization

You might want to control the capitalization of text when the user is typing, and also when the text is displayed. The Capitalization property allows you to specify how the text entered in the TextField should be capitalized.
This property accepts one of the following values:
  • None: This value means that no capitalization should be applied to the text. All the characters will be displayed as they are typed.
  • Words: This value capitalizes the first letter of each word in the text.
  • Sentences: This value capitalizes the first letter of each sentence in the text.
  • Characters: This value capitalizes every character in the text.
To set the capitalization, select the TextField widget, move to the Properties Panel > Additional Properties > set the Capitalization dropdown to the one you need.
Capitalization

Show/Hide widget

See how to show or hide any widget using the Conditional Visibility property.

Responsive visibility

See how to add responsive visibility to any widget.

Add padding & alignment

See how to add padding and alignment to any widget.

Set color dynamically

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

Hiding keyboard on tap

Hiding the keyboard when the user taps outside of a TextField is a common user experience pattern that many apps use to improve usability. When the keyboard is open, it can obscure important information on the screen and make it difficult for the user to interact with other parts of the app.
Adding this behavior in your app can make it easier for these users to interact with other parts of the app without interference from the keyboard. It can also make your app feel more polished and professional.
Hiding keyboard on tap-1
To hide/close the keyboard, select the page, move the Properties Panel > enable the Hide Keyboard on Tap.
Hide keyboard on tap

Showing Firestore data

To show the data retrieved from your Firestore collection and document into the TextField widget, ensure you:
  1. 2.
    Completed all steps in the Firebase Setup section for your project.
  2. 3.
    ​Retrieved Data from either collection or document.
  3. 4.
    Finally, to show data in the TextField widget, follow the steps here.​

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:
  1. 1.
    Select the TextField widget from the widget tree or canvas area.
  2. 2.
    Select Actions from the Properties panel (the right menu), and click + Add Action.
  3. 3.
    Select the Type of Action among the On Submit and On Change.
  4. 4.
    Now you can add any action here.
Trigger action on TextField