Text

The Text widget is used to display a piece of text on the screen. It's one of the most commonly used widgets in app development.

For example, if you're creating a weather app, you might use a Text widget to display the temperature. In the app, you might see "72°F" on the screen, which would be rendered using a Text widget. This widget also allows you to customize the text's appearance, such as its color, font size, and style, to fit the design of your app.

Text widgets

Adding Text widget

Here's how you add & modify the Text widget:

1. Open the Widget Palette and locate the Text widget under the Base Elements tab. You can drag it into your desired location or add it directly from the widget tree.

2. Move to the Properties Panel (on the right side of your screen) and modify the properties to get the desired look and behavior.

Customizing

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

Styling the text

Here are the instructions on styling the Text.

Set max lines

Here are the instructions for setting the max lines.

Enabling the auto size

Sometimes, long text may get clipped when displayed in a limited space. If you want to show the entire text by adjusting the font size, you can use the Auto Size feature.

To enable and see the Auto Size in action:

1. To demonstrate auto size, let's set max lines to two. This means that no matter how long the text is, it will be restricted to just two lines.

2. Select the Text widget, navigate to the Properties Panel > Text Properties > turn on the Auto Size toggle.

3. Now, try writing a long text.

4. You can also set the Min Font Size to specify the smallest font size the text can have when there's not enough space.

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.

Important: This option is only available if the value is set from the variable.

To set the text overflow replacement:

1. Select the Text widget, navigate to the Properties Panel > Text Properties > enter the value for Max character to limit the number of characters.

2. Set the Text Overflow Replacement to either Clip/Cutoff or Ellipsis (...)

Setting text overflow replacement

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, select the Text widget, navigate to the Properties Panel > Text Properties > enable the Selectable toggle.

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. Select the Text widget, navigate to the Properties Panel > Text Properties > enable the Gradient toggle.

2. To add colors from templates, click on the icon and select from the list.
3. 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.

Set display value

See how to set the display value here.

Common widget properties

See how to work with Widget Styling, Visibility, Padding & Alignment, and Testing.

Formatting numbers

You may want to format large numbers for better readability. Displaying a number like 2,354,000 or 4,356,634,444 instead of 2354000 or 4356634444 enhances the user experience.

For instance, it's clearer to show the population as 1,200,000 rather than 1200000 and currency values like $2K or $5M instead of $2000 or $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. Select the Text widget, move to the properties panel > Set from Variable > display the value from a variable of type Integer or Double. (e.g., App State > App State Variable Name).

2. 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.

3. To display this number as currency, enable the Display as Currency toggle and specify the Currency Symbol.

4. Click Confirm.

---

Last Updated Date: April 5, 2024