Flutter Quill – Rich Text Editor in Flutter Application

This post will explain how to integrate a rich text editor into your Flutter application so that it may enable rich text editing. There are many more things we can do with Flutter Quill, but they can get a little involved. The example below is a pretty basic demonstration of what we mean. Let’s first discuss what flutter quill is and why we need it before moving further.

Flutter Quill is a Rich Text Editor and a Quill Component for Flutter

• Allows users to write long articles with highly customisable text. features like adding numbered lists bulleted list hyperlinks etc
• We can also add images into the editor (we won’t be discussing it here)
• Quill uses a format known as Delta that may be saved in our database as JSON, meaning that all user-submitted custom data and other data will be preserved without any data loss in between.

Step By Step Implementation

Step 1: Create a New Project in Android Studio

To set up Flutter Development on Android Studio please refer to Android Studio Setup for Flutter Development, and then create a new project in Android Studio please refer to Creating a Simple Application in Flutter.

Step 2: Install flutter_quill

dependencies:
  flutter_quill: ^7.4.6

We are using version 7.4.6 but i suggest using the latest version while you are implementing it.

Step 3: Import it in your file where required

Dart

import 'package:flutter_quill/flutter_quill.dart' as quill;

Keep in mind to import it as quill to avoid seeing duplicate definition errors. For example, since Text is defined in both material.dart and flutter_quill.dart, we can prevent this conflict by using the “as” keyword.

Step 4: Create a quill controller

Dart

final quill.QuillController controller = quill.QuillController.basic();

It’s easy to construct an empty controller, which means that there are no data in the document that goes with it.

Step 5: Add the quill editor and pass the previously defined controller

Dart

quill.QuillEditor(
        // padding
        padding: const EdgeInsets.all(8),
        // Pass the controller here
        controller: controller,
        // if you want to control the scroll define
          // a scroll controller and pass it here
        scrollController: ScrollController(),
        // set true if you want the editor to be
          // scrollable when the keyboard appears or too much content
        scrollable: true,
        // pass a focus node if you want to
          // control when the keyboard appears
        focusNode: FocusNode(),
        // if true the keyboard will appear
          // when the widget is rendered
        autoFocus: false,
        // set true if you want
          // to disable editing
        readOnly: false,
        // set true if you want the editor to
         // expand and occupy all the available space
        expands: false,
        // if there is no content this
          // text will be displayed
        placeholder: 'Add your data here...',
      )

Although there are many more helpful arguments, this quill editor is defined with all the necessary arguments.

Step 6: Add a tool bar enabling custom texts

Dart

quill.QuillToolbar.basic(controller: controller)

This creates a basic tool bar with font, size, bold text features etc. Now all you have to do is group all the code

Complete Code

Dart

import 'package:flutter/material.dart';
import 'package:flutter_quill/flutter_quill.dart' as quill;

void main() {
  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    final quill.QuillController controller = quill.QuillController.basic();
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Quill Editor'),
        ),
        // Quill Editor
        body: Column(
          children: [
            quill.QuillToolbar.basic(controller: controller),
            quill.QuillEditor(
              // padding
              padding: const EdgeInsets.all(8),
              // Pass the controller here
              controller: controller,
              // if you want to control the scroll define a
              // scroll controller and pass it here
              scrollController: ScrollController(),
              // set true if you want the editor to be scrollable
              // when the keyboard appears or too much content
              scrollable: true,
              // pass a focus node if you want to control
              // when the keyboard appears
              focusNode: FocusNode(),
              // if true the keyboard will appear
              // when the widget is rendered
              autoFocus: false,
              // set true if you want to disable editing
              readOnly: false,
              // set true if you want the editor to expand and
              // occupy all the available space
              expands: false,
              // if there is no content this
              // text will be displayed
              placeholder: 'Add your data here...',
            ),
          ],
        ),
      ),
    );
  }
}

Output:

This is how the output looks like:

Home screen

How to save and access saved document?

Getting the data from the controller in delta format and then convert it to JSON:

Dart

import 'dart:convert';

final String data = jsonEncode(controller.document.toDelta().toJson());

Although the data is in string form here, it includes all of its original information because it was translated from Delta to JSON. It will now be saved as a string if you wish to store it in a database or local storage.

Converting string back into delta format and passing it to the controller:

Convert the JSON back to Delta and then to Document when you wish to start the editor with any saved data.

Dart

final quill.QuillController controller = quill.QuillController(
      document: quill.Document.fromJson(
          jsonDecode(
          // JSON needs to be put here
          )),
      selection: const TextSelection.collapsed(offset: 0),
    );

There will be an issue while running this code because I haven’t included any JSON in the JSON decode function. The saved JSON only has to be passed to the jsonDecode function.