Parent CustomRender override child CustomRender

[bekchan]

I'm trying to add SelectableText to paragraph, and clickable links. But link CustomRenderer not work if it inside paragraph. Am I doing something wrong? How to fix it?

return Html(
      data: '''<h3>Hello</h3><p>Some text with <a href="https://google.com">link</a></p>''',
      customRender: {
        "p": (context, child, attr, element) {          
          return SelectableText(element.text, style: TextStyle(color: Colors.red));
        },
        "a": (context, child, attr, element) {
          return GestureDetector(
            onTap: () => launchURL(attr['href']),
            child: new Text(element.text, style: TextStyle(color: Colors.green))
          );
        },
      },
    );

[Sub6Resources]

Your customRenderer is overriding all the styling and functionality added by the Html widget because you are using element.text rather than the child attribute, which has already been parsed. The element property is just the raw html dom.Element that the Html widget uses to create the widget tree.

Unfortunately it is difficult (if not impossible) to nest custom renderers when you are using the SelectableText widget (see issue #169 for the reasons behind this). However, there is a chance it's possible. See this section of the wiki for all the information about nesting custom renderers: https://github.com/Sub6Resources/flutter_html/wiki/All-About-customRender#widget-parsedchild

And if you happen to solve this, if you wouldn't mind adding a comment on #169, that would be great. I'm still scratching my head over how to do it well.

[erickok]

Let us know if you still experience difficulties with the latest customRender feature. You can apply (text) styling in a resursive manner by relying on the style or even by passing an alternative style to the children in your customRender.