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

Text Widget
To add the Text widget to your project:
- 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.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.
.gif?alt=media&token=85118951-8e3c-4893-ad48-ed4131d1044a)
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.
Here's how you align the text inside the Text widget:
- 1.Select the Text from the widget tree or the canvas area.
- 2.Move to the Property Editor (on the right side of your screen) and scroll down to the Text Properties section.
- 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.
.gif?alt=media&token=18504490-b55a-4833-a6aa-be896d811d64)
Align text inside of a Text widget
For consistency, we recommend creating your custom text styles before starting your project.
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.Wrap your Text widget inside of the Container widget and set its width to infinite and height to 50.
- 2.Select the Text from the widget tree or the canvas area.
- 3.Move to the Property Editor (on the right side of your screen) and scroll down to the Text Properties section.
- 4.Scroll down more to find the Auto Size checkmark and enable it. (Click on it)
- 5.Try writing the long text.
- 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.
.gif?alt=media&token=4d7d468b-aff0-4677-9f8f-3c8afc482c30)
Enabling the auto size
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.Select the Text from the widget tree or the canvas area.
- 2.Move to the Property Editor (on the right side of your screen) and scroll down to the Text Properties section.
- 3.Scroll down and, find the Max character allowed property, enter the value to limit the number of characters.
- 4.Set the Text Overflow Replacement to either Clip/Cutoff or Ellipsis (...)
.gif?alt=media&token=7bfd2c7e-44cf-4cf2-aaf7-da3ede35afe7)
Setting text overflow replacement-1
Here's how it looks when you run the app:
.gif?alt=media&token=1b6643c0-be9b-4f8f-8899-3d7b84f45b17)
Setting text overflow replacement-2
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.Select the Text from the widget tree or the canvas area.
- 2.Move to the Property panel (on the right side of your screen) and scroll down to the Text Properties section.
- 3.Find the Selectable toggle and enable it.

Allow copying text
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.Select the Text from the widget tree or the canvas area.
- 2.Move to the Property panel (on the right side of your screen) and scroll down to the Text Properties section.
- 3.Find the Gradient toggle and enable it.
- 4.To add colors from templates, click on theicon and select from the list.
- 5.To add your own colors:
- 1.Select the Type among the Linear and Radial. The Linear distributes the colors horizontally, whereas the Radial circularly spreads the color.
- 2.If you choose Linear, specify the Direction and for Radial, specify the Radius.
- 3.Add/Remove or customize the existing colors.

Adding gradient color
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.
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.
Use the instructions below to format a number:
- 1.
- 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.After selecting a variable, set the Available Options to Number Format and Number Format Options to the required type.
- 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.Select Automatic to show decimal value based on the user's country.
- 2.Select Period for Decimal to show decimal value with a period (e.g., 1.200).
- 3.Select Comma for Decimal to show decimal value with a comma (e.g., 1,200).
- 2.If you choose Custom:
- 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.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.To display this number as currency, enable the Display as Currency toggle and specify the Currency Symbol.
- 5.(Optional) set the Default Variable Value to 0.
- 6.Click Confirm.

Example: Format a number in decimal
To show the data retrieved from your Firestore collection and document into the Text widget, ensure you:
- 1.
- 2.
- 3.
- 4.
Last modified 1mo ago