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
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
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
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
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
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:
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.
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.