include flutter widget into inline flow? #973

asmith20002 · 2022-01-09T17:42:57Z

asmith20002
Jan 9, 2022

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?

Answered by asmith20002

Jan 11, 2022

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 …

View full answer

asmith20002 · 2022-01-11T20:13:25Z

asmith20002
Jan 11, 2022
Author

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.

3 replies

erickok Jan 12, 2022

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 Jan 14, 2022
Author

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 Jan 14, 2022

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(),
          },

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

include flutter widget into inline flow? #973

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 1 comment 3 replies

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

Select a reply

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

include flutter widget into inline flow? #973

asmith20002 Jan 9, 2022

Replies: 1 comment · 3 replies

asmith20002 Jan 11, 2022 Author

erickok Jan 12, 2022

asmith20002 Jan 14, 2022 Author

erickok Jan 14, 2022

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

asmith20002
Jan 9, 2022

Replies: 1 comment 3 replies

asmith20002
Jan 11, 2022
Author

asmith20002 Jan 14, 2022
Author