Quick Tip - How to make text selectable in Flutter

What is a text widget in Flutter?

In Flutter, a Text widget is a user interface element that displays a short piece of text. It can be used to display a single line of text, or it can be used to display multiple lines of text that are automatically wrapped to fit within the available space.

The Text widget is one of the most basic and important widgets in Flutter, and it is often used in conjunction with other widgets to build more complex user interfaces. For example, you might use a Text widget inside a Card widget to display the title of a card, or you might use a Text widget inside a ListTile widget to display the primary text of a list item.

To use a Text widget in your Flutter app, you can simply add it to your app’s widget tree like this:

Text(
  'Hello, world!',
  style: TextStyle(fontSize: 32),
)

This will display the text “Hello, world!” in a font size of 32 pixels. You can customize the appearance of the Text widget by using the style property to specify the font size, font weight, font colour, and other styling options.

In addition to the style property, the Text widget also has a number of other useful properties that you can use to customize its behaviour. For example, you can use the maxLines property to limit the number of lines that the text will be wrapped to, or you can use the overflow property to specify how the text should be displayed when it doesn’t fit within the available space.

How to make text selectable in Flutter

To make text selectable in Flutter, you can use the SelectableText widget. This widget displays a piece of selectable text that the user can select and copy using the system’s clipboard and text selection features.

Here’s an example of how you can use the SelectableText widget to display selectable text in your Flutter app:

            SelectableText(
              'flutterassets.com',
              style: TextStyle(fontSize: 40, color: Colors.green,
                fontWeight: FontWeight.w900,
              ),
            ),

This will display the text “https://flutterassets.com” in a font size of 40 pixels, and the user will be able to select and copy the text. You can customize the appearance of the SelectableText widget by using the style property to specify the font size, font weight, font colour, and other styling options.

How to customize SelectableText in Flutter

You can customize the appearance and behaviour of the SelectableText widget in Flutter using a variety of different parameters. Here are a few examples of how you can customize the SelectableText widget:

SelectableText(
  'flutterassets.com',
  showCursor: true,
  cursorColor: Colors.red,
  autofocus: false,
  cursorWidth: 15,
  cursorRadius: Radius.circular(5),
  toolbarOptions: ToolbarOptions(copy: true, selectAll: false,),
  style: TextStyle(fontSize: 40,
    color: Colors.green,
    fontWeight: FontWeight.w900,
  ),
  strutStyle: StrutStyle(fontSize: 60),
  onTap: () => print('Text Tapped'),
),

SelectableText style

You can use the style parameter to specify the font size, font weight, font colour, and other styling options for the text. For example:

SelectableText(
  'This text is selectable',
  style: TextStyle(
    fontSize: 32,
    color: Colors.red,
    fontWeight: FontWeight.bold,
  ),
)

SelectableText textAlign

You can use the textAlign parameter to specify the alignment of the text within the SelectableText widget. For example:

Container(
  padding: EdgeInsets.all(12),
  width: 600,
  child: SelectableText(
    'This text is selectable',
    textAlign: TextAlign.center,
  ),
)

SelectableText textDirection

You can use the textDirection parameter to specify the direction of the text within the SelectableText widget. For example:

Container(
  padding: EdgeInsets.all(12),
  width: 600,
  child: SelectableText(
    'This text is selectable',
    textDirection: TextDirection.rtl,
  ),
)

Use SelectableText rich in Flutter

To use rich text with the SelectableText widget in Flutter, you can use the RichText widget inside the SelectableText widget. The RichText widget allows you to display text with different styles, colours, and other formatting options within a single piece of text.

Here’s an example of how you can use the RichText widget inside a SelectableText widget to display rich text:

            SelectableText.rich(
              TextSpan(
                text: 'flutterassets',
                style: TextStyle(
                  fontSize: 30,
                  color: Colors.green,
                  fontWeight: FontWeight.w900,
                ),

                children: <TextSpan>[

                  TextSpan(text: '.com', style: TextStyle(
                      fontStyle: FontStyle.italic,fontSize: 50, color: Colors.blue)),

                  TextSpan(text: ' :)', style: TextStyle(
                      fontWeight: FontWeight.bold, color: Colors.red)),
                ],
              ),
            ),

Here is another example:

Container(
  padding: EdgeInsets.all(12),
  width: 600,
  child: SelectableText.rich(
    TextSpan(
      children: <TextSpan>[
        TextSpan(text: 'Flutter', style: TextStyle(color: Colors.blue)),
        TextSpan(text: 'Assets', style: TextStyle(color: Colors.black)),
        TextSpan(text: '.', style: TextStyle(color: Colors.green)),
        TextSpan(text: 'com', style: TextStyle(color: Colors.red)),
      ],
    ),
    style: TextStyle(
        color: Colors.blue, fontWeight: FontWeight.bold, fontSize: 38),
    textAlign: TextAlign.center,
  )
)