Long Press Widget to Copy Text with Flutter

February 25, 2021

A pretty common design pattern you’ll come across in apps is being able to long press on something to copy it. For example in a banking app you’ll be able to long press on your routing number to copy it to your clipboard or in your contacts app you can long press on a phone number. This is a pretty useful feature for users and it’s one of those things that can be sorely missed by a user if not implemented.

Luckily, with Flutter it’s super easy! There’s really only a couple lines of code to make it work.

First, we’ll make a custom widget in this case we’ll call it CopyableListTile and set the title to be fulfilled by a String named copyableText.

dart
import 'package:flutter/material.dart'; class CopyableListTile extends StatelessWidget { final String copyableText; const CopyableListTile({Key key, this.copyableText}) : super(key: key); @override Widget build(BuildContext context) { return ListTile( title: Text(copyableText), onLongPress: () {}, ); } }

The nice thing about a ListTile widget is it has this onLongPress function built in; however, you can take this concept and apply it to any widget if you’d like. Simply wrap your widget in a GestureDetector and add your own onLongPress function. In our case we’re going to use the ListTile though. The next step is to simply import services.dart, call Clipboard.setData() and fill it with our copyableText String.

dart
import 'package:flutter/material.dart'; import 'package:flutter/services.dart'; class CopyableListTile extends StatelessWidget { final String copyableText; const CopyableListTile({Key key, this.copyableText}) : super(key: key); @override Widget build(BuildContext context) { return ListTile( title: Text(copyableText), onLongPress: () { Clipboard.setData( ClipboardData(text: copyableText), ); }, ); } }

That’s it, right?! Well…not quite. We still want to let the user know something has been copied which is where the ever so helpful SnackBar widget comes in. We’ll create a SnackBar and set the content with a Text widget like so.

dart
import 'package:flutter/material.dart'; import 'package:flutter/services.dart'; class CopyableListTile extends StatelessWidget { final String copyableText; const CopyableListTile({Key key, this.copyableText}) : super(key: key); @override Widget build(BuildContext context) { return ListTile( title: Text(copyableText), onLongPress: () { Clipboard.setData( ClipboardData(text: copyableText), ); final snackBar = SnackBar( content: Text('Copied text!'), ); // Find the Scaffold in the widget tree and use // it to show a SnackBar. Scaffold.of(context).showSnackBar(snackBar); }, ); } }

Okay, now that’s actually it! With these concepts you can save your app users some precious time and help them copy text, a number, an image, a URL, etc much more quickly. Thanks for reading along and make sure you subcribe to my YouTube channel for more helpful Flutter tutorials like this one.

Subcribe To My Newsletter 📫

Want to know about my latest posts, tutorials, or YouTube videos? Subcribe to my newsletter to stay in the loop!