Skip to main content
AppFlowyRichText is the core widget for rendering rich text content in AppFlowy Editor. It handles text display, cursor rendering, selection, and text decoration.

​
Overview

The AppFlowyRichText widget provides:
  • Rich text rendering with Delta format
  • Cursor and selection display
  • Placeholder text support
  • Custom text decorators
  • Auto-complete integration
  • Text overlay support

​
Class definition

class AppFlowyRichText extends StatefulWidget {
  const AppFlowyRichText({
    super.key,
    this.cursorHeight,
    this.cursorWidth = 2.0,
    this.lineHeight,
    this.textSpanDecorator,
    this.placeholderText = ' ',
    this.placeholderTextSpanDecorator,
    this.textDirection = TextDirection.ltr,
    this.textSpanDecoratorForCustomAttributes,
    this.textSpanOverlayBuilder,
    this.textAlign,
    this.cursorColor = const Color.fromARGB(255, 0, 0, 0),
    this.selectionColor = const Color.fromARGB(53, 111, 201, 231),
    this.autoCompleteTextProvider,
    required this.delegate,
    required this.node,
    required this.editorState,
  });
}
Source: lib/src/editor/block_component/rich_text/appflowy_rich_text.dart:31-104

​
Constructor

​
AppFlowyRichText()

Creates a rich text widget.
​
node
Node
required
The node containing the text content and delta.
​
editorState
EditorState
required
The editor state managing this rich text.
​
delegate
SelectableMixin
required
Delegate for getting cursor rect, selection rects, and block rect.
​
cursorHeight
double?
The height of the cursor. If null, calculated automatically based on text height.
​
cursorWidth
double
default:"2.0"
The width of the cursor.
​
lineHeight
double?
The height of each line. If null, uses default line height.
​
textSpanDecorator
AppFlowyTextSpanDecorator?
Custom decorator to modify text spans before rendering.
​
placeholderText
String
default:"' '"
The placeholder text when the rich text is empty.
​
placeholderTextSpanDecorator
AppFlowyTextSpanDecorator?
Custom decorator for placeholder text spans.
​
textDirection
TextDirection
default:"TextDirection.ltr"
The text direction (LTR or RTL).
​
textSpanDecoratorForCustomAttributes
TextSpanDecoratorForAttribute?
Custom decorator for handling custom text attributes. Can be used to override existing decorators.
​
textSpanOverlayBuilder
AppFlowyTextSpanOverlayBuilder?
Builder for creating overlays on text spans (e.g., hover menus for links).
​
textAlign
TextAlign?
Text alignment within the rich text widget.
​
cursorColor
Color
default:"Color.fromARGB(255, 0, 0, 0)"
The color of the cursor.
​
selectionColor
Color
default:"Color.fromARGB(53, 111, 201, 231)"
The background color of selected text.
​
autoCompleteTextProvider
AppFlowyAutoCompleteTextProvider?
Provider for auto-complete text that appears after the current text.

​
Type definitions

​
AppFlowyTextSpanDecorator

typedef AppFlowyTextSpanDecorator = TextSpan Function(TextSpan textSpan);
Function type for decorating text spans. Example: 
AppFlowyTextSpanDecorator decorator = (textSpan) {
  return TextSpan(
    text: textSpan.text,
    style: textSpan.style?.copyWith(fontSize: 18),
  );
};

​
TextSpanDecoratorForAttribute

typedef TextSpanDecoratorForAttribute = InlineSpan Function(
  BuildContext context,
  Node node,
  int index,
  TextInsert text,
  TextSpan before,
  TextSpan after,
);
Function type for decorating text based on custom attributes. Example: 
TextSpanDecoratorForAttribute customDecorator = (
  context,
  node,
  index,
  text,
  before,
  after,
) {
  final attributes = text.attributes;
  if (attributes?.containsKey('highlight') == true) {
    return TextSpan(
      text: text.text,
      style: before.style?.copyWith(
        backgroundColor: Colors.yellow,
      ),
    );
  }
  return before;
};

​
AppFlowyAutoCompleteTextProvider

typedef AppFlowyAutoCompleteTextProvider = String? Function(
  BuildContext context,
  Node node,
  TextSpan? textSpan,
);
Function type for providing auto-complete text.

​
AppFlowyTextSpanOverlayBuilder

typedef AppFlowyTextSpanOverlayBuilder = List<Widget> Function(
  BuildContext context,
  Node node,
  SelectableMixin delegate,
);
Function type for building overlays on text spans.

​
Usage examples

​
Basic usage

import 'package:appflowy_editor/appflowy_editor.dart';
import 'package:flutter/material.dart';

AppFlowyRichText(
  node: node,
  editorState: editorState,
  delegate: this,
  cursorColor: Colors.blue,
  selectionColor: Colors.blue.withOpacity(0.3),
)

​
With custom text decorator

AppFlowyRichText(
  node: node,
  editorState: editorState,
  delegate: this,
  textSpanDecorator: (textSpan) {
    return TextSpan(
      text: textSpan.text,
      style: textSpan.style?.copyWith(
        fontFamily: 'Roboto',
        fontSize: 16,
      ),
    );
  },
)

​
With placeholder

AppFlowyRichText(
  node: node,
  editorState: editorState,
  delegate: this,
  placeholderText: 'Type something...',
  placeholderTextSpanDecorator: (textSpan) {
    return TextSpan(
      text: textSpan.text,
      style: const TextStyle(
        color: Colors.grey,
        fontStyle: FontStyle.italic,
      ),
    );
  },
)

​
With custom attributes

AppFlowyRichText(
  node: node,
  editorState: editorState,
  delegate: this,
  textSpanDecoratorForCustomAttributes: (
    context,
    node,
    index,
    text,
    before,
    after,
  ) {
    final attributes = text.attributes;
    
    // Custom highlight attribute
    if (attributes?.containsKey('highlight') == true) {
      return TextSpan(
        text: text.text,
        style: before.style?.copyWith(
          backgroundColor: Colors.yellow,
          fontWeight: FontWeight.bold,
        ),
      );
    }
    
    return before;
  },
)

​
With auto-complete

AppFlowyRichText(
  node: node,
  editorState: editorState,
  delegate: this,
  autoCompleteTextProvider: (context, node, textSpan) {
    final text = textSpan?.text ?? '';
    if (text.endsWith('@')) {
      return 'mention';
    }
    return null;
  },
)

​
RTL text support

AppFlowyRichText(
  node: node,
  editorState: editorState,
  delegate: this,
  textDirection: TextDirection.rtl,
  textAlign: TextAlign.right,
)

​
SelectableMixin

The SelectableMixin is used by AppFlowyRichText to get geometry information: 
mixin SelectableMixin {
  // Get cursor position
  Rect? getCursorRectInPosition(Position position);
  
  // Get selection rectangles
  List<Rect> getRectsInSelection(Selection selection);
  
  // Get block bounding box
  Rect getBlockRect();
}

​
Rich text attributes

AppFlowyRichText automatically handles these text attributes:
  • bold - Bold text
  • italic - Italic text
  • underline - Underlined text
  • strikethrough - Strikethrough text
  • code - Inline code
  • href - Hyperlinks
  • backgroundColor - Text background color
  • font_color - Text foreground color
Custom attributes can be handled with textSpanDecoratorForCustomAttributes.

Text Block Components

API for text-based block components

Delta Format

Understanding the Delta format for rich text

Build docs developers (and LLMs) love

Get started for freeTalk to us