How to Copy or Past the Text from the Clipboard in Flutter

In most cases when we use a mobile apps we have to copy the text to the clipboard and paste it into another application. For example, copy the word and paste it on google search to know the meaning. In this article, we are going to learn about the copy or paste the text from the clipboard in the flutter.

To get this functionality we can use a package called Clipboard which is available in the pub.dev

Adding Dependecy:

To work with the clipboard we need to add the package in pubspec.yaml file and install it by running the pub get command

dependencies:
  clipboard: ^0.1.3

Import Package:

We can use it in our Dart code after installing the package.

import 'package:clipboard/clipboard.dart';

Copy Text to clipboard :

In the FlutterClipboard class, we have a static method called copy(..) that takes a string as a parameter for copying text to the clipboard.

FlutterClipboard.copy('Welcome to Flutterant.com').then(( value ) => print('copied'));

Past the Text from clipboard:

In the FlutterClipboard class, we have another static method called paste(..) for retrieving data from the clipboard.

FlutterClipboard.paste().then((value) {
 print("Copied Text: $value"); 
});

controlC() and controlV() are two more methods are available in the FlutterClipboard class

controlC(String text):

It takes a string text and saves it to the Clipboard as well, but it returns a boolean value instead. If the copied text is not empty, it returns true; otherwise, it returns false.

controlV():

The data is retrieved from the clipboard using controlV() method. This method same as paste(), but it returns the dynamic data.

So now we understand how to use methods in the FlutterClipboard class, only we have to do is try out the methods given above and see how they work. Create the new Flutter project and replace the below complete code with boilerplate code and then run the application.

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:clipboard/clipboard.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.orange,
      ),
      home: HomePage(),
    );
  }
}

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

class _HomePageState extends State<HomePage> {
  TextEditingController field = TextEditingController();
  String pasteValue = '';
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text(
          "Clipboard",
        ),
        centerTitle: true,
      ),
      body: Padding(
        padding: const EdgeInsets.all(20.0),
        child: SingleChildScrollView(
          child: Column(
            children: <Widget>[
              const SizedBox(
                height: 100,
              ),
              TextFormField(
                controller: field,
                decoration: const InputDecoration(hintText: 'Enter text'),
              ),
              const SizedBox(
                height: 20,
              ),
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceAround,
                children: <Widget>[
                  GestureDetector(
                    child:
                        const Icon(Icons.copy, color: Colors.orange, size: 32),
                    onTap: () {
                      if (field.text.trim() == "") {
                        print('enter text');
                      } else {
                        _copyText(field.text);
                      }
                    },
                  ),
                  GestureDetector(
                    child: const Icon(Icons.content_paste,
                        color: Colors.orange, size: 32),
                    onTap: () {
                      _pastText();
                    },
                  ),
                ],
              ),
              const SizedBox(
                height: 22,
              ),
              const Divider(),
              Text(
                'Clipboard Text: $pasteValue',
                style: const TextStyle(
                    fontSize: 18,
                    color: Colors.black54,
                    fontStyle: FontStyle.italic),
              )
            ],
          ),
        ),
      ),
    );
  }

  void _copyText(String text) {
    FlutterClipboard.copy(field.text).then((value) {
      _showSnackBar();
    });
  }

  void _pastText() {
    FlutterClipboard.paste().then((value) {
      setState(() {
        field.text = value;
        pasteValue = value;
      });
    });
  }

  void _showSnackBar() {
    const snack =
        SnackBar(content: Text("Text copied"), duration: Duration(seconds: 2));
    ScaffoldMessenger.of(context).showSnackBar(snack);
  }
}

Output:

For more reference click here

Thanks for Reading .. 🙂