Flutter – Add Copy to Clipboard without Package

In this article, we will see How to implement copy to clipboard in Flutter. We can do it using also package. But In this article, we will do it without any package.

How to use:

Clipboard.setData(new ClipboardData(text: 'Copied text here'));

Clipboard has a method setData which takes the parameter ClipboardData that further takes the text to be copied.

Approach:

Intuition is simply, creating a text field and a button to retrieve the text from the text field and then let set the data or text to the Clipboard. Also, we can show the Snackbar when clicking on the copy button that notifies the user event. A sample video is given below to get an idea about what we are going to do in this article.

Step By Step Implementation

Step 1: Create a New Project in Android Studio

To set up Flutter Development on Android Studio please refer to Android Studio Setup for Flutter Development, and then create a new project in Android Studio please refer to Creating a Simple Application in Flutter.

Step 2: Import the material package

Adding material package that gives us the important functions and calls the runApp method in the main function that will call our application.

import 'package:flutter/material.dart';
void main() {
   runApp(RunMyApp());
}

Step 3: Creating Stateless Widget

Now we have to make a stateless widget because our application does not go to change its state and then return the materialApp widget which allows us the set the title and theme and many more.

class RunMyApp extends StatelessWidget {
   const RunMyApp({super.key});
   
   @override
   Widget build(BuildContext context) {
       return MaterialApp();
   }
}

Step 4: Creating Scaffold Widget

Give the home property and there can be a scaffold widget that has the property of AppBar and body. AppBar allows us to give the title of AppBar, color, leading, and trailing icon. the body takes the class HomePage.

home: Scaffold(
   appBar: AppBar(
       title: Text('Copy to clipboard'),
   ),
   body: HomePage( );
),

Step 5: Create the class HomePage and create a text field and a button to retrieve the text. And in onpressed property set the text to the clipboard.

Final Code 

Dart

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

void main() => runApp(RunMyApp());

class RunMyApp extends StatelessWidget {
  RunMyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(primarySwatch: Colors.green),
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Copy to Clipboard'),
        ),
        body: HomePage(),
      ),
    );
  }
}

class HomePage extends StatelessWidget {
  HomePage({super.key});
  // controller to retrieve the text
  TextEditingController controller = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        children: [
          TextField(
            controller: controller,
          ),
          SizedBox(
            height: 30,
          ),
          ElevatedButton(
            onPressed: () {
              Clipboard.setData(new ClipboardData(text: controller.text))
                  .then((_) {
                controller.clear();
                ScaffoldMessenger.of(context).showSnackBar(
                    SnackBar(content: Text('Copied to your clipboard !')));
              });
            },
            child: const Text('Copy'),
          ),
          SizedBox(
            height: 50,
          ),
        ],
      ),
    );
  }
}

Output: