Selectable Text widget to copy text in Flutter

In this article, we will discuss the Selectable Text that is used in the flutter application. For these, we will use the SelectableText widget that helps us to select and copy the specific text with the help of Cursor. At first, we should know what is Selectable in a flutter.

SelectableText Widget in Flutter allows the user to Select/Copy the content on the UI. The typical Text Widget in Flutter won’t permit a copy/select element by double-tapping on the content, we can either select/copy the content. This 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.

At times Some of the applications need the Text content selectable to utilize functionalities like a copy. for this to show text in Flutter, the normal route is by utilizing a Text widget. Sometimes, it doesn’t permit the user to choose the text. If we need the user to have the option to select the text, you can utilize Flutter’s SelectableText widget.

Also Read: RGB And Hex Color Codes In Flutter

Selectable Text Widget has different types of properties to customize text UI. toolbar option property is used to display the toolbar with options. By default all options are false. textSpan property is used to customize different parts of the selectable text. autofocus property is used to focus selectable text automatically. maxLines property is used to set a maximum number of lines for text to span.

SelectableText.rich() method has various formats like we utilize  RichText as the normal methodology in Flutter. It’s likewise conceivable to have a selectable RichText by utilizing SelectableText.rich named constructor. It acknowledges an TextSpan as the first and the solitary required boundary rather than a String.

Some of the basic properties that are used in the selectable text are given below

datathe basic property where the data to appear as a feature of the SelectableText must appear. The text to be shown.
onTapIt is utilized for the callback function that gets terminated at whatever point somebody taps on the Text of the SelectableText. the tapping opens the select all/copy choice
maxLinesIt is used for the maximum number of lines for the text to span.
toolbarOptionsIt is used to create a toolbar configuration with given options. All options default to false if they are not explicitly set
autofocusIt is used whether it should focus on itself if nothing else is already focused on. Defaults to false
textSpanIt utilized the component of the SelectableText.rich() widget. This allows us to pick the TextSpan which can hold various texts on the  SelectableText Widget

Let’s take a basic example of the selectable text widget and selectable text in Rich Text to show how we can utilize the widget to copy/select the text, in our flutter applications.


import 'package:flutter/material.dart';

class SelectableTextScreen extends StatefulWidget {
  const SelectableTextScreen({Key? key}) : super(key: key);

  @override
  State<SelectableTextScreen> createState() => _SelectableTextScreenState();
}

class _SelectableTextScreenState extends State<SelectableTextScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Selectable Text in Flutter'),
        centerTitle: true,
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            SelectableText(
              "Flutter Tutorial By Sagar Koju",
              style: const TextStyle(
                  color: Colors.blue,
                  fontWeight: FontWeight.bold,
                  fontSize: 45),
              textAlign: TextAlign.center,
              onTap: () => debugPrint('Tapped'),
              toolbarOptions: const ToolbarOptions(
                copy: true,
                selectAll: true,
              ),
              showCursor: true,
              cursorWidth: 2,
              cursorColor: Colors.red,
              cursorRadius: const Radius.circular(5),
            ),
            SelectableText.rich(
              const TextSpan(
                children: [
                  TextSpan(
                      text: 'Flutter Tutorial',
                      style: TextStyle(color: Colors.red, fontSize: 40)),
                  TextSpan(
                      text: ' by',
                      style: TextStyle(color: Colors.amber, fontSize: 40)),
                  TextSpan(
                      text: ' Sagar Koju',
                      style: TextStyle(color: Colors.green, fontSize: 40)),
                ],
              ),
              textAlign: TextAlign.center,
              onTap: () => debugPrint('Tapped'),
              toolbarOptions: const ToolbarOptions(
                copy: true,
                selectAll: true,
              ),
              showCursor: true,
              cursorWidth: 2,
              cursorColor: Colors.red,
              cursorRadius: const Radius.circular(5),
            ),
          ],
        ),
      ),
    );
  }
}

Meanwhile, when we run this application in the emulator or device, we should get the UI similar to the screenshot below:

Basic SelectableText
Selectable Text with Rich Text

❤ ❤ Thanks for reading this article ❤❤ on Selectable Text in Flutter.

Clap 👏 If this article helps you.