How to create a functional copy button in flutter

To create a functional copy to clipboard button we are going to make use of the package called "clipboard: ^0.1.3" to handle our button functionality. You can go ahead and add the package to your pubspec.yaml file in your Flutter project.

clipboard: ^0.1.3

Let's create our simple text field and copy button in Flutter.

import 'package:flutter/material.dart';

class HomePage extends StatefulWidget {
  HomePage({Key? key}) : super(key: key);

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  final _textcontroller = TextEditingController();
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.yellow[300],
      appBar: AppBar(
        backgroundColor: Colors.yellow[300],
        centerTitle: true,
        title: Text(
          "Text Copier App".toUpperCase(),
          style: TextStyle(color: Colors.black),
        ),
      ),
      body: Padding(
        padding: const EdgeInsets.all(12.0),
        child: SingleChildScrollView(
          child: Row(mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment:CrossAxisAlignment.center
            children: [
                 TextField(
                        controller: _textcontroller,
                      decoration: InputDecoration(
                        hintText: 'text',
                        border: InputBorder.none,
                        enabledBorder: OutlineInputBorder(
                          borderSide: BorderSide(color: Colors.white),
                          borderRadius: BorderRadius.circular(12),
                        ),
                        focusedBorder: OutlineInputBorder(
                          borderSide: BorderSide(color: Colors.black),
                          borderRadius: BorderRadius.circular(12),
                        ),
                        filled: true,
                        fillColor: Colors.white,
                      ),
                    ),SizedBox(width:30),
                      IconButton(
                          icon: Icon(
                            Icons.copy_outlined,
                            size: 30,
                          ),
                          onPressed: copy,
                        ),

            ],
          ),
        ),
      ),
    );
  }
}

We have a simple Stateful widget app having a text field and a copy button and the text field has a controller to edit the text inside the text field. Then our copy button has an undefined function called "copy" that will handle the copy to clipboard functionality.

With the help of the package from earlier our copy function should look like this.

void copy() async {
    await FlutterClipboard.copy(_textcontroller.text);
    ScaffoldMessenger.of(context).showSnackBar(SnackBar(
      backgroundColor: Colors.green,
      content: Text(
        "📝 text Copied to clipboard",
        style: TextStyle(color: Colors.white, fontSize: 18),
      ),
      behavior: SnackBarBehavior.floating,
      margin: EdgeInsets.symmetric(vertical: 20),
    ));

It is a one-line code but I wanted it to be more functional so I added a snack bar to show when a text is been copied. with this, your full code should look like this.

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


class HomePage extends StatefulWidget {
  HomePage({Key? key}) : super(key: key);

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  final _textcontroller = TextEditingController();
    void copy() async {
    await FlutterClipboard.copy(_textcontroller.text);
    ScaffoldMessenger.of(context).showSnackBar(SnackBar(
      backgroundColor: Colors.green,
      content: Text(
        "📝 text Copied to clipboard",
        style: TextStyle(color: Colors.white, fontSize: 18),
      ),
      behavior: SnackBarBehavior.floating,
      margin: EdgeInsets.symmetric(vertical: 20),
    ));
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.yellow[300],
      appBar: AppBar(
        backgroundColor: Colors.yellow[300],
        centerTitle: true,
        title: Text(
          "Text Copier App".toUpperCase(),
          style: TextStyle(color: Colors.black),
        ),
      ),
      body: Padding(
        padding: const EdgeInsets.all(12.0),
        child: SingleChildScrollView(
          child: Row(mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment:CrossAxisAlignment.center
            children: [
                 TextField(
                        controller: _textcontroller,
                      decoration: InputDecoration(
                        hintText: 'text',
                        border: InputBorder.none,
                        enabledBorder: OutlineInputBorder(
                          borderSide: BorderSide(color: Colors.white),
                          borderRadius: BorderRadius.circular(12),
                        ),
                        focusedBorder: OutlineInputBorder(
                          borderSide: BorderSide(color: Colors.black),
                          borderRadius: BorderRadius.circular(12),
                        ),
                        filled: true,
                        fillColor: Colors.white,
                      ),
                    ),SizedBox(width:30),
                      IconButton(
                          icon: Icon(
                            Icons.copy_outlined,
                            size: 30,
                          ),
                          onPressed: copy,
                        ),

            ],
          ),
        ),
      ),
    );
  }
}