CODEWITHSUNDEEP
dartflutter
Gihan
Gihan

Reputation: 3799

Flutter (Dart): How to Add Copy to Clipboard on Tap in an App?

I'm a beginner to Flutter and I just started following their Name Generator app tutorial and made a simple name generating app. I'm wondering if it's possible to add copy to clipboard feature when a user tap on a name? I tried to implement a solution I found on stack but it didn't work. My full code is here. Any advise is appreciated.

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

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Startup Name Generator',
      home: new RandomWords(),
    );
  }
}

class RandomWords extends StatefulWidget {
  @override
  RandomWordsState createState() => new RandomWordsState();
}

class RandomWordsState extends State<RandomWords> {
  final List<WordPair> _suggestions = <WordPair>[];
  final Set<WordPair> _saved = new Set<WordPair>();
  final TextStyle _biggerFont = const TextStyle(fontSize: 18.0);

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: const Text('Startup Name Generator'),
        actions: <Widget>[
          new IconButton(icon: const Icon(Icons.list), onPressed: _pushSaved),
        ],
      ),
      body: _buildSuggestions(),
    );
  }

  Widget _buildSuggestions() {
    return new ListView.builder(
        padding: const EdgeInsets.all(16.0),
        itemBuilder: (BuildContext _context, int i) {
          if (i.isOdd) {
            return const Divider();
          }
          final int index = i ~/ 2;
          if (index >= _suggestions.length) {
            _suggestions.addAll(generateWordPairs().take(10));
          }
          return _buildRow(_suggestions[index]);
        });
  }

  Widget _buildRow(WordPair pair) {
    final bool alreadySaved = _saved.contains(pair);

    return new ListTile(
      title: new Text(
        pair.asPascalCase,
        style: _biggerFont,
      ),
      trailing: new Icon(
        alreadySaved ? Icons.favorite : Icons.favorite_border,
        color: alreadySaved ? Colors.red : null,
      ),
      onTap: () {
        setState(() {
          if (alreadySaved) {
            _saved.remove(pair);
          } else {
            _saved.add(pair);
          }
        });
      },
    );
  }

  void _pushSaved() {
    Navigator.of(context).push(
      new MaterialPageRoute<void>(
        builder: (BuildContext context) {
          final Iterable<ListTile> tiles = _saved.map(
                (WordPair pair) {
              return new ListTile(
                title: new Text(
                  pair.asPascalCase,
                  style: _biggerFont,
                ),
              );
            },
          );
          final List<Widget> divided = ListTile
              .divideTiles(
            context: context,
            tiles: tiles,
          )
              .toList();
          return new Scaffold(
            appBar: new AppBar(
              title: const Text('Saved Suggestions'),
            ),
            body: new ListView(children: divided),
          );

        },
      ),
    );
  }
}

Upvotes: 277

Views: 150200

Answers (7)

Bob David
Bob David

Reputation: 51

The best approach is not to use any package apart from the flutter services package that has its own clipboard which is more effective

Upvotes: 0

Fakhriddin Abdullaev
Fakhriddin Abdullaev

Reputation: 4930

Set data on a button click event

FlatButton(
      child: Text("Copy to the clipboard"),
      onPressed: () {
          Clipboard.setData(ClipboardData(text: "Your text"))
          },
      )

Then you can read the data again by using the below code:

ClipboardData clipboardData = await Clipboard.getData(Clipboard.kTextPlain);
String copiedtext = clipboardData.text;

Upvotes: 2

MohanKumar
MohanKumar

Reputation: 1115

You can use this below code without adding any plugins & notify the user:

Notifying user by Scaffold.of(context).showSnackBar(snackBar); is deprecated so use below updated code.

import 'package:flutter/services.dart';

Clipboard.setData(const ClipboardData(text: "Your Copy text")).then((_) {
  ScaffoldMessenger.of(context).showSnackBar(
      const SnackBar(content: Text('Copied to your clipboard !')));
});

Upvotes: 51

Houssem
Houssem

Reputation: 7598

import:

import 'package:flutter/services.dart';

And then Simply implement this:

onTap: () async {
  await Clipboard.setData(ClipboardData(text: "your text"));
  // copied successfully
},

Upvotes: 658

Shirsh Shukla
Shirsh Shukla

Reputation: 5993

Now in Flutter 3.3 that global selection is available, flutter provides the ability to select the entire text in web applications with the help of the new wizard called selectable area. As you can see from the image, we are using the select table area visit, and in this wizard, we are able to select any text within the wizard, just like we can do in web applications.

SelectionArea(
        child: Scaffold(
          appBar: AppBar(title: const Text(_title)),
          body: Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: const <Widget>[
                Text('Row 1'),
                Text('Row 2'),
                Text('Row 3'),
              ],
            ),
          ),
        ),
      )

for demo, checkout here.

Upvotes: 2

Ron Shoshani
Ron Shoshani

Reputation: 1213

If you want better solution without any dependency that working async use this:

import 'package:flutter/services.dart';

Clipboard.setData(ClipboardData(text: email)).then((_){
    ScaffoldMessenger.of(context).showSnackBar(SnackBar(content: Text("Email address copied to clipboard")));
});

There was breaking changes that you might find useful in the following link: https://docs.flutter.dev/release/breaking-changes/scaffold-messenger

Upvotes: 108

Doodles
Doodles

Reputation: 333

You can use the Flutter clipboard_manager package: Flutter clipboard manager

To install it, follow the instructions on this page, pretty straightforward: Flutter clipboard manager installation process

To use it, import it in the .dart file you're writing and then you can use this: ClipboardManager.copyToClipBoard("your text to copy")

Where "your text to copy" can be substituted by any string you want to copy to the clipboard.

If you want to create a snackbar after copying the text, since it's async you can do:

ClipboardManager.copyToClipBoard("your text to copy").then((result) {
                        final snackBar = SnackBar(
                          content: Text('Copied to Clipboard'),
                          action: SnackBarAction(
                            label: 'Undo',
                            onPressed: () {},
                          ),
                        );
                        Scaffold.of(context).showSnackBar(snackBar);
                      });

Adendum: If you look at the package source code what it basically does is this:

Clipboard.setData(ClipboardData(text: "your text to copy"));

However, I find that the extra bit of syntactic sugar and the advantage of being async makes it a better solution, nothing you can't do with vanilla Flutter, but I find it a bit better.

Upvotes: 13

Related Questions