FlutterQuill

FlutterQuill is a rich text editor and a Quill component for Flutter.

This library is a WYSIWYG editor built for the modern mobile platform, with web compatibility under development. You can join our Slack Group for discussion.

https://pub.dev/packages/flutter_quill

Usage

See the example directory for a minimal example of how to use FlutterQuill. You typically just need to instantiate a controller:

QuillController _controller = QuillController.basic();

and then embed the toolbar and the editor, within your app. For example:

Column(
  children: [
    QuillToolbar.basic(
      controller: _controller, onImageTapCallBack: _uploadImageCallBack),
    Expanded(
      child: Container(
        child: QuillEditor.basic(
          controller: _controller,
          readOnly: false, // true for view only mode
        ),
      ),
    )
  ],
)

Input / Output

This library uses Quill as an internal data format.

• Use _controller.document.toDelta() to extract the deltas.
• Use _controller.document.toPlainText() to extract plain text.

FlutterQuill provides some JSON serialisation support, so that you can save and open documents. To save a document as JSON, do something like the following:

var json = jsonEncode(_controller.document.toDelta().toJson());

You can then write this to storage.

To open a FlutterQuill editor with an existing JSON representation that you've previously stored, you can do something like this:

var myJSON = jsonDecode(incomingJSONText);
_controller = QuillController(
          document: Document.fromJson(myJSON),
          selection: TextSelection.collapsed(offset: 0));

Configuration

The QuillToolbar class lets you customise which formatting options are available. To prevent the image uploading widget from appearing, set onImageTapCallBack to null.

Web

Default branch master is on channel master. To use channel stable, switch to branch stable. Branch master on channel master supports web. To run the app on web do the following:

1. Change flutter channel to master using flutter channel master, followed by flutter upgrade.
2. Enable web using flutter config --enable-web and restart the IDE.
3. Upon successful execution of step 1 and 2 you should see Chrome as one of the devices which you run flutter devices.
4. Run the app.

For web development, ReactQuill is recommended to use for compatibility.

---

One client and affiliated collaborator of FlutterQuill is Bullet Journal App: https://bulletjournal.us/home/index.html