Skip to main content
AppFlowy Editor provides comprehensive theming capabilities through the EditorStyle class. You can customize colors, text styles, padding, and more to match your application’s design.

​
Overview

The EditorStyle class controls the visual appearance of the editor, including:
  • Cursor and selection colors
  • Text styles for different formatting types
  • Padding and layout
  • Platform-specific styling (desktop vs mobile)

​
Basic theme customization

Here’s a simple example of customizing the editor theme: 
import 'package:appflowy_editor/appflowy_editor.dart';
import 'package:flutter/material.dart';

@override
Widget build(BuildContext context) {
  return AppFlowyEditor(
    editorState: EditorState.blank(),
    editorStyle: EditorStyle(
      padding: const EdgeInsets.symmetric(horizontal: 100, vertical: 20),
      cursorColor: Colors.blue,
      selectionColor: Colors.blue.withOpacity(0.3),
      textStyleConfiguration: TextStyleConfiguration(
        text: const TextStyle(
          fontSize: 16.0,
          color: Colors.black87,
        ),
      ),
    ),
  );
}

​
Customizing text styles

The TextStyleConfiguration allows you to customize the appearance of different text formatting options: 
EditorStyle customizeEditorStyle() {
  return EditorStyle(
    padding: PlatformExtension.isDesktopOrWeb
        ? const EdgeInsets.only(left: 100, right: 100, top: 20)
        : const EdgeInsets.symmetric(horizontal: 20),
    cursorColor: Colors.green,
    selectionColor: Colors.green.withOpacity(0.3),
    textStyleConfiguration: TextStyleConfiguration(
      text: const TextStyle(
        fontSize: 18.0,
        color: Colors.white54,
      ),
      bold: const TextStyle(
        fontWeight: FontWeight.w900,
      ),
      italic: const TextStyle(
        fontStyle: FontStyle.italic,
      ),
      underline: const TextStyle(
        decoration: TextDecoration.underline,
      ),
      strikethrough: const TextStyle(
        decoration: TextDecoration.lineThrough,
      ),
      href: TextStyle(
        color: Colors.amber,
        decoration: TextDecoration.combine([
          TextDecoration.overline,
          TextDecoration.underline,
        ]),
      ),
      code: const TextStyle(
        fontSize: 14.0,
        fontStyle: FontStyle.italic,
        color: Colors.blue,
        backgroundColor: Colors.black12,
      ),
    ),
  );
}
Source: documentation/customizing.md:119-166

​
Platform-specific styling

You can apply different styles based on the platform: 
EditorStyle platformAwareStyle() {
  if (PlatformExtension.isMobile) {
    return EditorStyle.mobile(
      padding: const EdgeInsets.all(16),
      cursorColor: Colors.blue,
    );
  } else {
    return EditorStyle.desktop(
      padding: const EdgeInsets.symmetric(horizontal: 100, vertical: 20),
      cursorColor: Colors.blue,
    );
  }
}

​
Custom text decorators

You can add custom behavior to text spans using the textSpanDecorator: 
EditorStyle(
  textSpanDecorator: (context, node, index, text, textSpan) {
    final attributes = text.attributes;
    final href = attributes?[AppFlowyRichTextKeys.href];
    if (href != null) {
      return TextSpan(
        text: text.text,
        style: textSpan.style,
        recognizer: TapGestureRecognizer()
          ..onTap = () {
            // Handle link tap
            debugPrint('onTap: $href');
          },
      );
    }
    return textSpan;
  },
)
Source: documentation/customizing.md:150-164

​
Changing text direction

The text direction is LTR by default, but you can change it by wrapping AppFlowyEditor with Directionality: 
@override
Widget build(BuildContext context) {
  return Scaffold(
    body: Directionality(
      textDirection: TextDirection.rtl,
      child: AppFlowyEditor(
        editorState: EditorState.blank(),
      ),
    ),
  );
}
Source: documentation/customizing.md:257-268

​
Complete example

Here’s a complete example with custom theming: 
import 'package:appflowy_editor/appflowy_editor.dart';
import 'package:flutter/material.dart';

class ThemedEditor extends StatelessWidget {
  const ThemedEditor({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        alignment: Alignment.topCenter,
        child: AppFlowyEditor(
          editorState: EditorState.blank(),
          editorStyle: customizeEditorStyle(),
        ),
      ),
    );
  }

  EditorStyle customizeEditorStyle() {
    return EditorStyle(
      padding: PlatformExtension.isDesktopOrWeb
          ? const EdgeInsets.only(left: 100, right: 100, top: 20)
          : const EdgeInsets.symmetric(horizontal: 20),
      cursorColor: Colors.green,
      selectionColor: Colors.green.withOpacity(0.3),
      textStyleConfiguration: TextStyleConfiguration(
        text: const TextStyle(
          fontSize: 18.0,
          color: Colors.black87,
        ),
        bold: const TextStyle(
          fontWeight: FontWeight.w900,
        ),
      ),
    );
  }
}
For more advanced theming, see the EditorStyle API reference and TextStyleConfiguration API reference.

EditorStyle API

Complete API reference for EditorStyle

Block Components

Customize block component styling

Build docs developers (and LLMs) love

Get started for freeTalk to us