Extra spaces being added when custom Widgets are used with WidgetBit.inline and SelectableTextFactory

[mark8044]

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

[mark8044]

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

[daohoangson]

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?

[mark8044]

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

[daohoangson]

Apparently SelectionArea is available in the Flutter 3.1 beta. Have you tried this version?

[mark8044]

Apparently SelectionArea is 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?

[daohoangson]

You will need to put html widget inside a selection area.

[limck90]

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.

[daohoangson]

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.