[flutter_markdown] Allowing users to highlight text

Hi all, I hope you’re doing well.

We’ve been using the official flutter_markdown package to render blogpost-like content in our application.
A new important requirement is to allow users to select a portion of the text and highlight it (see below).

I’ve been exploring the MarkdownBody selectable: false property; as well as wrapping the component inside a SelectionArea.
Challenges:

  • When I’m using the selectable:true property users can’t select multiple paragraphs. They’re restricted to the limits of the paragraph they started the selection.
  • When using SelectionArea, the onSelectionChanged() callback doesn’t receive any information of the position/offset of the selection.

Does anyone have any insights on the feasibility of what I’m trying to achieve or how to address it?
I’m also starting to consider different libraries (would appreciate any thoughts/recommendations)

Thanks in advance!

We are having the same problem of selection with markdown_widget

In our app we need the clipboard to work well but the results are not formatted and sometimes (with code blocks) the clipboard takes just the first paragraph or the code block.

It seems that gpt_markdown | Flutter package is the solution for us.

1 Like

In case someone is wondering how to get the position/offset you’ll need to use a SelectionListener wrapped in a SelectionArea and then the SelectionListenerNotifier to get access to the details. The demo in SelectionListener class - widgets library - Dart API shows an example of this.

@sbpro did gpt_markdown work for selecting text? The issue I have with flutter_markdown_plus is, as mentioned by the OP and yourself, the text loses new lines, which makes highlighting impossible. I’m also not sure how to add highlights to tables — if anyone has an idea or example of how to achieve that please let me know!