Launch Club

Create Selectable Text in Flutter with Custom Context Menus


Published Dec 8, 2023

Marcus Ng

Marcus Ng

When users are reading comments or chat messages in your app, they may want to copy certain parts of it.

The Text widget doesn’t have selection built-in, which means a user can’t long-press to start text selection or double tap to select an individual word.

Instead, we have to use a widget called SelectableText (docs).

  'This is selectable text',
  style: TextStyle(fontSize: 28);
  // ...

SelectableText also lets us define onSelectionChanged and contextMenuBuilder.

onSelectionChanged fires when a user changes the selected text or cursor location. It gives us information on the selected indices (TextSelection) and reason for selection (SelectionCause).

contextMenuBuilder lets us build custom text selection toolbars with default and custom actions.

  style: TextStyle(fontSize: 28),
  onSelectionChanged: (selection, cause) =>
      print('onSelectionChanged: $selection, $cause'),
  contextMenuBuilder: (context, editableTextState) =>
    anchors: editableTextState.contextMenuAnchors,
    buttonItems: editableTextState.contextMenuButtonItems
          onPressed: () {
            print('Custom Button Tapped!');
          label: 'Custom Button',

And here’s the result!

Text selection gif

Flutter and Dart

made simple.

Everything you need to build production ready apps.

No spam. Just updates. Unsubscribe whenever.