Skip to main content
The Stac TextStyle classes allow you to style text with fonts, colors, sizes, and decorations. There are two variants: custom text styles and theme-based text styles.

​
Custom Text Style Properties

PropertyTypeDescription
inheritbool?Whether to inherit from ambient DefaultTextStyle.
colorString?Text color.
backgroundColorString?Background color behind text.
fontSizedouble?Font size in logical pixels.
fontWeightString?Font weight (normal, bold, w100-w900).
fontStyleString?Font style: normal or italic.
letterSpacingdouble?Spacing between letters.
wordSpacingdouble?Spacing between words.
textBaselineString?Baseline alignment.
heightdouble?Line height as multiple of font size.
decorationColorString?Color for text decorations.
decorationStyleString?Decoration style: solid, dotted, dashed, wavy.
decorationThicknessdouble?Thickness of decorations.
fontFamilyString?Font family name.
fontFamilyFallbackList?Fallback font families.
overflowString?Text overflow: clip, fade, ellipsis, visible.

​
Basic Example

StacText(
  data: 'Hello, World!',
  style: StacTextStyle(
    fontSize: 24.0,
    fontWeight: StacFontWeight.bold,
    color: StacColors.blue,
  ),
)

​
Font Weights

Available font weights:
ValueDescription
w100Thin
w200Extra Light
w300Light
w400Normal (default)
w500Medium
w600Semi Bold
w700Bold
w800Extra Bold
w900Black
normalSame as w400
boldSame as w700
StacColumn(
  children: [
    StacText(
      data: 'Light Text',
      style: StacTextStyle(fontWeight: StacFontWeight.w300),
    ),
    StacText(
      data: 'Normal Text',
      style: StacTextStyle(fontWeight: StacFontWeight.normal),
    ),
    StacText(
      data: 'Bold Text',
      style: StacTextStyle(fontWeight: StacFontWeight.bold),
    ),
  ],
)

​
Text Decorations

StacColumn(
  children: [
    StacText(
      data: 'Underlined Text',
      style: StacTextStyle(
        decoration: StacTextDecoration.underline,
        decorationColor: StacColors.red,
        decorationStyle: StacTextDecorationStyle.solid,
      ),
    ),
    StacText(
      data: 'Strikethrough Text',
      style: StacTextStyle(
        decoration: StacTextDecoration.lineThrough,
      ),
    ),
    StacText(
      data: 'Wavy Underline',
      style: StacTextStyle(
        decoration: StacTextDecoration.underline,
        decorationStyle: StacTextDecorationStyle.wavy,
        decorationColor: StacColors.blue,
      ),
    ),
  ],
)

​
Theme-Based Text Style

Use theme text styles to follow Material Design typography:
Theme StyleDescription
displayLargeLargest display text
displayMediumMedium display text
displaySmallSmall display text
headlineLargeLargest headline
headlineMediumMedium headline
headlineSmallSmall headline
titleLargeLargest title
titleMediumMedium title
titleSmallSmall title
bodyLargeLarge body text
bodyMediumMedium body text (default)
bodySmallSmall body text
labelLargeLarge label (buttons)
labelMediumMedium label
labelSmallSmall label
StacColumn(
  children: [
    StacText(
      data: 'Headline',
      style: StacThemeTextStyle(textTheme: StacMaterialTextStyle.headlineLarge),
    ),
    StacText(
      data: 'Body text goes here',
      style: StacThemeTextStyle(textTheme: StacMaterialTextStyle.bodyMedium),
    ),
    StacText(
      data: 'Caption',
      style: StacThemeTextStyle(textTheme: StacMaterialTextStyle.labelSmall),
    ),
  ],
)

​
Complete Example

StacText(
  data: 'Styled Text Example',
  style: StacTextStyle(
    fontSize: 18.0,
    fontWeight: StacFontWeight.w600,
    color: StacColors.blue,
    letterSpacing: 1.2,
    height: 1.5,
    fontStyle: StacFontStyle.italic,
  ),
)