Flutter Quill: How to Implement a WYSIWYG Editor in Flutter

A rich text editor is an indispensable tool when creating applications requiring text input and formatting. For Flutter developers, the Flutter Quill package provides a powerful solution. Flutter Quill is a WYSIWYG (What You See Is What You Get) editor built for the modern mobile platform with web compatibility. This package is not just a simple text editor; it's a comprehensive Quill component that integrates seamlessly into your Flutter applications.

Understanding Flutter Quill as a Rich Text Editor

Flutter Quill is a rich text editor that enables developers to incorporate text editing and formatting capabilities into their Flutter apps. It's designed to work across a range of platforms, including modern Android and iOS devices, as well as offering web compatibility under development. The editor provides various formatting options, allowing users to style text with different fonts, sizes, and colors.

WYSIWYG Editor Built for Modern Platforms

The Flutter Quill package is a WYSIWYG editor built specifically for the modern mobile platform with web compatibility. It allows users to see the final formatting of their text while editing it, which is a key feature for any rich text editor. This capability ensures that what users see on their screens is precisely what they get when they publish or export their content.

Setting Up Flutter Quill

To begin using Flutter Quill in your project, add it to your pubspec.yaml file:

1dependencies:
2  flutter_quill: ^8.6.0
3

After adding the dependency, run flutter pub get to install the package.

Basic Usage of Flutter Quill

To use Flutter Quill as your rich text editor, you first need to create a QuillController:

1QuillController _controller = QuillController.basic();
2

Next, you can set up the QuillEditor and QuillToolbar widgets:

1QuillProvider(
2  configurations: QuillConfigurations(
3    controller: _controller,
4    sharedConfigurations: const QuillSharedConfigurations(
5      locale: Locale('en'),
6    ),
7  ),
8  child: Column(
9    children: [
10      const QuillToolbar(),
11      Expanded(
12        child: QuillEditor.basic(
13          configurations: const QuillEditorConfigurations(
14            readOnly: false,
15          ),
16        ),
17      )
18    ],
19  ),
20)
21

Advanced Usage of Flutter Quill

You can refer to the example directory in the Flutter Quill GitHub repository for advanced usage. The sample code there will guide you through more complex implementations, such as customizing the editor toolbar with custom buttons or handling different font sizes and families.

Extracting Plain Text and JSON Serialization Support

One of the key features of Flutter Quill is its ability to extract plain text from the rich text content. This is particularly useful when processing or storing the text in a simple format. The package also provides JSON serialization support, allowing you to save and open documents easily.

To extract plain text from the editor:

1String plainText = _controller.document.toPlainText();
2

For JSON serialization, you can convert the document to a JSON representation:

1final json = jsonEncode(_controller.document.toDelta().toJson());
2

And to open documents with an existing JSON representation that you've previously stored:

1final json = jsonDecode(previouslyStoredJsonString);
2_controller.document = Document.fromJson(json);
3

Compatibility and Web Development

Flutter Quill is compatible with Dart 3 and supports a range of platforms, including a mobile platform with web compatibility. The web compatibility under development ensures that developers can use the same rich text editor across mobile and web applications, essential for consistent user experience and codebase maintenance.

Localization and Customization

The package offers translations for the editor, following the system locale by default. However, you can set your locale if needed. The QuillToolbar class lets you customize the editor toolbar to include the formatting options that are most relevant to your application.

Conclusion

Flutter Quill is a versatile, rich text editor that caters to the needs of modern web development and mobile platforms. With its advanced usage capabilities, extensive formatting options, and support for web compatibility, it stands out as a comprehensive solution for Flutter developers. Whether building a simple note-taking app or a complex content management system, Flutter Quill provides the tools you need to integrate a powerful text editor into your Flutter application.

Short on time? Speed things up with DhiWise!

Tired of manually designing screens, coding on weekends, and technical debt? Let DhiWise handle it for you!

You can build an e-commerce store, healthcare app, portfolio, blogging website, social media or admin panel right away. Use our library of 40+ pre-built free templates to create your first application using DhiWise.