Flutter Quill: A Rich Text Editor for Flutter

Flutter Quill is a rich text editor for Flutter that brings the power of the Quill Delta format to your mobile and desktop applications.

Installation

Add the following dependency to your pubspec.yaml file:

dependencies:
  flutter_quill: ^latest-version

Usage

First, create a QuillController instance:

QuillController _controller = QuillController.basic();

Then, use the QuillEditor and QuillToolbar widgets to display the editor:

QuillToolbar.simple(
  configurations: QuillSimpleToolbarConfigurations(
    controller: _controller,
    sharedConfigurations: const QuillSharedConfigurations(
      locale: Locale('de'),
    ),
  ),
),
Expanded(
  child: QuillEditor.basic(
    configurations: QuillEditorConfigurations(
      controller: _controller,
      readOnly: false,
      sharedConfigurations: const QuillSharedConfigurations(
        locale: Locale('de'),
      ),
    ),
  ),
)

Features

• Rich text editing: Supports text formatting, including bold, italic, underline, strikethrough, and more.
• Custom embed blocks: Easily add images, videos, or other custom content to your documents.
• Input/Output: Convert between Quill Delta and plain text or JSON for easy storage and retrieval.
• Configurations: Customize the look and feel of the editor to match your app's design.

Example

Here's an example of a simple editor with a toolbar and some basic formatting options:

import 'package:flutter_quill/flutter_quill.dart';

class SampleEditor extends StatelessWidget {
  final QuillController _controller = QuillController.basic();

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        QuillToolbar.simple(controller: _controller),
        Expanded(
          child: QuillEditor.basic(controller: _controller),
        ),
      ],
    );
  }
}

Customizations

You can customize almost every aspect of the editor, including the toolbar, embed blocks, and even the underlying Quill Delta format.

For example, to change the font family, add the following to your code:

sharedConfigurations: const QuillSharedConfigurations(
  fontFamily: 'MyCustomFont',
),

Testing

Use the flutter_quill_test package to write tests for your Quill editor.

Conclusion

Flutter Quill is a powerful and extensible rich text editor that brings the flexibility and ease of use of Quill to Flutter developers.