FlutterFlow Docs
Troubleshooting GuidesDocs Feedback
Ask or search…
⌃K
Links
Comment on page

Text

The Text widget is used to show text on the screen. It is one of the most frequently used widgets.
Text Widget

Adding a Text to your project

To add the Text widget to your project:
  1. 1.
    Drag the Text widget from the Base Elements or Most Frequently Used Elements tab (in the Widget Panel) or add it directly from the widget tree.
  2. 2.
    To change the text, Move to the Property Editor (on the right side of your screen), find the text with Hello World, and change it to Welcome.
Adding a Text to your project
Every Text widget added to the project sets the text as Hello World by default, which can be changed by entering the value or setting from a variable.

Customizing

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

Add padding

​Here are the instructions on how to add padding.

Adjust alignment

​Here are the instructions for adjusting the alignment.

Styling the text

​Here are the instructions on styling the Text.

Changing line height

​Here are the instructions for changing the text line height.

Align text inside of a Text widget

Here's how you align the text inside the Text widget:
  1. 1.
    Select the Text from the widget tree or the canvas area.
  2. 2.
    Move to the Property Editor (on the right side of your screen) and scroll down to the Text Properties section.
  3. 3.
    Find the Text Align property. By default, the first alignment option is selected, which is Left aligned. Click on the other alignment option to change the text alignment.
Align text inside of a Text widget
For consistency, we recommend creating your custom text styles before starting your project.

Enabling the auto size

Sometimes, you may see a text getting clipped if you try to show the long text in a limited size. In case you want to display the whole text by compromising on the font size, you can enable the Auto Size feature.
To enable and see the Auto Size in action:
  1. 1.
    Wrap your Text widget inside of the Container widget and set its width to infinite and height to 50.
  2. 2.
    Select the Text from the widget tree or the canvas area.
  3. 3.
    Move to the Property Editor (on the right side of your screen) and scroll down to the Text Properties section.
  4. 4.
    Scroll down more to find the Auto Size checkmark and enable it. (Click on it)
  5. 5.
    Try writing the long text.
  6. 6.
    You can also specify the Min Font Size to set the smallest font size this text can have when there is not enough space.
Enabling the auto size

Setting text overflow replacement

You may want to limit the number of characters shown inside the Text widget and replace the extra characters with the ellipsis or completely hide them.
This option is only available if the value is set from the variable.
To set the text overflow replacement:
  1. 1.
    Select the Text from the widget tree or the canvas area.
  2. 2.
    Move to the Property Editor (on the right side of your screen) and scroll down to the Text Properties section.
  3. 3.
    Scroll down and, find the Max character allowed property, enter the value to limit the number of characters.
  4. 4.
    Set the Text Overflow Replacement to either Clip/Cutoff or Ellipsis (...)
Setting text overflow replacement-1
Here's how it looks when you run the app:
Setting text overflow replacement-2

Allow copying text

You might want to allow your users to copy the text and paste it somewhere else. For example, allowing users to copy the email Id.
To allow copying a text:
  1. 1.
    Select the Text from the widget tree or the canvas area.
  2. 2.
    Move to the Property panel (on the right side of your screen) and scroll down to the Text Properties section.
  3. 3.
    Find the Selectable toggle and enable it.
Allow copying text

Adding gradient color

Adding a gradient color to the text gives it a modern look and feel. You can either use our ready-made templates or create it from scratch.
Here's how you do it:
  1. 1.
    Select the Text from the widget tree or the canvas area.
  2. 2.
    Move to the Property panel (on the right side of your screen) and scroll down to the Text Properties section.
  3. 3.
    Find the Gradient toggle and enable it.
  4. 4.
    To add colors from templates, click on the
    icon and select from the list.
  5. 5.
    To add your own colors:
    1. 1.
      Select the Type among the Linear and Radial. The Linear distributes the colors horizontally, whereas the Radial circularly spreads the color.
    2. 2.
      If you choose Linear, specify the Direction and for Radial, specify the Radius.
    3. 3.
      Add/Remove or customize the existing colors.
Adding gradient color

Set color dynamically

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

Formatting numbers

You might want to display a number with a special format. When you show a large number (e.g., 2354000, 4356634444) as it is, it gives a poor user experience. Formatting a large number helps you increase readability.
For example, showing the population as 1,200,000 instead of 1200000 and a currency value of $2K/$5M instead of $2000/$5000000.

Types of formatting

Below are the types of formatting that we support:
1. Decimal
Shows numbers in decimal format (e.g., 1,200,000 and 1.200.000).
​
2. Percent
Shows numbers in percentage format (e.g., 28%, 99.99%).
​
3. Scientific
Shows numbers in scientific format (e.g., 1e3, 1E6).
​
4. Compact
Shows numbers in compact format (e.g., 2.1K, 2.3M, 5B).
​
5. Compact Long
Shows numbers in compact long format (e.g., 2.1 thousand, 2.3 million, 5 billion).
​
6. Custom
If the given formatting options do not fit your requirement, you can use specify a custom format.
​

Format a number

Use the instructions below to format a number:
  1. 1.
    Select the Text widget, move to the properties panel, and click Set from Variable.
  2. 2.
    Select Source > Available Options to display the value from a variable of type Integer or Double. (e.g., App State > App State Variable Name).
  3. 3.
    After selecting a variable, set the Available Options to Number Format and Number Format Options to the required type.
    1. 1.
      If you choose Decimal, you must set the Decimal Type as well. The decimal values can be shown in two ways, i.e., 1,200 (with a comma) and 1.200 (with a period).
      1. 1.
        Select Automatic to show decimal value based on the user's country.
      2. 2.
        Select Period for Decimal to show decimal value with a period (e.g., 1.200).
      3. 3.
        Select Comma for Decimal to show decimal value with a comma (e.g., 1,200).
    2. 2.
      If you choose Custom:
      1. 1.
        Find the Custom Format box, and enter your format. For example, entering ###,###.### will convert the number 123456.789 into 123,456.789, and 000.00 will convert the number 12.786 into 012.79.
      2. 2.
        In the Locale input box, enter the locale in which you want to display the number. (If you leave this property empty, the locale is automatically set as per the user's location). Learn more about how to format a number here.
  4. 4.
    To display this number as currency, enable the Display as Currency toggle and specify the Currency Symbol.
  5. 5.
    (Optional) set the Default Variable Value to 0.
  6. 6.
    Click Confirm.
Example: Format a number in decimal

Adding action

To perform any action on click of the Text, add an Action in FlutterFlow.

Showing Firestore data

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

Show/hide Text

Please find the instructions to show/hide the widget here.
Previous
Base Elements
Next
RichText
Last modified 3mo ago