flutter_widget_from_html
flutter_widget_from_html copied to clipboard
daohoangson
Extra spaces being added when custom Widgets are used with WidgetBit.inline and SelectableTextFactory
I will try to explain as best as I can.
Right now I have the following HTML code:
<br />
<div class="gallerybox">
[myimage]image1.jpg[/myimage]
[myimage]image2.jpg[/myimage]
[myimage]image3.jpg[/myimage]
[myimage]image4.jpg[/myimage]
[myimage]image5.jpg[/myimage]
[myimage]image6.jpg[/myimage]
</div>
and the following Flutter/dart
@override
void parse(BuildMetadata meta) {
if (meta.element.classes.contains('gallerybox')) {
meta.register(BuildOp(
onTree: (_, tree) {
WidgetBit.inline(tree.parent!, _MyGalleryBox(content:meta.element.text)).insertBefore(tree);
tree.detach();
},
));
}
class _MyGalleryBox extends StatelessWidget {
const _MyGalleryBox({Key? key, required this.content}) : super(key: key);
final String content;
@override
Widget build(BuildContext context) {
RegExp galItemRegex = RegExp(
r'\[myimage\](.*?)\[\/myimage\]',
caseSensitive: false,
multiLine: true,
dotAll: false
);
var galImageList = galItemRegex.allMatches(content).map((z) => z.group(1)).toList();
return LayoutBuilder(
builder: (BuildContext context, BoxConstraints constraints) {
return
Container(
margin: const EdgeInsets.fromLTRB(0, 0, 0, 10),
padding: const EdgeInsets.fromLTRB(0,0,0,0),
child: Wrap(
spacing: 2,
runSpacing: 2,
children: [
for (var i = 0; i < galImageList.length; i++)
Image.network(galImageList[I])
],
)
);
},
);
}
}
This properly shows all my images, but a large number of extra blank spaces comes in after my widget.
This large space ONLY occurs, if I have a carriage return (<br />) in front of my text
<br />
<div class="gallerybox">
...
</div>
It does NOT occur if I have no carriage return
<div class="gallerybox">
...
</div>
The extra space also seems to be about the height of my Wrap/image widget
Ok here is something interesting, this bug is occurring when I use
flutter_widget_from_html_core: ^0.8.5+3 + fwfh_selectable_text: ^0.8.3
If I use flutter_widget_from_html: ^0.8.5 or flutter_widget_from_html_core: ^0.8.5+3 alone, then this bug does not occur
The selectable variant uses a different widget to render so it may work differently. Starting from Flutter 3, that widget is no longer needed though.
Which Flutter version are you on?
The selectable variant uses a different widget to render so it may work differently. Starting from Flutter 3, that widget is no longer needed though.
Which Flutter version are you on?
Im on Flutter 3.0.2
If I stop using selectable text then I can't select text. I'm doing it as follows, without any other change to my widget factory :
class _NewWidgetFactory extends WidgetFactory with SelectableTextFactory {
class _NewWidgetFactory extends WidgetFactory {
I prefer using flutter_widget_from_html_core + fwfh_selectable_text rather than flutter_widget_from_html in order to keep the app lightweight and only include the parts that I need, to keep app size smaller
Apparently SelectionArea is available in the Flutter 3.1 beta. Have you tried this version?
Apparently
SelectionAreais available in the Flutter 3.1 beta. Have you tried this version?
Not yet, I'm only on master channel, so I will wait until 3.1 becomes official. But when that happens, you are saying just use flutter_widget_from_html_core without fwfh_selectable_text and text selection will work out of the box?
Hi @daohoangson, could you provide a simple workable example about the SelectionArea and HtmlWidget?
I am using Flutter v3.1.0-9.0.pre and flutter_widget_from_html v0.8.5.
I put HtmlWidget inside a SelectionArea but I could not select the text without isSelectable: true.
v0.9.0 has been released with proper support for Flutter 3.3 SelectionArea. Please try upgrading and see whether it works for you.
Please note that isSelectable is no longer needed.