10

In the Flutter web apps, there is no default functionality which makes text and images in the app selectable.

Is there a way to enable selection functionality for text/image on web?

I did check SelectableText widget but it is only for text and I would need to use it over every text. Also, you can't select text in multiple SelectableText widgets at once, you can only select text in one of them. I'm looking for a solution to select all text in the app without making change to every text widget.

Let me know if there’s one step solution to achieve this thing in whole web app.

Ahmad Khan
  • 757
  • 9
  • 22

2 Answers2

18

In Flutter 3.3, with the introduction of the SelectionArea widget, any child of the SelectionArea widget has selection enabled for free!

enter image description here

To take advantage of this powerful new feature, simply wrap your route body (such as the Scaffold) with the SelectionArea widget and let Flutter do the rest.

For a more comprehensive deep dive into this awesome new feature, please visit the SelectionArea API page.

Andrey Gordeev
  • 30,606
  • 13
  • 135
  • 162
Ahmad Khan
  • 757
  • 9
  • 22
  • Is there a way to display toolbar above the selected text ? My text widgets are wrapped inside selection Area. I tried using selectable text for this same beahviour but it seems toolbar is not available in flutter web – Rahul Singh Nov 16 '22 at 11:28
  • My query is similar to this https://stackoverflow.com/questions/72747672/how-to-add-toolbar-above-text-in-flutter-web – Rahul Singh Nov 16 '22 at 11:29
  • Thank you for this, it's pretty straightforward. Do you know the reason why text is not selectable by default? Does the use of this widget affect performance in any way? – JAgüero Mar 06 '23 at 16:15
0

Flutter Web currently does not support multiple text selection across SelectableText widgets.

However, there are some experimental widgets that people are currently working on. According to a guide available at:

Custom SelectableScope Widget

They have proposed a custom widget, a Selectable scope, which basically allows for anything within it to be selectable (currently text and images)

NOTE: THIS IS CURRENTLY UNDER EXPERIMENTATION AND MIGHT CHANGE AS MENTIONED IN THE PROVIDED LINK.

Shehriyar Shariq
  • 1
  • 1
  • 2
  • Yeah. I did check this earlier but I'm looking for something stable as our app is live and one step solution as this way I would still need to change every text widget in my app. – Ahmad Khan Jul 21 '22 at 06:24
  • I see. A little digging up in the Flutter official Github repo led me to this widget, on which documentation currently seems to be non-existent as it was recently added. https://github.com/flutter/flutter/blob/15aa3bfda3658d1094ae50cc4c608fc94642405a/examples/api/lib/material/selection_area/selection_area.dart Apparently this widget supports what you are trying to achieve. However, this again isn't available in the stable version of Flutter and is currently under development. Your best bet right now would be to go with something that works until this gets added to the stable branch. – Shehriyar Shariq Jul 21 '22 at 07:15
  • ahan, i see. seems like until this feature comes in stable I might use that custom `SelectableScope` widget. Btw thank you for your response! – Ahmad Khan Jul 21 '22 at 09:42