Text
The Text widget is a fundamental building block for any application. It allows you to display static or dynamic text content on the screen. Whether it's a heading, a paragraph, a label, or inline text — it helps convey information clearly and effectively to users.
Adding a Text Widget
The Text widget is located in the Base Elements section of the Widget Palette. You can drag it to your desired screen location or insert it directly via the widget tree. Once selected, the Widget Properties Panel appears on the right side of the screen. Use this panel to enter your desired text and customize its appearance.
Core Concepts
Before diving into properties, it's helpful to understand two core concepts that make the Text widget powerful in Digia Studio.
1. Static vs. Dynamic Text
You can use the Text widget to display both static, unchanging text and dynamic text that is bound to a data source.
Static Text: Simply type the text you want to display directly into the
Textproperty.Dynamic Text: Use expressions to bind the
Textproperty to a variable from your app's state, an API response, or a function. This is the key to creating data-driven applications.
2. Styling Strategy: Theming vs. Customizing
Consistency is key to good design. The Text widget supports two styling modes:
Linked (Theme): The text's style is "linked" to your app's global
Typographytheme. This ensures all your text looks consistent. If you update the theme, all linked text widgets will update automatically.Unlinked (Custom): Use this for specific, one-off designs where you need to override the theme. This gives you full control over every style property for that specific widget.
Note: For design consistency and easier maintenance, it is highly recommended to use theme tokens (e.g., Headline Medium, Body Text Large) rather than custom values for text styling whenever possible. Custom styling should be reserved for unique, one-off cases.
Properties
The properties for the Text widget are organized by function. For more detailed formatting (e.g., multiple styles in one sentence), we recommend using the Rich Text widget instead.
Content
Value
The actual string content to display. Can be a static value or a dynamic expression.
Layout & Behavior
Alignment
Aligns text horizontally within its container (left, center, right, justify).
Max Lines
Limits the number of lines shown. If empty, the text will expand as needed.
Overflow
Controls how text overflows when it exceeds the available space. Options include clip, fade, ellipsis, visible, marquee.
Styling
Styling is controlled via the Text Style property, which can be Linked to a theme or Unlinked for custom styling.
Text Style
The main property for styling. Choose between Linked (theme style) and Unlinked (custom).
Font Family
The font family used (e.g., Poppins, Roboto). Only available when Text Style is Unlinked.
Size
Font size in pixels. Only available when Text Style is Unlinked.
Weight
Font weight like regular, bold, medium, etc. Only available when Text Style is Unlinked.
Height
Line height multiplier (e.g., 1.5 for 150%). Only available when Text Style is Unlinked.
is Italic
Whether the text should be displayed in italic style. Only available when Text Style is Unlinked.
Text Color
The color of the text in HEX format (e.g., #000000).
Highlight Color
The background color behind the text for highlighting effects.
Text Decoration
Adds decorative lines to text (underline, overline, line-through).
Text Decoration Color
The color of the text decoration lines.
***
Default Properties
The Text widget supports all Default Properties.
Best Practices
Use Linked styles with theme tokens (
bodyLarge,headlineSmall, etc.) for consistency and easier maintenance.Avoid long blocks of text; break content into readable chunks for better user experience.
For text with multiple styles in one block (e.g., bolding a single word), use the Rich Text widget instead.
Last updated