Delta in Flutter for formatting rich text (HTML) and using wysiwyg

I present you a mechanism to be able to format texts in Flutter.

I wanted to tell you a little about how you can handle what is Delta and HTML by making a small introduction.

Delta is nothing more than a structure like the following, it is something similar to HTML by applying the styles but in JSON format it is not the same, even so we can do some translations. And why is this important? Because there are certain plugins, certain components that you will surely need. In my case, it is this plugin that is similar to WYSIWYG, that is, what you see, what you get, that we use in web development and in this case it is implemented in Flutter.

Synchronize Delta and HTML

As you can see in my case it is for the Academy application that I use here in this case it is the CKEditor plugin and here for the comments part as you can see the comments of a class and here I have to place content in rich text as you can see an h1 I can place a list here, well I did not enable the list here now that I am viewing it later you can place bold etc. you can place that type of operations.

Delta is not the same as HTML and vice versa

Here we are going to have it, it is not exactly the same, here too I have a style applied, that is to say, the line is by style sides, that is another topic, but in essence the html is an h1, something similar, again the translation is not perfect:

[{insert: Title 1}, {insert: 
, attributes: {header: 2}}, {insert: Content, attributes: {bold: true}}, {insert:  
}]

<div data-v-8d2ec44a=""><h2>Title 1</h2><p><strong>Content</strong></p></div>

And this is something that you can see in the official documentation for each of the plugins that I'm going to show you on screen but it would be the closest that we have in summary here in this type of plugin it does not handle what is html and ccs but it handles a kind of equivalent something similar which is the delta then with that is what we can work even so for this type of ion operation in which the presentation at the end is not so important that is to say that if here this appears in bold and here it does not appear bold it is not so important it is simply a comment but as much as it is I want to respect a little what is the style that can define in the person at the time of writing the comment but again it is what we have then how the plugin itself works I will explain it to you in another video in this case I only want to talk a little about what is Delta html and from html to Delta.

Delta to html

We have a plugin for each of these situations, which is exactly what I am using here. Note that I am showing you one from Delta to Html:

import 'package:vsc_quill_delta_to_html/vsc_quill_delta_to_html.dart';

String deltaToHTML(List<Map<String, dynamic>> delta) {
  // final deltaOps = [
  //   {'insert': 'Hello\n'},
  //   {
  //     'insert': 'This is colorful',
  //     'attributes': {'color': '#f00'}
  //   }
  // ];

  final converter = QuillDeltaToHtmlConverter(
    delta,
    // ConverterOptions.forEmail(),
  );

  return converter.convert();
}

Here Remember that the Delta would be what we are going to translate a Delta in map format and the method we use would be the good one that you can see on the screen we simply pass the delta and it does the conversion here

Html to Delta 

For the other from html to delta:

import 'package:flutter_quill_delta_from_html/flutter_quill_delta_from_html.dart';
Delta htmlToDelta(String html) {
  try {
    return HtmlToDelta().convert(html);
  } catch (e) {
    // return HtmlToDelta().convert('<p></p>');
    return Document.fromJson([
      {'insert': '\n'},
    ]).toDelta();
  }
}

Here we receive the html that would be a String basically and here we use the html delta with html and here we would have the delta and little more to say the plugins in question here I have them imported this that I have here and that you can see here on the screen and here you have more in the official documentation simply place this again this one of Delta converts to delta from an html and this converts a Delta to html that is to say the inverse and again here you have the examples and the configurations and so on in my case with the simple configuration it was more than enough how I use them to finish this video I am going to look for this one here in the project and we are going to see some examples in this case here in the Tab I am going to see this one better in this case this one is for when I in the database what I save is an html in the database on the server therefore when I want to edit the content I come here to comments and I click here to edit

So I have to convert that html to a Delta which is exactly what I am doing here to then establish that is the editor itself which is the one you are seeing here on the screen then this is being a possible use as for the other I am going to look for this one here for example to see here for when I have already made the edition, that is to say I came here and made the changes and I am going to hit send here precisely in this step the message was sent what I do is communicate with the Api and send the content but to send the content as I tell you in the database I save it is html and css and therefore I have to convert that Delta to an html and for that I use the mentioned editor that later I will explain to you in another video I get the document I get the delta I translate it into a json so that I can handle it from the plugin and I use the corresponding method that as I showed you a few moments ago what it does is convert from Delta to html and that is what my resapi will finally receive and it is what it will save in the database therefore the one that is in charge of always doing the conversions from Delta html and from html to Delta is precisely the application here in flurer for what was mentioned before because the Academy application was born as a web application and now I am adapting it to other platforms

- Andrés Cruz

En español

Andrés Cruz

Develop with Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter

Andrés Cruz In Udemy

I agree to receive announcements of interest about this Blog.

!Courses from!

10$

On Udemy

There are 0d 15:15!


Udemy

!Courses from!

4$

In Academy

View courses

!Books from!

1$

View books
¡Become an affiliate on Gumroad!