A Flutter widget that enables text selection over all the text widgets it contains.
Try it out at: https://ronjb.github.io/selectable
This library was written over a year before SelectableRegion
and related classes were added to Flutter. I will continue to maintain this library because I still use it in a few of my projects, but now that Flutter natively supports selection, I'd recommend using their implementation if it meets your needs.
Add this to your app's pubspec.yaml
file:
dependencies:
selectable: ^0.3.1
Then in the dart file, import the package with:
import 'package:selectable/selectable.dart';
And use Selectable
where appropriate. For example:
Scaffold(
body: SingleChildScrollView(
child: Selectable(
child: Column(
children: [
Text('... a lot of text ...'),
// ... more widgets of any type that might contain text ...
],
)
)
)
)
Important Note: As shown in the example above, if a scrollable widget (such as SingleChildScrollView
, ListView
, CustomScrollView
, etc.) is used to wrap the text widgets you want to enable selection for, the Selectable
widget must be a descendant of the scrollable widget, and an ancestor of the text widgets.
Selectable
by default supports long-pressing on a word to select it, then using the selection handles to adjust the selection. To also enable double-tapping on a word to select it, pass in selectWordOnDoubleTap: true
like this:
Selectable(
selectWordOnDoubleTap: true,
child: child,
)
For example:
IgnoreSelectable(
child: Text(
'This text is wrapped in an IgnoreSelectable widget, so it is not selectable.',
style: textStyle2,
),
),
Selectable
provides a default popup selection menu with the menu items Copy, Define, and WebSearch, but it can easily be customized. For example, to continue to show the default Copy menu item, and to add a custom menu item with the title "Foo! :)", which shows the selected text in an AlertDialog, do this:
Selectable(
child: child,
popupMenuItems: [
SelectableMenuItem(type: SelectableMenuItemType.copy),
SelectableMenuItem(
title: 'Foo! :)',
isEnabled: (controller) => controller!.isTextSelected;
handler: (controller) {
showDialog<void>(
context: context,
barrierDismissible: true,
builder: (builder) {
return AlertDialog(
contentPadding: EdgeInsets.zero,
content: Container(
padding: const EdgeInsets.all(16),
child: Text(controller!.getSelection()!.text!),
),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(8)),
);
},
);
return true;
},
),
],
)
Look at the code in the example app included with this package for more usage details and example code, and feel free to add an issue to ask questions or report problems you find while using this package: https://github.com/ronjb/selectable/issues