How to select the Text in Flutter?

Introduction

In this blog, we shall discuss how we can implement the select text functionality in flutter. There are many times that we need to select the text of the app and use it for other purposes. We will see how we can use the SelectableText widget to implement this functionality.

SelectableText widget:

This widget is pretty much similar to the Text widget, it has the same fields as Text Widget. SelectableText widget needs a simple text, with a style.

Properties:

1. text: it takes to text that needs to be displayed to the user and is selectable.
2. onTap: it handles all the on-tap callbacks.
3. autofocus: default value is false, it is used to enable or disable the focus of the cursor.
4. maxLine: it defines the total number of lines of the text.
5. toolbarOptions: it is used to create a toolbar configuration with given options, all options are set to false by default.
6. enableIntractiveSelection: used to enable or disable the cut/copy/paste menu and select text on long press.

Link: SlectableText

Lets code:

Creating a widget:

We have created a separate widget for selectable text so that we can use it in our entire app, through this widget we do not need to initialize all the properties every time we need the SelectableText widget. In this class, we can also add other properties that need to be changed e.g, fontSize, fontStyle, toobarOptions, etc.

class SelectTextWidget extends StatelessWidget {
  final String text;
  const SelectTextWidget({
    this.text,
  });
  @override
  Widget build(BuildContext context) {
    return Center(
      child: SelectableText(
        text,
        style: TextStyle(
          color: Colors.blue,
          fontWeight: FontWeight.bold,
          fontStyle: FontStyle.italic,
          fontSize: 45,
        ),
        textAlign: TextAlign.center,
        onTap: () => print('Tapped'),
        toolbarOptions: ToolbarOptions(
          copy: true,
          selectAll: true,
        ),
        showCursor: true,
        cursorWidth: 2,
        cursorColor: Colors.red,
        cursorRadius: Radius.circular(5),
      ),
    );
  }
}

Implementation:

SelectableText("This is text")

SelectableRichText:

This widget is pretty much similar to the SelectableText, the only difference is that it takes TextSpan instead of String rest of the properties are the same.

Creating a widget:

class SelectRichTextWidget extends StatelessWidget {
  final TextSpan textSpan;
  const SelectRichTextWidget({
    this.textSpan,
  });
  @override
  Widget build(BuildContext context) {
    return Center(
      child: SelectableText.rich(
        textSpan,
        style: TextStyle(fontWeight: FontWeight.bold, fontSize: 48),
        textAlign: TextAlign.center,
        onTap: () => print('Tapped'),
        toolbarOptions: ToolbarOptions(copy: true, selectAll: false),
        showCursor: true,
        cursorWidth: 2,
        cursorColor: Colors.black,
        cursorRadius: Radius.circular(5),
      ),
    );
  }
}

Implementation:

SelectRichTextWidget(
  textSpan: TextSpan(
    children: <TextSpan>[
      TextSpan(
        text: ' this ',
        style: TextStyle(
          fontStyle: FontStyle.italic,
        ),
      ),
      TextSpan(
        text: 'is',
        style: TextStyle(
          fontWeight: FontWeight.bold,
          color: Colors.green,
        ),
      ),
      TextSpan(
        text: 'text',
        style: TextStyle(
          fontWeight: FontWeight.bold,
        ),
      ),
    ],
  ),
)

Demo:

Thanks for reading this article ❤

If I got something wrong? Let me know in the comments. I would love to improve.

Clap 👏 If this article helps you.

If we got something wrong? Let me know in the comments. we would love to improve.

Become a Flutter Developer and Unleash Your Creativity!

Ready to take your mobile app development skills to the next level? Our comprehensive Flutter course is perfect for beginners, guiding you through the process of building stunning native applications for iOS, Android, and the web.

With Flutter’s streamlined approach and the Dart programming language, you’ll learn how to create visually appealing apps with just one codebase. No need to master multiple languages — Flutter simplifies the process, making it easier and faster to bring your app ideas to life.

From setting up your development environment to mastering key concepts like widgets, navigation, forms, and state management, you’ll gain practical knowledge every step of the way. Plus, you’ll even explore exciting AI-powered chatbot development using OpenAI APIs.

Enroll today and discover the world of Flutter development. Unleash your creativity and build beautiful, high-performance native mobile applications with ease.

https://www.udemy.com/course/flutter-bootcamp-build-native-mobile-apps-with-dart-2023/