Make text selectable

By default, text in Flutter apps isn't selectable. This means users can't long-press and copy important information shown on the screen.

Why is Selection Important?

Being able to select text makes your app more user-friendly. It allows people to copy details like addresses, phone numbers, or website links easily.

How to Make Text Selectable?

Flutter provides two main ways to add text selection:

Using SelectionArea

The SelectionArea widget is great when you want to make text selectable within a certain part of your app, or even the whole app. You wrap the part of your widget tree where you want text selection enabled with SelectionArea.

Example:

return MaterialApp(
  home: SelectionArea(
    child: Scaffold(
      appBar: AppBar(title: const Text('SelectionArea Sample')),
      body: const Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text('Row 1'),
            Text('Row 2'),
            Text('Row 3'),
          ],
        ),
      ),
    ),
  ),
);

Just add SelectionArea high up in your widget tree, like around your Scaffold or even MaterialApp, and all the text widgets inside it become selectable.

Using SelectableText

If you only need to make a single Text widget selectable, you can simply replace Text with SelectableText. This widget is specifically designed for making individual text elements selectable.

Example:

const SelectableText(
  'Hello! How are you?',
  textAlign: TextAlign.center,
  style: TextStyle(fontWeight: FontWeight.bold),
)

This is simpler if you just have one specific text you want users to be able to copy.

SelectionArea vs SelectableText

• Use SelectionArea if you need to enable selection on multiple text widgets or other selectable widgets within a specific area.
• Use SelectableText if you only need to make a single Text widget selectable.