Skip to main content

​
Overview

AppFlowyEditor is the main widget for rendering an AppFlowy Editor instance. It provides a complete rich text editing experience with customizable block components, keyboard shortcuts, and styling options.

​
Constructor

AppFlowyEditor({
  Key? key,
  required EditorState editorState,
  Map<String, BlockComponentBuilder>? blockComponentBuilders,
  List<CharacterShortcutEvent>? characterShortcutEvents,
  List<CommandShortcutEvent>? commandShortcutEvents,
  ContextMenuWidgetBuilder? contextMenuBuilder,
  ContentInsertionConfiguration? contentInsertionConfiguration,
  bool editable = true,
  bool autoFocus = false,
  Selection? focusedSelection,
  bool shrinkWrap = false,
  bool showMagnifier = true,
  EditorScrollController? editorScrollController,
  EditorStyle editorStyle = const EditorStyle.desktop(),
  Widget? header,
  Widget? footer,
  FocusNode? focusNode,
  bool enableAutoComplete = false,
  AppFlowyAutoCompleteTextProvider? autoCompleteTextProvider,
  AppFlowyDropTargetStyle? dropTargetStyle,
  bool disableSelectionService = false,
  bool disableKeyboardService = false,
  bool disableScrollService = false,
  bool disableAutoScroll = false,
  double autoScrollEdgeOffset = 220.0,
  List<DocumentRule> documentRules = const [],
  BlockComponentWrapper? blockWrapper,
})

​
Parameters

​
editorState
EditorState
required
The editor state that manages the document and selection.
​
blockComponentBuilders
Map<String, BlockComponentBuilder>
default:"standardBlockComponentBuilderMap"
Defines how each block type is rendered. Pass standardBlockComponentBuilderMap to extend with custom blocks:
AppFlowyEditor(
  blockComponentBuilders: {
    ...standardBlockComponentBuilderMap,
    'my_block': MyBlockComponentBuilder(),
  },
)
​
characterShortcutEvents
List<CharacterShortcutEvent>
default:"standardCharacterShortcutEvents"
Character-based keyboard shortcuts (e.g., Markdown shortcuts like ** for bold).
​
commandShortcutEvents
List<CommandShortcutEvent>
default:"standardCommandShortcutEvents"
Command-based keyboard shortcuts (e.g., Cmd+B for bold).
​
contextMenuBuilder
ContextMenuWidgetBuilder
Custom context menu shown on right-click.
​
contentInsertionConfiguration
ContentInsertionConfiguration
Configuration for content insertion from external sources.
​
editable
bool
default:"true"
Whether the editor allows editing. When false, transactions are ignored but keyboard navigation still works.
​
autoFocus
bool
default:"false"
Automatically focus the editor on mount.
​
focusedSelection
Selection
Initial selection when autoFocus is enabled.
​
shrinkWrap
bool
default:"false"
Size the editor to its content height. Requires wrapping with a sized widget and providing a scroll controller.
​
showMagnifier
bool
default:"true"
Show the text magnifier on iOS/Android.
​
editorScrollController
EditorScrollController
Custom scroll controller for the editor.
​
editorStyle
EditorStyle
default:"EditorStyle.desktop()"
Visual styling for the editor including colors, padding, and typography.
​
header
Widget
Widget displayed above the editor content.
​
footer
Widget
Widget displayed below the editor content.
​
focusNode
FocusNode
Custom focus node for controlling keyboard focus.
​
enableAutoComplete
bool
default:"false"
Enable auto-complete functionality. Requires providing autoCompleteTextProvider.
​
autoCompleteTextProvider
AppFlowyAutoCompleteTextProvider
Provider for auto-complete suggestions.
​
dropTargetStyle
AppFlowyDropTargetStyle
Styling for drag-and-drop target indicators (desktop only).
​
disableSelectionService
bool
default:"false"
Disable selection gestures and context menu.
​
disableKeyboardService
bool
default:"false"
Disable all keyboard shortcuts and text input.
​
disableScrollService
bool
default:"false"
Disable the auto-scroll feature.
​
disableAutoScroll
bool
default:"false"
Disable auto-scrolling behavior.
​
autoScrollEdgeOffset
double
default:"220.0"
Distance from editor edge to trigger auto-scroll (mobile).
​
documentRules
List<DocumentRule>
default:"[]"
Rules applied to document transactions (e.g., ensuring at least one block).
​
blockWrapper
BlockComponentWrapper
Wrapper widget for customizing block component rendering.

​
Example

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

class MyEditor extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final editorState = EditorState.blank();
    
    return AppFlowyEditor(
      editorState: editorState,
      editorStyle: EditorStyle.desktop(
        cursorColor: Colors.blue,
        selectionColor: Colors.blue.withOpacity(0.3),
      ),
      autoFocus: true,
    );
  }
}

​
See Also

Build docs developers (and LLMs) love

Get started for freeTalk to us