How would you implement links to properly preserve multiline wrapping?

[mark8044]

I want to make links more powerful by attaching a gesture detector to them and giving me the ability to do a few things with them once they are clicked. So what Ive done is create a LinkWidget and then replace those links in my text with my widget as follows:

class _NewWidgetFactory extends WidgetFactory {

  @override
  void parse(BuildTree meta) {

    if (meta.element.localName == 'a') {
        meta.register(BuildOp(

            onParsed: (tree) {
              final newTree = tree.parent.sub();

                newTree.append(WidgetBit.inline(tree, LinkWidget(text:meta.element.text, url:meta.element.attributes['href'].toString(), fontSize: myFontSize,)) );

              return newTree;
            }
        ));
}

This allows my LinkWidget to take over and display a stylized LinkWidget with all the custom GestureDetector functions I want when tapping the link.

The only problem with this method is that the widget will not wrap the text when the link is long so it does not look naturally inline with the surrounding normal html text. Its almost like doing a display:block on a div.

So for example it will look like this

Some text blah blah
LONG LINK TEXT
blah blah blah continues

What Id ideally like is for it to look like this:

Some text blah blah LONG LINK
TEXT blah blah blah continues

I'd still love to use my own LinkWidget to control how links look and function, but is there a better way to integrate it so the text of the linkWidget wraps properly within a block of text

[mark8044]

In searching, I discovered InlineCustomWidget and wrapped my GestureDetector with it, but it seems to have no effect

[daohoangson]

You will need to handle gesture recognizers and styling the link with TextStyle I think. There is no way to layout a single widget into more than one line like that, that is done by the text layout engine and it works with texts only.

When you use the inline widget, it will consider the whole widget as a single rectangle and (most likely) will put it on the next line.

[mark8044]

So I should not use the inline widget and this seems otherwise impossible due to limits of Flutter engine?

[mark8044]

If I change the widget to be only GestureDetector(child:Text()) it remains as the same problem

[mark8044]

The best strategy remains to leave all links to HtmlWidget to render, and I hijack the click event via onTapUrl?

[mark8044]

Curiously, trying to leave the links to HtmlWidget to render totally fixes the problem of wrapping. But then if I style the CSS with a border-radius, it turns it into a block again, negating the benefit

[daohoangson]

Yeah, you cannot use block-level effects like border radius. You can only use things from TextStyle like decoration, background color, etc. Do you have a screenshot of what you are trying to achieve?

[mark8044]

I see, darn. I can also just use TextStyle to make the appearance Id like but it still shows up as a block type widget.

Do you think this is something that might change in the future using BuildOp or other... or I should give up on this idea?

Here is the requested screen shot of what I am able to achieve so far and what I am trying to do :

[mark8044]

Do you think the above is not possible and I should abandon the idea for now?