Skip to main content

​
Overview

The TextStyleConfiguration class defines the common text styling configuration for the editor. It controls the appearance of formatted text including bold, italic, underline, strikethrough, links, and code. This configuration is used by all text-based components in the editor as the default styling. Individual block components may override these styles with their own BlockComponentConfiguration.

​
Constructor

​
TextStyleConfiguration()

Creates a text style configuration with customizable properties for different text formats.

​
Properties

​
Text Formatting Styles

​
text
TextStyle
default:"TextStyle(fontSize: 16.0)"
The default text style for regular, unformatted text.This is the base style applied to all text in the editor before any formatting attributes are applied.
​
bold
TextStyle
default:"TextStyle(fontWeight: FontWeight.bold)"
The text style applied to bold text.By default, uses bold font weight. You can customize this to use a different font weight, color, or other properties.
​
italic
TextStyle
default:"TextStyle(fontStyle: FontStyle.italic)"
The text style applied to italic text.By default, uses italic font style.
​
underline
TextStyle
default:"TextStyle(decoration: TextDecoration.underline)"
The text style applied to underlined text.By default, applies an underline decoration. You can customize the decoration color, style (solid, dotted, dashed), or thickness.
​
strikethrough
TextStyle
The text style applied to strikethrough text.By default, applies a line-through decoration.
​
href
TextStyle
The text style applied to hyperlinks.By default, displays links in light blue with an underline.
​
code
TextStyle
The text style applied to inline code.By default, displays code in red text with a light cyan background.
​
autoComplete
TextStyle
default:"TextStyle(color: Colors.grey)"
The text style applied to autocomplete suggestions.By default, displays suggestions in grey.

​
Line Height Configuration

​
lineHeight
double
default:"1.5"
The line height multiplier for text.A value of 1.5 means the line height is 1.5 times the font size. Adjust this to control spacing between lines of text.
​
applyHeightToFirstAscent
bool
default:"false"
Whether to apply line height to the first line’s ascent.When true, the line height is applied to the top of the first line. When false, the first line’s natural ascent is preserved.
​
applyHeightToLastDescent
bool
default:"false"
Whether to apply line height to the last line’s descent.When true, the line height is applied to the bottom of the last line. When false, the last line’s natural descent is preserved.
​
leadingDistribution
TextLeadingDistribution
default:"TextLeadingDistribution.even"
How the leading (extra space from line height) is distributed around the text.
  • TextLeadingDistribution.even - Distributes space evenly above and below the text
  • TextLeadingDistribution.proportional - Distributes space proportional to the font metrics

​
Methods

​
copyWith()

Creates a copy of the current TextStyleConfiguration with the specified properties updated. 
TextStyleConfiguration copyWith({
  TextStyle? text,
  TextStyle? bold,
  TextStyle? italic,
  TextStyle? underline,
  TextStyle? strikethrough,
  TextStyle? href,
  TextStyle? code,
  TextStyle? autoComplete,
  bool? applyHeightToFirstAscent,
  bool? applyHeightToLastDescent,
  double? lineHeight,
  TextLeadingDistribution? leadingDistribution,
})

​
Usage Examples

​
Basic Configuration

final textConfig = TextStyleConfiguration(
  text: TextStyle(fontSize: 18, color: Colors.black87),
  bold: TextStyle(fontWeight: FontWeight.w700),
  italic: TextStyle(fontStyle: FontStyle.italic),
);

AppFlowyEditor(
  editorState: editorState,
  editorStyle: EditorStyle(
    textStyleConfiguration: textConfig,
    // ... other properties
  ),
)

final textConfig = TextStyleConfiguration(
  text: TextStyle(fontSize: 16),
  href: TextStyle(
    color: Colors.blue,
    decoration: TextDecoration.underline,
    decorationColor: Colors.blue,
    decorationStyle: TextDecorationStyle.solid,
  ),
  code: TextStyle(
    fontFamily: 'Courier New',
    fontSize: 14,
    color: Colors.purple,
    backgroundColor: Colors.grey[100],
  ),
);

​
Custom Line Height Configuration

final textConfig = TextStyleConfiguration(
  text: TextStyle(fontSize: 16),
  lineHeight: 2.0,  // Double spacing
  applyHeightToFirstAscent: true,
  applyHeightToLastDescent: true,
  leadingDistribution: TextLeadingDistribution.proportional,
);

​
Comprehensive Customization

final textConfig = TextStyleConfiguration(
  text: TextStyle(
    fontSize: 18,
    color: Colors.black87,
    fontFamily: 'Roboto',
  ),
  bold: TextStyle(
    fontWeight: FontWeight.w700,
    color: Colors.black,
  ),
  italic: TextStyle(
    fontStyle: FontStyle.italic,
    color: Colors.black54,
  ),
  underline: TextStyle(
    decoration: TextDecoration.underline,
    decorationColor: Colors.blue,
    decorationThickness: 2.0,
  ),
  strikethrough: TextStyle(
    decoration: TextDecoration.lineThrough,
    decorationColor: Colors.red,
  ),
  href: TextStyle(
    color: Colors.indigo,
    decoration: TextDecoration.underline,
    decorationColor: Colors.indigo,
  ),
  code: TextStyle(
    fontFamily: 'Fira Code',
    fontSize: 15,
    color: Color(0xFFE06C75),
    backgroundColor: Color(0xFFF5F5F5),
  ),
  autoComplete: TextStyle(
    color: Colors.grey[400],
    fontStyle: FontStyle.italic,
  ),
  lineHeight: 1.6,
  leadingDistribution: TextLeadingDistribution.even,
);

​
Modifying Existing Configuration

const baseConfig = TextStyleConfiguration();

final customConfig = baseConfig.copyWith(
  text: TextStyle(fontSize: 20),
  href: TextStyle(
    color: Colors.green,
    decoration: TextDecoration.underline,
  ),
  lineHeight: 1.8,
);

Build docs developers (and LLMs) love

Get started for freeTalk to us