The RichText widget is used to display text with multiple styles and colors in a single paragraph. It allows you to customize different sections of your text separately, such as changing the color and font size or even adding actions.
You could use this widget to create more visually interesting and engaging text that are sure to capture the attention of your users! For example, a news app that displays articles with rich text formatting such as bold, italics, underlined, different font sizes, and colors.
RichText widget

Adding RichText widget

To add the RichText widget:
  1. 1.
    First, click on the + Add Widget, drag the RichText widget from the Base Elements tab, or add it directly from the widget tree.
  2. 2.
    By default, it adds only a single TextSpan (a section of a text) widget; to add more, move to the properties panel and click Add TextSpan.
  3. 3.
    To stylize any TextSpan, select the customize icon (with the letter A) and choose the Text Style.
  4. 4.
    To add an action, select any RichTextSpan from the widget tree, move to the properties panel, select actions, and add the action as you would do normally.
Adding RichText widget


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

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.

Set max lines

Here are the instructions for setting the max lines.

Adding action

To perform any action on click of this widget, add an Action.

Showing backend data

See how to retrieve data from your backend (Firebase/Supabase) and display it on this widget.
Last modified 2mo ago