SelectableText Widget in Flutter | Copyable Text in Flutter

SelectableText Widget in Flutter

SelectableText Widget in Flutter lets the user Select/Copy the text on the UI. The normal Text Widget in Flutter will not allow a copy/select feature(By double-tapping on the text, we can either select/copy the text). To solve this problem, the Flutter 1.9 release came out with the SelectableText Widget.

In this article, we will take a look at how to create this SelectableText in Flutter and how useful and easy it is.

SelectableText Basics

In order to use the SelectableText, choose the SelectableText class. This provides a lot of attributes that can be used to alter the properties of the SelectableText.

SelectableText('Hello')

Additionally, there is also another important constructor, selectableText.rich() which provides the ability to create RichText with Selectable property in Flutter.

SelectableText Widget – Properties

  • autofocus  – Whether this text field should focus itself on if nothing else is already focused.
  • data – Important attribute where the data to be shown as part of the SelectableText has to be shown.
  • maxLines – The maximum number of lines for the text to span, wrapping if necessary.
  • onTap – Important callback function that gets fired whenever someone taps on the Text of the SelectableText. By default, the tapping opens the select all/copy option. If you want to perform other activities, make sure to override it here.
  • style – If you wish to change the TextStyle of the SelectableText, use this attribute with a TextStyle class and change the property.
  • textAlign – This attribute takes the TextAlign class and can control how the text is aligned. Change this if you want to make it Left/Center/Right aligned.
  • textSpan – TextSpan is used as part of the SelectableText.rich() widget. This lets you choose the TextSpan which can hold multiple texts on the SelectableText widget.

 

In the next section, we will look at the Example application created using the SelectableText widget and the SelectableText.rich widget.

SelectableText Widget – Example Application

Below are the two different uses of the SelectableText class and the resulting output.

SelectableText RichText

import 'package:flutter/material.dart';

void main() => runApp(

    SelectableTextApp()
);

class SelectableTextApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Selectable Text App',
      home: Scaffold(
        appBar: AppBar(title: Text("Sample SelectableText App"),),
        body: SelectableText.rich(
          TextSpan(
            text: 'Hello',
                style: TextStyle(fontSize: 40.0),
                children: <TextSpan>[
                  TextSpan(text: ' Coder', style: TextStyle(color: Colors.red)),
                  TextSpan(text: ' Monk', style: TextStyle(color: Colors.red)),

                ]
          )
        ),
      ),
    );
  }

}
Selectable Text Basic
SelectableText RichText

SelectableText Basic

import 'package:flutter/material.dart';

void main() => runApp(

    SelectableTextApp()
);

class SelectableTextApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Selectable Text App',
      home: Scaffold(
        appBar: AppBar(title: Text("Sample SelectableText App"),),
        body: SelectableText("Sample Text", style: TextStyle(fontSize: 40.0),),
      ),
    );
  }

}
SelectableText Basic
SelectableText Basic

Conclusion

Flutter 1.9 release came out with a lot of other functionality improvements, which keeps the SDK updated. Make sure to replace your normal Text with the SelectableText because you never know what the user might require from your application!

“Happy Coding”

Leave a Comment

Your email address will not be published. Required fields are marked *