User Select

Use select-{value} utilities to control how text within an element can be selected by the user.

Each playground demo paints a synthesised selection-blue background on a sample range to visually demonstrate what selection looks like under each variant (Flutter cannot capture a live drag-selection into a static frame).

Disabling text selection

Use the select-none utility to prevent selecting text in an element and its children. The demo renders the pangram without any highlight to indicate that selection is blocked.

Style('select-none ...', child: Text('The quick brown fox jumps over the lazy dog.'))

Allowing text selection

Use the select-text utility to allow selecting text in an element and its children. The demo highlights quick brown fox as a sample drag-selection range.

Style('select-text ...', child: Text('The quick brown fox jumps over the lazy dog.'))

Selecting all text in one click

Use the select-all utility to automatically select all the text in an element when a user clicks. The demo highlights the entire pangram to show the post-tap state.

Style('select-all ...', child: Text('The quick brown fox jumps over the lazy dog.'))

Using auto select behavior

Use the select-auto utility to use the default browser behavior for selecting text. The demo highlights over the lazy dog as a sample drag-selection range.

Style('select-auto ...', child: Text('The quick brown fox jumps over the lazy dog.'))

Class reference

Class	Description
select-none	Prevent text selection
select-text	Allow text selection
select-all	Select all text on tap
select-auto	Default browser selection behavior