Flutter How to handle text selection?

Question

I need to display a styled text for reading and some actions. User should be able to select piece of text and mark it with color, save it or expand it (show an additional information, for example a translation to another language).

I can display text by using RichText widget.

1) How to make it selectable and how/where to add onTextSelected listener? There is a class TextSelection but I can't see how/where its used.

2) What is a simplest way to expand text? I can reload full text (with changes added) and totally update widget, but this will result to scrolling to the top of a text and I think there should be a better approach.

Not a perfect solution but you can look into [this](https://docs.flutter.io/flutter/rendering/RenderEditable-class.html) and [this](https://github.com/flutter/flutter/issues/5422) — Rohan Taneja, Sep 21 '18 at 22:32
Does this answer your question? [How to make copyable Text Widget in Flutter?](https://stackoverflow.com/questions/46260055/how-to-make-copyable-text-widget-in-flutter) — Karan Owalekar, Aug 13 '21 at 07:34

score 12 · Answer 1 · answered Feb 18 '20 at 15:54

12

You now have SelectableText() widget available

answered Feb 18 '20 at 15:54

Sebastian

3,666
2
19
32

Do note that a user can only select one SelectableText widget at a time. – Carl Jun 23 '23 at 11:29

score 1 · Answer 2 · answered May 16 '19 at 10:08

There is some progress in making text selection possible in Flutter. The only working solution at the moment is using RenderEditable with suppressed keyboard calls and removed cursor.

See flutter_selectable_text plugin to make text selectable.

To also listen for selection events - consider using flutter_selectext plugin, which also supports rich text (TextSpan).

However, I would recommend waiting for the official implementation that is supposed to arrive in the end of May 2019.

The official release arrived -- but is currently borked for web. — user48956, Oct 31 '19 at 02:32

Pule Maanela · Answer 3 · 2019-05-24T07:42:54.337

-2

Use GestureDetector out of your text view. For example

GestureDetector(
          onTap: (){},
          child: Text(
            'Your text',
           style: TextStyle(
                    color: Colors.green,
                  ),
          ),
        ),

And as for the rest of the question I dont understand

edited May 24 '19 at 07:42

answered May 24 '19 at 07:37

Pule Maanela

65
4

You completely misunderstood the question, I believe. The OP was asking about the `selectable` or `hightlightable` and 'expand` a `Text()` when `onClicked` – 钟智强 Aug 24 '22 at 05:21

Flutter How to handle text selection?

3 Answers3