How to Display Selectable Text in Flutter

Displaying selectable text in Flutter used to be tricky, as the platform did not currently offer a built-in way to do so. The recent Flutter version offers a SelectableText widget to implement a selectable text feature.

The SelectableText widget lets you display a string of text with a single style similar to the Text widget. Depending on the layout constraints, the string is displayed in one line or multiple lines.

You can use the SelectableText widget to give users the ability to select and copy text, as well as to provide them with feedback when they tap on text. When a user taps on the SelectableText widget, a selection handle appears. The user can then drag the selection handles to select the text they want to copy.

The SelectableText widget also supports styling, so you can change the font, color, and other properties of the text.

const SelectableText(
  'You can select this text',
),
const SelectableText(
  'On highlight, the cursor appears to be bigger than normal',
  cursorColor: Colors.red,
  cursorWidth: 24,
  cursorHeight: 24,
  style: TextStyle(fontWeight: FontWeight.bold, color: Colors.green),
),

The SelectableText.rich constructor may be used to create a SelectableText widget that can display differently styled TextSpans in a paragraph.

SelectableText.rich(
  TextSpan(
    text: 'SelectableText can be used',
    children: <TextSpan>[
      TextSpan(text: ' to allow user to highlight text ', style: TextStyle(fontStyle: FontStyle.italic, color: Colors.red)),
      TextSpan(text: ' and copy.', style: TextStyle(fontWeight: FontWeight.bold, color: Colors.blue)),
    ],
  ),
)