Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
30 changes: 30 additions & 0 deletions docs/styles/text_style.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -245,6 +245,36 @@ StacColumn(
```
</CodeGroup>

## Overriding Theme Text Styles

You can override specific properties of a theme-based text style using the `copyWith` method (in Dart) or by adding properties alongside `textTheme` (in JSON).

<CodeGroup>
```dart Dart
StacText(
data: 'Overridden Body Text',
style: StacThemeData.textTheme.bodyMedium.copyWith(
color: StacColors.red,
fontSize: 20,
fontWeight: StacFontWeight.bold,
),
)
```

```json JSON
{
"type": "text",
"data": "Overridden Body Text",
"style": {
"textTheme": "bodyMedium",
"color": "#F44336",
"fontSize": 20,
"fontWeight": "bold"
}
}
```
</CodeGroup>

## Complete Example

<CodeGroup>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -14,38 +14,77 @@ extension StacTextStyleParser on StacTextStyle {
case StacTextStyleType.theme:
final themeStyle = (this as StacThemeTextStyle).textTheme;
final textTheme = Theme.of(context).textTheme;
TextStyle? textStyle;
switch (themeStyle) {
case StacMaterialTextStyle.displayLarge:
return textTheme.displayLarge;
textStyle = textTheme.displayLarge;
break;
case StacMaterialTextStyle.displayMedium:
return textTheme.displayMedium;
textStyle = textTheme.displayMedium;
break;
case StacMaterialTextStyle.displaySmall:
return textTheme.displaySmall;
textStyle = textTheme.displaySmall;
break;
case StacMaterialTextStyle.headlineLarge:
return textTheme.headlineLarge;
textStyle = textTheme.headlineLarge;
break;
case StacMaterialTextStyle.headlineMedium:
return textTheme.headlineMedium;
textStyle = textTheme.headlineMedium;
break;
case StacMaterialTextStyle.headlineSmall:
return textTheme.headlineSmall;
textStyle = textTheme.headlineSmall;
break;
case StacMaterialTextStyle.titleLarge:
return textTheme.titleLarge;
textStyle = textTheme.titleLarge;
break;
case StacMaterialTextStyle.titleMedium:
return textTheme.titleMedium;
textStyle = textTheme.titleMedium;
break;
case StacMaterialTextStyle.titleSmall:
return textTheme.titleSmall;
textStyle = textTheme.titleSmall;
break;
case StacMaterialTextStyle.bodyLarge:
return textTheme.bodyLarge;
textStyle = textTheme.bodyLarge;
break;
case StacMaterialTextStyle.bodyMedium:
return textTheme.bodyMedium;
textStyle = textTheme.bodyMedium;
break;
case StacMaterialTextStyle.bodySmall:
return textTheme.bodySmall;
textStyle = textTheme.bodySmall;
break;
case StacMaterialTextStyle.labelLarge:
return textTheme.labelLarge;
textStyle = textTheme.labelLarge;
break;
case StacMaterialTextStyle.labelMedium:
return textTheme.labelMedium;
textStyle = textTheme.labelMedium;
break;
case StacMaterialTextStyle.labelSmall:
return textTheme.labelSmall;
textStyle = textTheme.labelSmall;
break;
}

final themeRef = this as StacThemeTextStyle;
return textStyle?.copyWith(
inherit: themeRef.inherit,
color: themeRef.color?.toColor(context),
backgroundColor: themeRef.backgroundColor?.toColor(context),
fontSize: themeRef.fontSize,
fontWeight: themeRef.fontWeight?.parse,
fontStyle: themeRef.fontStyle?.parse,
letterSpacing: themeRef.letterSpacing,
wordSpacing: themeRef.wordSpacing,
textBaseline: themeRef.textBaseline?.parse,
height: themeRef.height,
leadingDistribution: themeRef.leadingDistribution?.parse,
decorationColor: themeRef.decorationColor?.toColor(context),
decorationStyle: themeRef.decorationStyle?.parse,
decorationThickness: themeRef.decorationThickness,
debugLabel: themeRef.debugLabel,
fontFamily: themeRef.fontFamily,
fontFamilyFallback: themeRef.fontFamilyFallback,
package: themeRef.package,
overflow: themeRef.overflow?.parse,
);
case StacTextStyleType.custom:
final style = this as StacCustomTextStyle;
return TextStyle(
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -528,19 +528,180 @@ class StacThemeTextStyle extends StacTextStyle {
///
/// For example, `style: StacMaterialTextStyle.bodyMedium` maps to
/// `Theme.of(context).textTheme.bodyMedium`.
StacThemeTextStyle({required this.textTheme})
: super._(type: StacTextStyleType.theme);
StacThemeTextStyle({
required this.textTheme,
this.inherit,
this.color,
this.backgroundColor,
this.fontSize,
this.fontWeight,
this.fontStyle,
this.letterSpacing,
this.wordSpacing,
this.textBaseline,
this.height,
this.leadingDistribution,
this.decorationColor,
this.decorationStyle,
this.decorationThickness,
this.debugLabel,
this.fontFamily,
this.fontFamilyFallback,
this.package,
this.overflow,
}) : super._(type: StacTextStyleType.theme);

/// The `TextTheme` style key.
///
/// Type: [StacMaterialTextStyle]
final StacMaterialTextStyle textTheme;

/// Whether to inherit styling from the ambient `DefaultTextStyle`.
///
/// Type: `bool?`
final bool? inherit;

/// Text color.
///
/// Type: [StacColor]
final StacColor? color;

/// Background color behind the text.
///
/// Type: [StacColor]
final StacColor? backgroundColor;

/// Font size in logical pixels.
///
/// Type: `double?`
final double? fontSize;

/// Font weight.
///
/// Type: [StacFontWeight]
final StacFontWeight? fontWeight;

/// Font style (normal/italic).
///
/// Type: [StacFontStyle]
final StacFontStyle? fontStyle;

/// Spacing between letters.
///
/// Type: `double?`
final double? letterSpacing;

/// Spacing between words.
///
/// Type: `double?`
final double? wordSpacing;

/// The baseline to align against.
///
/// Type: [StacTextBaseline]
final StacTextBaseline? textBaseline;

/// The height of this text span, as a multiple of font size.
///
/// Type: `double?`
final double? height;

/// Strategy for distributing the leading (space above a line).
///
/// Type: [StacTextLeadingDistribution]
final StacTextLeadingDistribution? leadingDistribution;

/// Color for text decorations (underline, overline, etc.).
///
/// Type: [StacColor]
final StacColor? decorationColor;

/// Style of text decorations (solid, dotted, dashed, etc.).
///
/// Type: [StacTextDecorationStyle]
final StacTextDecorationStyle? decorationStyle;

/// Thickness of text decorations in logical pixels.
///
/// Type: `double?`
final double? decorationThickness;

/// Optional label used for debugging.
///
/// Type: `String?`
final String? debugLabel;

/// The name of the font family to use.
///
/// Type: `String?`
final String? fontFamily;

/// Fallback font families to try if [fontFamily] is unavailable.
///
/// Type: `List<String>?`
final List<String>? fontFamilyFallback;

/// Optional package name for bundled fonts.
///
/// Type: `String?`
final String? package;

/// How visual overflow should be handled.
///
/// Type: [StacTextOverflow]
final StacTextOverflow? overflow;

/// Creates a [StacThemeTextStyle] from JSON.
factory StacThemeTextStyle.fromJson(Map<String, dynamic> json) =>
_$StacThemeTextStyleFromJson(json);

/// Converts this theme text style to JSON.
@override
Map<String, dynamic> toJson() => _$StacThemeTextStyleToJson(this);

/// Creates a copy of this style with the given fields replaced.
StacThemeTextStyle copyWith({
bool? inherit,
StacColor? color,
StacColor? backgroundColor,
double? fontSize,
StacFontWeight? fontWeight,
StacFontStyle? fontStyle,
double? letterSpacing,
double? wordSpacing,
StacTextBaseline? textBaseline,
double? height,
StacTextLeadingDistribution? leadingDistribution,
StacColor? decorationColor,
StacTextDecorationStyle? decorationStyle,
double? decorationThickness,
String? debugLabel,
String? fontFamily,
List<String>? fontFamilyFallback,
String? package,
StacTextOverflow? overflow,
}) {
return StacThemeTextStyle(
textTheme: textTheme,
inherit: inherit ?? this.inherit,
color: color ?? this.color,
backgroundColor: backgroundColor ?? this.backgroundColor,
fontSize: fontSize ?? this.fontSize,
fontWeight: fontWeight ?? this.fontWeight,
fontStyle: fontStyle ?? this.fontStyle,
letterSpacing: letterSpacing ?? this.letterSpacing,
wordSpacing: wordSpacing ?? this.wordSpacing,
textBaseline: textBaseline ?? this.textBaseline,
height: height ?? this.height,
leadingDistribution: leadingDistribution ?? this.leadingDistribution,
decorationColor: decorationColor ?? this.decorationColor,
decorationStyle: decorationStyle ?? this.decorationStyle,
decorationThickness: decorationThickness ?? this.decorationThickness,
debugLabel: debugLabel ?? this.debugLabel,
fontFamily: fontFamily ?? this.fontFamily,
fontFamilyFallback: fontFamilyFallback ?? this.fontFamilyFallback,
package: package ?? this.package,
overflow: overflow ?? this.overflow,
);
}
}

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.