Flutter: Copy To Clipboard example (without any plugins)

Last updated on February 15, 2021 A Goodman Loading... 4 comments

There may be situations where you want to implement Copy To Clipboard feature which allows users to copy some text (URLs, phone numbers, profile IDs…) from your app to another app (web browsers, chat apps…). The example below will show you how to do that without using any third-party plugins, thanks to the Clipboard class that comes with Flutter.

The clipboard is short-term storage used to store and transfer data within and between application programs.

Example

Preview

This minimal app contains a TextField that has a copy icon (actually, it’s an icon button). When this icon is pressed, the text in the TextField will be copied to the clipboard and can be pasted somewhere such as an address bar of a web browser.

In addition, a SnackBar will show up to notify the user that they have copied it.

The Code

The full code:

// main.dart
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Kindacode.com',
      home: HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  TextEditingController _textController = TextEditingController();

  // This key will be used to show the snack bar
  final GlobalKey<ScaffoldState> _scaffoldKey = GlobalKey();

  // This function is triggered when the copy icon is pressed
  Future<void> _copyToClipboard() async {
    await Clipboard.setData(ClipboardData(text: _textController.text));
    _scaffoldKey.currentState.showSnackBar(SnackBar(
      content: Text('Copied to clipboard'),
    ));
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        key: _scaffoldKey,
        appBar: AppBar(
          title: Text('Kindacode.com'),
          backgroundColor: Colors.deepOrange,
        ),
        body: Center(
            child: Padding(
          padding: const EdgeInsets.all(30),
          child: TextField(
            controller: _textController,
            decoration: InputDecoration(
              icon: IconButton(
                icon: Icon(Icons.copy),
                onPressed: _copyToClipboard,
              ),
            ),
          ),
        )));
  }
}

Conclusion

We’ve examined a complete example of how to implementing Copy To Clipboard in Flutter. If you’d like to learn more about interesting things in Flutter, take a look at the following articles: Displaying Math symbols in FlutterWrite a simple BMI Calculator with Flutter Flutter: Scrolling to a desired Item in a ListViewFlutter SliverList – Tutorial and Example, 3 Ways to create Random Colors in Flutter.

You can also check out our Flutter topic page or Dart topic page for the latest tutorials and examples.

Subscribe
Notify of
guest
4 Comments
Inline Feedbacks
View all comments
Juan
Juan
7 months ago

Great post, thanks 😀

Sami
Sami
7 months ago

What about pasting?

Related Articles