Long Press Widget to Copy Text with Flutter

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.

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.

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.

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 subscribe to my YouTube channel for more helpful Flutter tutorials like this one.