Flutter - Using SelectableText Widget Examples

This tutorial shows you how to use SelectableText widget in Flutter.

If you need to display text in Flutter, the common way is by using Text widget. However, it doesn't allow the user to select the text. If you want the user to be able to select the text, you can use Flutter's SelectableText widget.

Basic Usage

To use SelectableText, there is only one required parameter which is the text to be displayed (String).

  SelectableText(
    'Flutter Tutorial by Woolha.com',
  )

Output:

 

FormattingText

You can set a TextStyle using style attribute.

  SelectableText(
    'Flutter Tutorial by Woolha.com',
    style: TextStyle(color: Colors.blue, fontWeight: FontWeight.bold, fontSize: 48),
  )

Output:

 

To adjust the alignment, use textAlign property.

  SelectableText(
    'Flutter Tutorial by Woolha.com',
    style: TextStyle(color: Colors.blue, fontWeight: FontWeight.bold, fontSize: 48),
    textAlign: TextAlign.center,
  )

Output:

 

You can also set StrutStyle using strutStyle property if necessary.

 

Adding and Customizing Cursor

By default, when the user clicks on the text, it doesn't show the cursor. To show the cursor, set showCursor value to true.

  SelectableText(
    'Flutter Tutorial by Woolha.com',
    style: TextStyle(color: Colors.blue, fontWeight: FontWeight.bold, fontSize: 48),
    textAlign: TextAlign.center,
    showCursor: true,
  )

Output:

 

You can also customize the look of the cursor which includes setting the cursor width, color and radius as shown below.

  SelectableText(
    'Flutter Tutorial by Woolha.com',
    style: TextStyle(color: Colors.blue, fontWeight: FontWeight.bold, fontSize: 48),
    textAlign: TextAlign.center,
    showCursor: true,
    cursorWidth: 5,
    cursorColor: Colors.red,
    cursorRadius: Radius.circular(5),
  )

Output:

 

Adding onTap Callback

You can add a callback function that will be executed whenever the text is tapped by the user.

  SelectableText(
    'Flutter Tutorial by Woolha.com',
    style: TextStyle(color: Colors.blue, fontWeight: FontWeight.bold, fontSize: 48),
    textAlign: TextAlign.center,
    onTap: () => print('The text is tapped'),
  )

 

Customizing ToolbarOptions

By default, when selection is active, it shows 'Copy' and 'Select all' options. You can use toolbarOptions property to pass an instance of ToolbarOptions. The constructor of ToolbarOptions has all values (copy, cut, paste, and selectAll) set to false by default. You need to set each option to true if you want it to appear on the toolbar. However, cut and paste won't be showed even if you set it to true.

  SelectableText(
    'Flutter Tutorial by Woolha.com',
    style: TextStyle(color: Colors.blue, fontWeight: FontWeight.bold, fontSize: 48),
    textAlign: TextAlign.center,
    toolbarOptions: ToolbarOptions(copy: true, selectAll: false),
  )

Output:

 

Using RichText

If you need the text to have different formats, using RichText is the common approach in Flutter. It's also possible to have a selectable RichText by using SelectableText.rich named constructor. It accepts a TextSpan as the first and the only required parameter instead of a String. The other parameters, which are optional, are exactly the same as the main constructor.

  SelectableText.rich(
    TextSpan(
      children: <TextSpan>[
        TextSpan(text: 'Woolha', style: TextStyle(color: Colors.blue)),
        TextSpan(text: 'dot', style: TextStyle(color: Colors.black)),
        TextSpan(text: 'com', style: TextStyle(color: Colors.red)),
      ],
    ),
    style: TextStyle(
        color: Colors.blue, fontWeight: FontWeight.bold, fontSize: 48),
    textAlign: TextAlign.center,
  )

Output:

 

Below is the list of available properties you can pass as the constructor parameters.

• String data* : The text to be displayed.
• Key key: The widget key, used to control if it's should be replaced.
• FocusNode focusNode: Defines the focus for this widget.=.
• TextStyle style: Style to be applied on text.
• StrutStyle strutStyle: StrutStyle to be used.
• TextAlign textAlign: How the text should be aligned horizontally..
• TextDirection textDirection: The directionality of the text.
• bool showCursor: Whether to show cursor. Defaults to false.
• bool autofocus: Whether it should focus itself if nothing else is already focused. Defaults to false.
• ToolbarOptions toolbarOptions: Configuration of toolbar options.
• int maxLines: Maximum number of lines, wrapping if necessary.
• double cursorWidth: Thickness of the cursor.. Defaults to 2.0.
• Radius cursorRadius: Corner radius of the cursor.
• Color cursorColor: Color of the cursor.
• DragStartBehavior dragStartBehavior: How the drag start behavior is handled. Defaults to DragStartBehavior.start.
• bool enableInteractiveSelection: Whether to select text and show copy/paste/cut menu when long-pressed. Defaults to true.
• GestureTapCallback onTap: Callback that will be called when the user taps the widget.
• ScrollPhysics scrollPhysics: Defines the scroll physics.
• TextWidthBasis textWidthBasis: How to measure the width of the rendered text.

*: Required. For SelectableText.rich, it's replaced with TextSpan textSpan.