Skip to main content

​
Typography

The ChromiaText component simplifies text styling by providing direct access to the Chromia design system’s typography scale. It supports all standard Text widget properties with built-in typography integration.

​
Basic Usage

ChromiaText(
  'Hello World',
  type: ChromiaTypographyType.headlineLarge,
)

​
ChromiaText

A customizable text widget with built-in Chromia typography styles.

​
Parameters

​
data
String
required
The text to display.
​
type
ChromiaTypographyType
default:"ChromiaTypographyType.bodyMedium"
The typography type to apply. Determines the base text style from the Chromia typography scale.
​
color
Color?
Optional color override. If provided, this color will override the color from the typography style.
​
style
TextStyle?
Additional text style to merge with the typography style. Use this to customize specific properties while maintaining the base typography style.
​
margin
EdgeInsetsGeometry
default:"EdgeInsets.zero"
The margin around the text widget. Use this for adding spacing around the text without wrapping in additional widgets.
​
textAlign
TextAlign?
How the text should be aligned horizontally.
​
maxLines
int?
An optional maximum number of lines for the text to span. If the text exceeds the given number of lines, it will be truncated according to overflow.
​
overflow
TextOverflow?
How visual overflow should be handled. Common values: TextOverflow.clip, TextOverflow.ellipsis, TextOverflow.fade.
​
softWrap
bool?
Whether the text should break at soft line breaks.
​
textScaler
TextScaler?
The font scaling strategy to use. Controls how the text scales relative to the configured font size.

​
Typography Types

The component supports all Chromia typography types:
  • Display: displayLarge, displayMedium, displaySmall
  • Headline: headlineLarge, headlineMedium, headlineSmall
  • Title: titleLarge, titleMedium, titleSmall
  • Body: bodyLarge, bodyMedium, bodySmall
  • Label: labelLarge, labelMedium, labelSmall

​
Examples

​
Text with Color Override

ChromiaText(
  'Welcome',
  type: ChromiaTypographyType.titleMedium,
  color: Colors.blue,
)

​
Text with Margin

ChromiaText(
  'Spaced text',
  type: ChromiaTypographyType.bodySmall,
  margin: EdgeInsets.all(16),
)

​
Custom Styled Text

ChromiaText(
  'Custom styled',
  type: ChromiaTypographyType.bodyMedium,
  style: TextStyle(
    fontWeight: FontWeight.bold,
    letterSpacing: 1.5,
  ),
)

​
Text with Overflow Handling

ChromiaText(
  'Very long text that might overflow...',
  type: ChromiaTypographyType.bodyMedium,
  maxLines: 2,
  overflow: TextOverflow.ellipsis,
)

​
ChromiaRichText

A rich text widget with built-in Chromia typography styles for displaying multi-styled text.

​
Parameters

​
text
InlineSpan
required
The text to display as a TextSpan tree.
​
textAlign
TextAlign
default:"TextAlign.start"
How the text should be aligned horizontally.
​
softWrap
bool
default:"true"
Whether the text should break at soft line breaks.
​
overflow
TextOverflow
default:"TextOverflow.clip"
How visual overflow should be handled.
​
maxLines
int?
An optional maximum number of lines for the text to span.
​
margin
EdgeInsetsGeometry
default:"EdgeInsets.zero"
The margin around the text widget.

​
Factory Constructors

​
ChromiaRichText.highlight

Creates a rich text widget with highlighted words.
​
text
String
required
The full text to display.
​
highlights
List<String>
required
List of words to highlight.
​
baseStyle
TextStyle?
Base text style.
​
highlightStyle
TextStyle?
Style for highlighted text.
​
caseSensitive
bool
default:"false"
Whether highlighting is case-sensitive.

​
ChromiaRichText.labelValue

Creates a rich text widget for label-value pairs.
​
label
String
required
The label text.
​
value
String
required
The value text.
​
separator
String
default:"' '"
Separator between label and value.
​
labelStyle
TextStyle?
Style for the label.
​
valueStyle
TextStyle?
Style for the value.

​
Examples

​
Basic Multi-Style Text

ChromiaRichText(
  text: TextSpan(
    children: [
      TextSpan(text: 'Hello '),
      TextSpan(
        text: 'World',
        style: TextStyle(fontWeight: FontWeight.bold),
      ),
    ],
  ),
)

​
Using Typography Types

final theme = context.chromiaTheme;

ChromiaRichText(
  text: TextSpan(
    style: theme.typography.bodyMedium,
    children: [
      TextSpan(text: 'Regular text '),
      TextSpan(
        text: 'bold text',
        style: theme.typography.bodyMedium.copyWith(
          fontWeight: FontWeight.bold,
        ),
      ),
      TextSpan(text: ' and '),
      TextSpan(
        text: 'colored text',
        style: TextStyle(color: theme.colors.primary),
      ),
    ],
  ),
)

​
Highlight Specific Words

ChromiaRichText.highlight(
  text: 'This is important text',
  highlights: ['important'],
  highlightStyle: TextStyle(
    color: theme.colors.error,
    fontWeight: FontWeight.bold,
  ),
)

​
Label with Value

ChromiaRichText.labelValue(
  label: 'Name:',
  value: 'John Doe',
)

​
Interactive Text

ChromiaRichText(
  text: TextSpan(
    style: theme.typography.bodyMedium,
    children: [
      TextSpan(text: 'Click '),
      TextSpan(
        text: 'here',
        style: TextStyle(
          color: theme.colors.primary,
          decoration: TextDecoration.underline,
        ),
        recognizer: TapGestureRecognizer()
          ..onTap = () => print('Tapped!'),
      ),
      TextSpan(text: ' for more info'),
    ],
  ),
)

Build docs developers (and LLMs) love

Get started for freeTalk to us