Skip to main content

Text

Text is a fundamental element in any user interface. It conveys information and guides users through interactions. In app development, presenting text effectively can significantly enhance the user experience by making information accessible and interactions intuitive. Two common widgets used for displaying text in FlutterFlow are the Text widget and the RichText widget. Each serves a distinct purpose and offers different capabilities for integrating text into an application.

Text Widget​

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

For example, in this screen, the Text widget is used to present different pieces of information clearly and effectively. The Text widgets display the product name, "Men's Harrington Jacket," its price, "$148," and a detailed description of the product. These Text widgets are styled differently to emphasize specific pieces of information.

The Text widget can be found under the Base Elements tab in the Widget Palette. You can either drag it to your desired location on the screen or insert it directly via the widget tree.

Once the Text widget is selected, the Properties Panel on the right side becomes active, allowing you to customize its style. Here, you can adjust attributes such as font size, color, alignment, and more to tailor the appearance to your design needs.

RichText Widget​

The RichText widget offers more formatting options than the basic Text widget. It allows you to mix multiple styles within a single text sequence, enabling the creation of stylized textual content.

This widget uses a tree of TextSpan objects to define the rich formatting options, including different fonts, sizes, and colors for various parts of the text. RichText is particularly useful for text-heavy applications that need inline styling and linking, such as in a formatted article or a document viewer.

The RichText widget can be found under the Base Elements tab in the Widget Palette. You can either drag it to your desired location on the screen or insert it directly via the widget tree.

When the RichText widget is added to your widget tree, FlutterFlow automatically creates two RichTextSpan child objects. You can modify the text value and styling of each object to create multiple styles within your paragraph.

Static text entered in a RichTextSpan is translatable and appears in the Languages table. In contrast, text assembled with the Combine Text function does not appear in the Languages table or Translate All.

To modify the RichTextSpan objects, see the quick demo below:

Common Text Styling Properties​

tip

For consistency, we recommend defining your Typography and custom text styles from Theme Settings > Typography & Icons before creating any screens.

A few things to note:

  • Line Height: Sets the height of the text (e.g., a value of 1.5 makes the line height 50% larger than the font size).

  • Text Align: Defines how text is positioned within a container, such as left-aligned, right-aligned, centered, or justified.

Advanced Properties for Text Widget​

  • Max Lines: This property specifies the maximum number of lines that the text can occupy. If the content exceeds the set number of lines, it will be truncated or end with an ellipsis, depending on the configuration. This is useful for maintaining a clean and consistent layout where text space is limited.

  • Auto Size:

    The Auto Size option allows the Text widget to automatically reduce its font size to fit within its parent widget. This ensures that the text remains legible without overflowing its container, making it especially useful for responsive designs where the display may vary across different devices.

    Configure Parent Widget Dimensions

    To enable Auto Size, the Text widget must be inside a widget that has both a defined width and height. Without these constraints, the font size cannot be adjusted automatically.

    1. Select the Text widget.
    2. Check its parent widget.
    3. Ensure both width and height are explicitly defined.
    warning

    Without defined dimensions, the Auto Size feature may not behave as expected.

    Behavior Scenarios

    The following examples illustrate how Auto Size behaves under different container configurations:

    • When the container width is set to infinity, the height is set to 100px, and Auto Size is disabled, the text may overflow beyond the container.
    • When the container width is set to infinity, the height is set to 100px, and Auto Size is enabled, the font size adjusts to fit the defined height.
    • When the container width is set to 30%, no height is defined, and Auto Size is enabled, the feature has no visible effect because the height constraint is missing.
    • When the container width is set to 70%, the height is set to 50px, and Auto Size is enabled, the text is resized to the minimum allowed font size to remain within the container.

tip

Use Auto Size with percentage-based dimensions for better responsiveness. For example, set the container width to 30% and enable Auto Size to allow the text size to adjust as the screen size changes.

note

The Auto Size feature has a minimum font size threshold. If the container becomes too small, text may clip or overflow when resizing is no longer possible.

Setting Text Overflow Replacement​

You may want to limit the number of characters shown inside the Text widget and control how the remaining text appears when it exceeds the limit.

Important

This option is only available when the Text value is set from a variable.

To set the text overflow replacement:

  1. Select the Text widget, go to Properties Panel > Text Properties, and enter a value for Max Character to limit the number of characters.

  2. Set the Text Overflow Replacement to the behavior you want:

    • Unspecified: Uses the default overflow behavior.
    • Clip: Cuts off the extra text without showing any visual indicator.
    • Ellipsis (...): Replaces the extra text with an ellipsis.
    • Fade: Fades out the overflowing text at the edge.
    • Visible: Allows the overflowing text to remain visible. Use this carefully, as it may overlap nearby widgets.

Adding Gradient Color​

Conditional Properties

Note that enabling the Gradient option disables Auto Size and Max Lines for your Text widget.

Adding a gradient color to the text gives it a modern look and feel. You can either use our ready-made templates or create one from scratch.

Here's how you do it:

  1. Select the Text widget, go to Properties Panel > Text Properties, and enable the Gradient toggle.

  2. To add your own colors:

    1. Select the Type: Linear or Radial. Linear distributes the colors horizontally, while Radial spreads the colors in a circular pattern.
    2. If you choose Linear, specify the Direction. If you choose Radial, specify the Radius.
    3. Add, remove, or customize the existing colors.
info

You can also add gradient colors from a preset template as shown in the video demo.

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:

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

Format a number​

Use the instructions below to format a number:

  1. Select the Text widget, go to Properties Panel > Set from Variable, and 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 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. Decimal values can be shown in two ways: 1,200 with a comma or 1.200 with a period.

      1. Select Automatic to show the decimal value based on the user's country.
      2. Select Period for Decimal to show the decimal value with a period (e.g., 1.200).
      3. Select Comma for Decimal to show the 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 based on 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.