How to Make Copyable Text Widget In Flutter ?

· 3 min read
How to Make Copyable Text Widget In Flutter
How to Make Copyable Text Widget In Flutter

Text Widget allows you to display text in your Flutter application along with it also used to show the purpose of a component in a mobile application. so in this article, We will go through How to Make Copyable Text Widget In Flutter?

What is a Text Widget In Flutter?

To display Text Widget user needs to follow the below code snippet.

Text("Hello I am Text Widget");

How to Make Copyable Text Widget In Flutter?

Since Flutter 1.9 has introduced a Widget for the same. There is also a list of properties it in SelectableText to enable option copy, paste, selectAll, cut

The code snippet will look like below:

SelectableText("Lorem ipsum...")

When Text is selected the “Copy” context button will appear and it will give us output like the below:

Copyable Text Flutter Widget
Copyable Text Flutter Widget

Users can also SnackBar Widget to notify the user about the copy. Code Snippet will look like the below:

String _copy = "Copy Me";

  @override
  Widget build(BuildContext context) {
    final key = new GlobalKey<ScaffoldState>();
    return new Scaffold(
      key: key,
      appBar: new AppBar(
        title: new Text("Copy"),
        centerTitle: true,
      ),
      body:
      new Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            new GestureDetector(
              child: new Text(_copy),
              onLongPress: () {
                Clipboard.setData(new ClipboardData(text: _copy));
                key.currentState.showSnackBar(
                    new SnackBar(content: new Text("Copied to Clipboard"),));
              },
            ),
            new TextField(
                decoration: new InputDecoration(hintText: "Paste Here")),
          ]),


    );
  }

We will get output like the below:

Copyable Text Widget
Copyable Text Widget

If you want to have different styling for Text Widget, use

SelectableText.rich(
  TextSpan(
    children: [
      TextSpan(text: "Copy me", style: TextStyle(color: Colors.red)),
      TextSpan(text: " and leave me"),
    ],
  ),
)

We will get output like the below:

Selected Text Widget
Selected Text Widget

Conclusion:

In this article, We have been through How to Make Copyable Text Widget In Flutter?

Keep Learning !!! Keep Fluttering !!!

Still, need a Support for Flutter Development? Do let us know.

FlutterAgency.com is our portal Platform dedicated to Flutter Technology and Flutter Developers. The portal is full of cool resources from Flutter like Flutter Widget GuideFlutter ProjectsCode libs and etc.

FlutterAgency.com is one of the most popular online portal dedicated to Flutter Technology and daily thousands of unique visitors come to this portal to enhance their knowledge on Flutter.

Leave a Reply