Flutter_widget_from_html: how to extract rendered html text ?

[elmissouri16]

first thanks to the amazing work, I have a question is there any way to get rendered HTML text ? , I want to copy it to use it else where

[daohoangson]

What did you mean by extracted?

The input HTML was passed into the widget. If you need it somewhere else, just forward it yourself I think?

[elmissouri16]

@daohoangson thanks for the quick reply, whats I mean is extract the rendered HTML as text from it

[daohoangson]

Looks like you want to copy the text of the rendered paragraph? That's currently not possible because SelectableText widget is not fully implemented.

See #102 and flutter/flutter#38474

[elmissouri16]

ok got it this was i used its kinda work but not whats i want

 Widget buildText(BuildMetadata meta, TextStyleHtml tsh, InlineSpan text) {
    final textWidget = super.buildText(meta, tsh, text);
    if (textWidget == null) return textWidget;
    return SelectableText.rich(
      TextSpan(children: [text]),
      textDirection: this.enableRtl ? TextDirection.rtl : TextDirection.ltr,
      style: tsh.style,
    );
  }

[daohoangson]

Yep, doing that will make the text selectable but the WidgetSpans won't work...

And you said that was not it, so... what do you want exactly? Do you have some app in mind that does something special? Link or screenshot would be useful here.

[elmissouri16]

I'm building a news app the pull the data from WordPress rest API I want to be to able to give user option to select the text of the full article and use it , the approach I used only allow to select paragraph at a time the Textspan I suppose her my app how its looks like image

[daohoangson]

That is correct. Your change will allow copying text within a paragraph but it won't work for the full article. Actually it depends on the HTML, if there is no special block, it may be rendered as one RichText (which will be replaced by your code to use SelectableText.rich) so it's possible to copy everything at once.

For complicated HTML, that won't work of course...

[elmissouri16]

"\n<p>Tesla took another shot at its skeptics by delivering solid second-quarter earnings — and its fourth consecutive quarterly profit — even amid the coronavirus pandemic.</p>\n\n\n\n<p>The California-based automaker also announced on Wednesday that it will move ahead on plans to set up a second U.S. assembly plant, awarding the prize to Austin, Texas. The Lone Star State had been battling it out in a multi-state bidding war. Tesla already operates two car plants, including its original factory in Fremont, California, and another in Shanghai that opened last year. A third facility near Berlin is under construction.</p>\n\n\n\n<p>n a teleconference with analysts and reporters, Tesla CEO Elon Musk rolled off a list of things he said Tesla has in store, including new vehicles and other lines of business that could substantially boost future revenues.</p>\n\n\n\n<p>“I’ve never been more excited or optimistic about the future of Tesla in the history of the company,” he said, adding, “There’s so much to be excited about it’s almost hard to fit into this call.”</p>\n\n\n\n<p>Tesla officials pointed to a number of things that helped drive Tesla’s fourth consecutive quarterly profit, including not only its new Model Y and the China plant, but also its expanding presence in the energy storage business.</p>\n\n\n\n<p>“Tesla Energy will be bigger than automotive,” Musk said during the company&#8217;s quarterly earnings call on Wednesday night, pointing to a shift to sustainable sources such as wind and solar.</p>\n\n\n\n<p>Looking forward, Musk outlined plans for an expanded line-up of battery-electric vehicles, with the company set to launch production of its heavy-duty Semi truck next year. It is also moving ahead with the development of its Cybertruck pickup. In the longer term, Musk hinted, it may be “reasonable to assume” Tesla will add a compact vehicle, “and probably a higher capacity passenger vehicle.” He did not offer additional details on Wednesday night, however.</p>\n"

the HTML be like this maybe I can remove all the p tags on the middle and leave only the opening and closing one the paragraphs will be separated by a new line breaks

[daohoangson]

maybe I can remove all the p tags on the middle and leave only the opening and closing one the paragraphs will be separated by a new line breaks

I think that might work 👍

[emvaized]

@elmissouri16
I've managed to achieve great results using extended_text.
Nice addition is little pop-up with 'copy' command on selecting text.

  @override
  Widget buildText(BuildMetadata meta, TextStyleHtml tsh, InlineSpan text) {
    final textWidget = super.buildText(meta, tsh, text);
    if (textWidget == null) return textWidget;
    return ExtendedText.rich(
      text,
      style: tsh.style,
      selectionEnabled: true,
      selectionColor: Colors.cyan,
    );
  }

[elmissouri16]

@emvaized thank you i will try it definitely

[emvaized]

@daohoangson
I just found out however, that my solution above has a flaw - each paragraph of text is treated as a separate RichText, so that such weird situations occur with text selection:

Could you think of any fix for this?

[daohoangson]

Ideally you should be able to listen to on select event and dismiss unrelated selections. After taking a look into the extended_text library document, they don't seem to have such callback and you can't "deselect"... I think a possible workaround is to use onTap and toggle selectionEnabled.

[emvaized]

Thanks, this might work!
However, features like "Select all" still won't, as every paragraph seems to be treated as a separate RichText widget...

Maybe I can somehow wrap all the text in one single RichText widget, by overriding for example buildColumn instead of buildText?