Skip to main content

​
Overview

The EditorStyle class allows you to customize the visual appearance and behavior of the editor. You can pass an EditorStyle instance to the AppFlowyEditor widget to configure styling properties.

​
Constructors

​
EditorStyle()

Creates a custom editor style with full control over all properties.

​
EditorStyle.desktop()

Creates an editor style optimized for desktop platforms with sensible defaults:
  • Horizontal padding: 100
  • Cursor color: #00BCF0
  • Selection color: rgba(111, 201, 231, 0.21)
  • Font size: 16
  • Cursor width: 2.0

​
EditorStyle.mobile()

Creates an editor style optimized for mobile platforms with sensible defaults:
  • Horizontal padding: 20
  • Cursor color: #00BCF0
  • Drag handle color: #00BCF0
  • Selection color: rgba(111, 201, 231, 0.21)
  • Font size: 16
  • Magnifier size: 72x48
  • Mobile drag handle ball size: 8x8
  • Auto-dismiss duration: 3 seconds

​
Properties

​
Basic Styling

​
padding
EdgeInsets
required
The padding around the editor content.Default (Desktop): EdgeInsets.symmetric(horizontal: 100)Default (Mobile): EdgeInsets.symmetric(horizontal: 20)
​
maxWidth
double?
The maximum width of the editor content. When set, the editor will not exceed this width.
​
textScaleFactor
double
default:"1.0"
The scale factor for text rendering. Use this to adjust text size for accessibility.
​
defaultTextDirection
String?
The default text direction for the editor. Can be used to set RTL or LTR text direction.

​
Cursor Styling

​
cursorColor
Color
required
The color of the text cursor.Default: Color(0xFF00BCF0) (cyan blue)
​
cursorWidth
double
default:"2.0"
The width of the text cursor in pixels.

​
Selection Styling

​
selectionColor
Color
required
The background color of selected text.Default: Color.fromARGB(53, 111, 201, 231) (light cyan with transparency)

​
Text Styling

​
textStyleConfiguration
TextStyleConfiguration
required
Configuration for text styles including bold, italic, underline, strikethrough, links, and code.This configuration is used by all text-based components as the default styling. Individual block components may override these styles with their own BlockComponentConfiguration.See TextStyleConfiguration for details.
​
textSpanDecorator
TextSpanDecoratorForAttribute?
required
Custom decorator for text spans with attributes.Use this to customize how text with specific attributes (like mentions, hashtags, or custom annotations) is rendered. You can also override built-in text span rendering.Default (Desktop): defaultTextSpanDecoratorForAttributeDefault (Mobile): mobileTextSpanDecoratorForAttribute
​
textSpanOverlayBuilder
AppFlowyTextSpanOverlayBuilder?
Builder for text span overlays.Use this to create custom overlays that appear on top of text spans, such as tooltips or inline menus.

​
Mobile-Specific Styling

​
dragHandleColor
Color
The color of the drag handle on mobile platforms.Note: This color is ignored on Android.Default (Mobile): Color(0xFF00BCF0) (cyan blue)
​
magnifierSize
Size
default:"Size(72, 48)"
The size of the magnifier widget on mobile platforms.Mobile only. The magnifier appears when selecting text to help users see the cursor position.
​
mobileDragHandleBallSize
Size
default:"Size(8, 8)"
The size of the drag handle ball on mobile platforms.Mobile only.
​
mobileDragHandleWidth
double
default:"2.0"
The width of the drag handle line on mobile platforms.Mobile only.
​
mobileDragHandleTopExtend
double?
Extension of the drag handle hit test area from the top.By default, the hit test area matches the ball size. Set this to extend the tappable area. For example, a value of 10 adds 20 pixels to the hit test area (10 pixels on each side).Mobile only.
​
mobileDragHandleLeftExtend
double?
Extension of the drag handle hit test area from the left.By default, the hit test area matches the ball size. Set this to extend the tappable area.Mobile only.
​
mobileDragHandleWidthExtend
double?
Extension of the drag handle hit test area width.By default, the hit test area matches the ball size. Set this to extend the tappable area.Mobile only.
​
mobileDragHandleHeightExtend
double?
Extension of the drag handle hit test area height.By default, the hit test area matches the ball size. Set this to extend the tappable area.Mobile only.
​
enableHapticFeedbackOnAndroid
bool
default:"true"
Whether to enable haptic feedback when dragging the selection handle on Android.Android only.
​
autoDismissCollapsedHandleDuration
Duration
default:"Duration(seconds: 3)"
The duration after which the collapsed selection handle is automatically dismissed when no user interaction is detected.Android only.

​
Methods

​
copyWith()

Creates a copy of the current EditorStyle with the specified properties updated. 
EditorStyle copyWith({
  EdgeInsets? padding,
  Color? cursorColor,
  Color? dragHandleColor,
  Color? selectionColor,
  TextStyleConfiguration? textStyleConfiguration,
  TextSpanDecoratorForAttribute? textSpanDecorator,
  AppFlowyTextSpanOverlayBuilder? textSpanOverlayBuilder,
  String? defaultTextDirection,
  Size? magnifierSize,
  Size? mobileDragHandleBallSize,
  double? mobileDragHandleWidth,
  bool? enableHapticFeedbackOnAndroid,
  double? cursorWidth,
  double? textScaleFactor,
  double? maxWidth,
  double? mobileDragHandleTopExtend,
  double? mobileDragHandleWidthExtend,
  double? mobileDragHandleLeftExtend,
  double? mobileDragHandleHeightExtend,
  Duration? autoDismissCollapsedHandleDuration,
})

​
Usage Examples

​
Basic Desktop Editor

AppFlowyEditor(
  editorState: editorState,
  editorStyle: EditorStyle.desktop(),
)

​
Custom Styling

AppFlowyEditor(
  editorState: editorState,
  editorStyle: EditorStyle(
    padding: EdgeInsets.symmetric(horizontal: 50, vertical: 20),
    cursorColor: Colors.purple,
    selectionColor: Colors.purple.withOpacity(0.2),
    cursorWidth: 3.0,
    maxWidth: 800,
    textStyleConfiguration: TextStyleConfiguration(
      text: TextStyle(fontSize: 18, color: Colors.black87),
      bold: TextStyle(fontWeight: FontWeight.w700),
    ),
  ),
)

​
Mobile Editor with Custom Drag Handle

AppFlowyEditor(
  editorState: editorState,
  editorStyle: EditorStyle.mobile(
    dragHandleColor: Colors.blue,
    mobileDragHandleBallSize: Size(12, 12),
    mobileDragHandleTopExtend: 15,
    mobileDragHandleLeftExtend: 15,
    autoDismissCollapsedHandleDuration: Duration(seconds: 5),
  ),
)

​
Modifying Existing Style

final baseStyle = EditorStyle.desktop();

AppFlowyEditor(
  editorState: editorState,
  editorStyle: baseStyle.copyWith(
    cursorColor: Colors.green,
    maxWidth: 1000,
  ),
)

Build docs developers (and LLMs) love

Get started for freeTalk to us