I am having problem on flutter after updating to latest flutter version

Question

I have updated my flutter version and I am getting following errors. Other than that everything is working fine.

The named parameter 'tagsList' isn't defined. The getter 'tags' isn't defined for the type 'Html'. The named parameter 'customRenders' isn't defined. The argument type 'EdgeInsets' can't be assigned to the parameter type 'HtmlPaddings?'. The argument type 'EdgeInsets' can't be assigned to the parameter type 'HtmlPaddings?'.

Here is my code:

Padding(
                            padding: const EdgeInsets.fromLTRB(Dimensions.paddingSizeSmall, 0, Dimensions.paddingSizeDefault, Dimensions.paddingSizeSmall),
                            child: Html(data: widget.productModel!.details,
                              tagsList: Html.tags,
                              customRenders: {
                                tableMatcher(): tableRender(),
                              },
                              style: {
                              "table": Style(
                                  backgroundColor: const Color.fromARGB(0x50, 0xee, 0xee, 0xee),
                                ),
                                "tr": Style(
                                  border: const Border(bottom: BorderSide(color: Colors.grey)),
                                ),
                                "th": Style(
                                  padding: const EdgeInsets.all(6),
                                  backgroundColor: Colors.grey,
                                ),
                                "td": Style(
                                  padding: const EdgeInsets.all(6),
                                  alignment: Alignment.topLeft,
                                ),

Can anyone please help me. I know this is the problem generated by flutter_html. But I am unable to find solution.

I tried all the forums and everyone I know. But I am having this problem after updating dependencies and flutter. So please anyone help me.

Answer 1

Quoting from official migration guide

customRender has been changed to extensions, and its API is now significantly different. extensions accepts a List<Extension>.

This parameter has been split into two different options: doNotRenderTheseTags and onlyRenderTheseTags. All supported tags are allowed by default, including tags supported by extensions. This allows you to either restrict certain tags from rendering (say you don't want any images rendered), or allow only a certain subset of tags to render (say you only want h1-h6 and p tags to be rendered). Both doNotRenderTheseTags and onlyRenderTheseTags take a Set.

If you were using the style parameter in your Html widget, there are some minor changes to the API that introduce some huge possibilites.

Follow this guide and everything will be correctly working again.

If this doesn't help, please let me know and I'll provide more support to you. Happy coding!

EDIT

Please, update your flutter_html version to Beta 3 and migrate your code following the official migration guide I linked above. The code in the document is the same you posted in your question. Update your code using the Migration Guide and let me know if this solves your problems

Answer 2

You need to change EdgeInsets.all(8) to HtmlPaddings.all(8). Unfortunately that is not documented in the migration guide, I just found it out from the source code. Alternatively they provide an extension .htmlPadding on EdgeInsets, so you could also write const EdgeInsets.all(4).htmlPadding.

Seems like there is still some work to do until flutter_html version 3 is ready to be released...

Your other two issues are mentioned in the migration guide. For getting tables to work you need to remove the customRender stuff and instead write extensions: const [TableHtmlExtension()]. You also need to add a dependency on flutter_html_table in pubspec.yaml (by calling flutter pub add flutter_html_table)

Regarding the tagsList parameter I didn't understand what you want to achieve, maybe you can just remove that line? So it should be (untested):

  Padding(
    padding: const EdgeInsets.fromLTRB(Dimensions.paddingSizeSmall, 0, Dimensions.paddingSizeDefault, Dimensions.paddingSizeSmall),
    child: Html(data: widget.productModel!.details,
      extensions: const [TableHtmlExtension()],
      style: {
      "table": Style(
          backgroundColor: const Color.fromARGB(0x50, 0xee, 0xee, 0xee),
        ),
        "tr": Style(
          border: const Border(bottom: BorderSide(color: Colors.grey)),
        ),
        "th": Style(
          padding: const HtmlPaddings.all(6),
          backgroundColor: Colors.grey,
        ),
        "td": Style(
          padding: const HtmlPaddings.all(6),
          alignment: Alignment.topLeft,
        ),