include flutter widget into inline flow?

[asmith20002]

Hello,

I have a long html text which breaks into multiple lines on the device. I'd like to know if it is possible to add/insert a flutter icon/widget after the last character of the html as if that widget is part of the inline flow of that html content.

Here's is a sample where I want to insert an icon widget:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vitae sapien hendrerit, malesuada elit ac, sodales dui. Nulla at tincidunt nulla. Vestibulum dignissim consequat lacus nec vestibulum. Pellentesque id enim a eros elementum viverra at quis mi. Curabitur tristique odio est, non sodales arcu maximus sed. Proin arcu risus. Icon(icon.more)

Is this possible with the current version?

[asmith20002]

Alright managed to do it myself.

The solution is to create a custom tag for your desired widget and then catch that custom tag with customRenders of the Html() widget.

So whatever my current html data is, I'll just concatenate <morebutton></morebutton> to the end and then catch it with the custom renderer. Pretty neat:

return Html(
	data: data,
	tagsList: Html.tags..addAll(['morebutton']),
	customRenders:
	{
		moreButtonMatcher(): CustomRender.widget(widget: (context, buildChildren)
		{
			return Icon(icon.more);
		}),
	}
);

CustomRenderMatcher moreButtonMatcher() => (context) => context.tree.element?.localName == 'morebutton';

Note that for this to work the general flutter_html is not enough. Check the external packages:
https://github.com/Sub6Resources/flutter_html#external-packages

Since I needed full HTML solution, I went for flutter_html_all.

If you already use customImageRender of the flutter_html package, please be aware that it won't work anymore and you have to do the image render inside the customRenders. Same logic but just a little refactoring to do.

[erickok]

Just a side-note: you technically do not need flutter_html_all or a tag-specific module; flutter_html shoudl be enough for custom renders. Also, customImageRender shoudl still work. If not, that might be a bug!

But your solution to the original post us totally valid and correct. Thanks for sharing.

[asmith20002]

When including flutter_html_all, customImageRender is not available. Also customRender won't work but it is replaced with customRenders (note the S at the end, plural)

Moreover, with flutter_html, I got undefined error on CustomRenderMatcher. Also CustomRender didn't have a widget static function.

Are those all bugs?

[erickok]

Ah now I understand what you mean. Yes the APIs were renames. There is now a single customRenders parameter which takes both image and widget/span renders so that replaces the old customRender and customImageRender. But the feature still exists of course, for example:

          customRenders: {
            svgDataUriMatcher(): svgDataImageRender(),
            svgNetworkSourceMatcher(): svgNetworkImageRender(),
          },