Open In App
Related Articles

Flutter Quill – Rich Text Editor in Flutter Application

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Report issue
Report

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:

WhatsApp-Image-2023-10-15-at-113906-PM

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.



Last Updated : 24 Oct, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads