Widget inline OR Fetching text style from parent
How would you do this if you want the widget to be inline? I have a running text where I want to add a custom popup to a tag. Something like this:
<p>This is a text with a <i>word</i> that I want to add a popup to.</p>
With this approach...
meta.register(BuildOp(
onRenderBlock: (tree, placeholder) {
return placeholder.wrapWith((_, child) {
return InfoPopupWidget(
customContent: () => MyWidget()
child: child,
);
});
}));
...this is rendered:
This is a text with a
word
that I want to add a popup to.
I can get closer to what I want with this, but then I don't know how to get the text style from the CSS that I need:
onParsed: (tree) {
final newTree = tree.parent.sub();
newTree.append(WidgetBit.inline(
tree.parent,
InfoPopupWidget(
customContent: () => MyWidget()
child: Text(tree.element.text,
style: /* How do I get the style that I need here? */),
)));
return newTree;
},
Originally posted by @ArvidNy in https://github.com/daohoangson/flutter_widget_from_html/discussions/1108#discussioncomment-8783544
Have you tried using BuildOp.inline?
See the second example. Then I do not know how to get the parsed widget or the correct style for the text.
@daohoangson Excuse me. I have a problem and don't know if it is a bug or my fault. It only shows the first InlineWidget.The rest of the content, including regular text, is not being rendered.
var kHtml = '''
<p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa <c-at id="a"/> bbbbbbbbbbbbbbbbbb <c-at id="b"/> </p>
''';
class _SmiliesWidgetFactory extends WidgetFactory {
final smilieOp = BuildOp(
debugLabel: 'smilie',
onParsed: (tree) {
final alt = tree.element.attributes['alt'];
return tree..addText(kSmilies[alt] ?? alt ?? '');
},
);
final atOp = BuildOp.inline(
// alwaysRenderBlock: false,
debugLabel: 'at',
onRenderInlineBlock: (tree, c) {
final id = tree.element.attributes["id"] ?? "null";
return Text("@$id", style: TextStyle(color: Colors.red));
});
@override
void parse(BuildTree tree) {
final e = tree.element;
if (e.localName == 'img' &&
e.classes.contains('smilie') &&
e.attributes.containsKey('alt')) {
tree.register(smilieOp);
return;
}
if (e.localName == 'c-at') {
tree.register(atOp);
return;
}
return super.parse(tree);
}
}