Flutter - Set and Get System Clipboard Data

How to set data to system clipboard or get data from system clipboard programmatically in Flutter? Find out in this tutorial.

If you have a widget that allows the user to input text, such as TextField, usually the platform already provides the ability to copy the text on the field and paste text from clipboard to the field. What if you want to set or get data from the system clipboard programmatically. Flutter provides a utility named Clipboard that allows us to interact with the system clipboard. It allows us to add new data to the clipboard and retrieve the latest value from the system clipboard. Currently, it only supports plain text data.

In order to use the Clipboard utility, you need to import package:flutter/services.dart first. Below are the examples of how to use the utility.

Set Data To System Clipboard

To add a new value to the system clipboard, you can use the following static method.

  static Future<void> setData(ClipboardData data)

You need to pass a variable of type ClipboardData. To create a new ClipboardData instance, you only need to call the constructor and pass a named parameter text which is the value to be added to the system clipboard. Below is the usage example

  void _setClipboard() async {
    ClipboardData data = ClipboardData(text: 'My Text');
    await Clipboard.setData(data);
  }

If you add a value not existing in the system clipboard, you'll see a new value added to the clipboard. If the value already exists, it will become the most recent value.

Get Data From System Clipboard

To get the most recent value from the system clipboard, use the below static method.

  static Future<ClipboardData> getData(String format)

You have to pass text/plain (use Clipboard.kTextPlain constant) as the argument because it's the only supported format at the moment this post is written. It returns a Future of ClipboardData. The value is stored on the text property of ClipboardData. Here's the usage example

  void _getClipboard() async {
    ClipboardData data = await Clipboard.getData(Clipboard.kTextPlain);
    setState(() {
      _textValue = data.text;
    });
  }

Full Code

If you want to try how to set and get data from the system clipboard, you can use the full code below.

  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(
        title: 'Woolha.com Flutter Tutorial',
        home: _ClipboardExample(),
      );
    }
  }
  
  class _ClipboardExample extends StatefulWidget {
    @override
    _ClipboardExampleState createState() => _ClipboardExampleState();
  }
  
  class _ClipboardExampleState extends State<_ClipboardExample> {
  
    String _textValue = '';
  
    void _setClipboard() async {
      ClipboardData data = ClipboardData(text: 'My Text');
      await Clipboard.setData(data);
    }
  
    void _getClipboard() async {
      ClipboardData data = await Clipboard.getData(Clipboard.kTextPlain);
      setState(() {
        _textValue = data.text;
      });
    }
  
    Widget build(BuildContext context) {
      return Scaffold(
        appBar: AppBar(
          title: Text('Woolha.com Flutter Tutorial'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              RaisedButton(
                child: Text('Set Data'),
                onPressed: () {
                  _setClipboard();
                },
              ),
              RaisedButton(
                child: Text('Get Data'),
                onPressed: () {
                  _getClipboard();
                },
              ),
              Text('Clipboard Value : $_textValue'),
            ],
          ),
        ),
      );
    }
  }