SelectableText class

A run of selectable text with a single style.

Consider using SelectionArea or SelectableRegion instead, which enable selection on a widget subtree, including but not limited to Text widgets.

The SelectableText widget displays a string of text with a single style. The string might break across multiple lines or might all be displayed on the same line depending on the layout constraints.

The style argument is optional. When omitted, the text will use the style from the closest enclosing DefaultTextStyle. If the given style's TextStyle.inherit property is true (the default), the given style will be merged with the closest enclosing DefaultTextStyle. This merging behavior is useful, for example, to make the text bold while using the default font family and size.

When the widget has focus, it will prevent itself from disposing via its underlying EditableText's AutomaticKeepAliveClientMixin.wantKeepAlive in order to avoid losing the selection. Removing the focus will allow it to be disposed.

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

Using the SelectableText.rich constructor, the SelectableText widget can display a paragraph with differently styled TextSpans. The sample that follows displays "Hello beautiful world" with different styles for each word.

const SelectableText.rich(
  TextSpan(
    text: 'Hello', // default text style
    children: <TextSpan>[
      TextSpan(text: ' beautiful ', style: TextStyle(fontStyle: FontStyle.italic)),
      TextSpan(text: 'world', style: TextStyle(fontWeight: FontWeight.bold)),
    ],
  ),
)

Interactivity

To make SelectableText react to touch events, use callback onTap to achieve the desired behavior.

Scrolling Considerations

If this SelectableText is not a descendant of Scaffold and is being used within a Scrollable or nested Scrollables, consider placing a ScrollNotificationObserver above the root Scrollable that contains this SelectableText to ensure proper scroll coordination for SelectableText and its components like TextSelectionOverlay.

See also:

• Text, which is the non selectable version of this widget.
• TextField, which is the editable version of this widget.
• SelectionArea, which enables the selection of multiple Text widgets and of other widgets.