StyledText

StyledText is a wrapped Text widget that allows you to style the text using 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 parameter set to true by default. This means that the style attributes will be inherited from the parent widget. However, remember that modifier 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 variable is an instance of TextSpecUtility, which facilitates the construction of TextSpecAttribute objects. These objects are used to style and manage the visuals of StyledText and AnimatedTextSpecWidget.

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`

This allows you to style TextStyle attributes efficiently, creating 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();

PressableBox Icon