editor_ant 1.2.0

Simple rich text editor with easy to use API.

EditorAnt simplifies rich text editing by providing a clean interface and essential pre-built widgets.

This package is separated from my project POS-System.

Play it yourself by visiting the online demo page!

See more details in example.

Why Another Rich Text Editor

Known Packages

Only for rich text, not coding or markdown:

• flutter_quill
• fleather
• appflowy_editor
• super_editor

This dependency-free editor leverages the native Flutter editor functionality without the need for extensive widget customization which we believe will be more stable and long term support. Our goal is to keep it lightweight and developer-friendly.

The core components include:

• Controller: An extension of TextEditingController that can be passed directly to a TextField.
• Wrapper: Facilitates button styling (e.g., bold, italic) and shortcut support with minimal code.
• Abstract Classes: Provides styling interfaces such as StyledRange.
• Demo Implementation: Includes pre-built support for StyledText features like bold, italic, underline, font size, colors and placeholders.

Installation

flutter pub add editor_ant

Usage

The main widget StyledEditingController that can be pass directly to a TextField.

_controller = StyledEditingController<StyledText>();
TextField(
  controller: _controller,
  decoration: const InputDecoration.collapsed(hintText: 'Start typing...'),
);

Above StyledText is a built-in styling instructor, below simplified its implementation:

class StyledText extends StyledRange<StyledText> {
  final bool isBold;

  StyledText({
    required super.range,
    this.isBold = false,
  });

  @override
  StyledText copyWith({int? start, int? end, bool isBold = false}) => StyledText(
      range: TextRange(start: start ?? range.start, end: end ?? range.end),
      isBold: isBold ? true : this.isBold,
    );

  @override
  StyledText toggleWith(StyledText other, {int? start, int? end, bool toggle = true}) => StyledText(
      range: TextRange(start: start ?? range.start, end: end ?? range.end),
      isBold: other.isBold ? !isBold || !toggle : isBold,
    );

  @override
  StyledText combine(StyledText other) => StyledText(
      range: TextRange(start: range.start, end: other.range.end),
      isBold: isBold && other.isBold,
    );

  @override
  bool hasSameToggleState(StyledText other) {
    if (other.isBold) {
      return isBold;
    }
    return false;
  }

  @override
  // use for change notifier
  bool operator ==(Object other) => other is StyledText &&
        isBold == other.isBold;

  @override
  TextStyle toTextStyle() => TextStyle(
      fontWeight: isBold ? FontWeight.bold : null,
    );

  @override
  int get hashCode => Object.hash(range, isBold);
}

And now you can use the method addStyle to toggled bold style in the menu bar.

IconButton(
  icon: const Icon(Icons.format_bold),
  onPressed: () {
    _controller.addStyle(StyledText(range: _controller.selection, isBold: true));
  },
)

Known Issues

• Not support undo/redo, see issue #3