Flutter Quill - WYSIWYG or Rich HTML Content Plugin

I show you how to use the Flutter Quill plugin in Flutter to enable Rich Text in your app.

I'm going to show you how you can use a plugin similar to CKEditor or in short, the WYSIWYG plugins What You See Is What You Get, that is, what you get in html here, the fundamental difference is that html is not used here, unlike any web application, for example with CKEditor.

So the plugin in the end is like the one you can see on the screen from here, you can change, for example, the typography, although it is really the typography of the control bar, the font size can be placed here in a numeral and other things, for example, a code block, and what you can see on the screen, so it is really the typical plugin that allows us to place rich content on a text field, it is that simple, the plugin in question is the one you can see on the screen:

https://pub.dev/packages/flutter_quill

El llamado flurer quill viene siendo este esta es la página oficial y vamos a ver cómo lo configuras una vez instalado que es el típico en el y colocarlo:

dependencies:
  flutter:
    sdk: flutter
  ***
  flutter_quill:

You import it and here you create an instance as you can see here we have others, I placed the basit and I am showing you the configuration:

import 'package:flutter_quill/flutter_quill.dart';
***
final QuillController _controllerHtmlEditor = QuillController.basic();
  @override
  void dispose() {
    _controllerHtmlEditor.dispose();
    super.dispose();
  }
 ***

What I have is that you create your instance, you do the dispose like many other resources, for example animations, here what I'm doing is initializing, in this case, how could it be an existing comment, so this is the way to initialize, in case you're interested, we get the document, which is what was written by the user, and here the pair of functions that I showed you before in another video are used, which was Front Delta and html your Delta:

_controllerHtmlEditor.document = Document.fromDelta(htmlToDelta(c)),

This is again if you are using or saving the content in html then it is important to do this conversion if you are saving the content locally in the application it would not be necessary to do the conversion if anything Delta because you are going to save it.

Here you can see the result is using a promise function and everything else because it is a request in this case to my resapi but this step is optional again that is to initialize the content and here would be how we establish the plugin as you can see it is a bit strange because it is divided into two blocks one is for the bar which is this part up here the toolbar you could say in the colors the background the list etcetera there you place it and the part of the box that in this case optionally I put a small style so that an empty space would not appear and it would not be known what that is then to do the line spacing here as you can see and we put the size here which is important and finally the name of the plugin and you pass it the instance that we created previously and that would be practically everything with that we would have the plugin that you are seeing here on the screen:

QuillSimpleToolbar(
          controller: _controllerHtmlEditor,
          configurations: const QuillSimpleToolbarConfigurations(),
        ),
        Container(
          padding: const EdgeInsets.all(5),
          decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(5),
              border: Border.all(color: Theme.of(context).primaryColor),
              color: appTheme.darkTheme ? Colors.black26 : Colors.black12),
          height: 300,
          child: QuillEditor.basic(
            controller: _controllerHtmlEditor,
            configurations: const QuillEditorConfigurations(),
          ),
        ),

07-01-2025 - Andrés Cruz

En español

• Category
• /
• Flutter
• /
• Flutter Quill - WYSIWYG or Rich HTML Content Plugin