Mix 1.0 is in Beta. Documentation is currently a work-in-progress →
Docs
Widgets
Text

StyledText

A wrapped Text widget, but with the ability to style the text using the Mix style attributes. This simplifies the process of applying consistent and reusable styling across Text widgets.

Usage

StyledText(
  'Hello World',
  style: Style(
    text.style.color.red(),
    text.style.fontSize(20),
  )
)

Inheritance

The StyledText widget has the inherit flag true by default. That means that the style attributes will be inherited from the parent widget. However, remember that decorators attributes cannot be inherited.

Box(
  Style(
    text.style.color.red(),
    text.style.fontSize(20),
  ),
  child: StyledText('Hello World');

In this example all StyledText widgets will inherit the style attributes from the parent Box widget.

Utilities

The text constant is an instance of TextUtility, which facilitates the construction of TextSpecAttribute objects. These objects are leveraged to style and manage visuals of text widgets.

overflow

Handle the overflow behavior of text (e.g., ellipsis, fade):

// Use ellipsis when text overflows
text.overflow.ellipsis();
 
// Clip the overflowing text
text.overflow.clip();

strutStyle

Manage the strut style, impacting line height and the positioning of text spans:

// Define a customized StrutStyle
text.strutStyle(...); // StrutStyle instance

textAlign

Align text within its bounding box:

// Center-align the text
text.textAlign.center();
 
// Left-align the text
text.textAlign.left();
 
// Right-align the text
text.textAlign.right();

maxLines

Limit the number of lines for the text block:

// Restrict text to two lines
text.maxLines(2);

textWidthBasis

Determine how text width is measured:

// Measure text width based on the longest line
text.textWidthBasis.longestLine();
 
// Measure text width based on the parent container
text.textWidthBasis.parent();

textHeightBehavior

Define how text height adjustments are made:

// Set a specified text height behavior
text.textHeightBehavior(...); // TextHeightBehavior instance

textDirection

Set the reading directionality of the text:

// Left-to-right text direction
text.textDirection.ltr();
 
// Right-to-left text direction
text.textDirection.rtl();

softWrap

Choose whether the text should soft-wrap:

// Enable soft wrapping
text.softWrap(true);
 
// Disable soft wrapping
text.softWrap(false);

textScaleFactor

Adjust the text scale factor for sizing:

// Increase text size by a factor of 1.5
text.textScaleFactor(1.5);

style

Allows to style TextStyle attributes efficiently, creating a cohesive and maintainable text styling semantics.

color

Manipulate the TextStyle color:

// Leverage utilities for common colors
text.style.color.red();

fontWeight

Set the weight (boldness) of the font:

text.style.fontWeight.bold(); // Bold
text.style.fontWeight.w500(); // Medium

fontStyle

Define the style of the text (italic, normal):

text.style.fontStyle.italic(); // Italic
text.style.fontStyle.normal(); // Normal

decoration

Control text decorations like underline, line-through:

text.style.decoration.underline(); // Underline
text.style.decoration.lineThrough(); // Line-through

fontSize

Adjust the font size:

text.style.fontSize(16.0);

backgroundColor

Specify the background color for the text:

text.style.backgroundColor.yellow();

decorationColor

Set the color of text decorations

text.style.decorationColor.blue();

shadow

Apply shadows to the TextStyle:

text.style.shadow(Shadow(...)); // Custom shadow

textBaseline

Align text with a particular baseline

text.style.textBaseline.alphabetic();

height

Define the line height of the text:

text.style.height(1.5); // 1.5x line height

letterSpacing

Adjust the spacing between letters:

text.style.letterSpacing(1.5); // Letter spacing 1.5

wordSpacing

Adjust the spacing between words:

text.style.wordSpacing(1.5); // Word spacing 1.5

shadows

Assign multiple shadows to the text:

text.style.shadows([
  Shadow(...),
  Shadow(...),
]); // List of shadows

fontFeatures

Enable specific font features:

text.style.fontFeatures([
  FontFeature.enable('smcp'),
]);

locale

Set the locale for the text, affecting how it's displayed:

text.style.locale(Locale('en')); // English locale

Directives

Transform text data through various case operations:

// Transform text to uppercase
text.uppercase();
 
// Transform text to lowercase
text.lowercase();
 
// Capitalize the first letter of each word
text.capitalize();
 
// Convert text to title case
text.titleCase();
 
// Capitalize the first letter of sentences
text.sentenceCase();
PressableBoxIcon