2

Clipboard.setData(ClipboardData(text: textToCopy));

is working fine on flutter web when visiting via desktop browsers, but is nonfunctional on mobile (iOS Chrome & Safari).

Are there any work arounds?

I've tried a few other packages besides the classic flutter services, but they all had the same issue.

Alex Damis
  • 51
  • 2
  • Can confirm for safari, chrome, firefox on ios 14.1 Can confirm for safari on macos 12.6.3 (chrome and firefox work fine) – Harmen Feb 21 '23 at 20:00

2 Answers2

2

I have also encountered the same issue but for reading text from the clipboard. Clipboard.getData(Clipboard.kTextPlain) does not work on Flutter web for iOS or Android browsers

However, I found a workaround that works for me that uses javascript.

I will paste my code here

pubspec.yaml - install the js package

 js: ^0.6.4

index.html - defines a function here

function pasteFromClipboard() {
  return window.navigator.clipboard.readText();
}

clipboard_helper.dart

import 'clipboard_helper_stub.dart'
if (dart.library.io) 'clipboard_helper_for_mobile.dart'
if (dart.library.html) 'clipboard_helper_for_web.dart';

class ClipboardHelper {
  final ClipboardHelperImpl _helper;

  ClipboardHelper() : _helper = ClipboardHelperImpl();

  Future<String?> readTextFromClipboard() async {
    return _helper.readTextFromClipboard();
  }
}

abstract class ClipboardHelperBase {
  Future<String?> readTextFromClipboard();
}

clipboard_helper_stub.dart

import 'clipboard_helper.dart';

class ClipboardHelperImpl extends ClipboardHelperBase {
  @override
  Future<String?> readTextFromClipboard() async {
    throw Exception("Stub implementation");
  }
}

clipboard_helper_for_mobile.dart

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

class ClipboardHelperImpl extends ClipboardHelperBase {
  @override
  Future<String?> readTextFromClipboard() async {
    final clipboardData = await Clipboard.getData(Clipboard.kTextPlain);
    final text = clipboardData?.text;
    return text;
  }
}

clipboard_helper_for_web.dart

import 'package:js/js.dart';
import 'clipboard_helper.dart';
import 'package:js/js_util.dart';

@JS('pasteFromClipboard')
external dynamic pasteFromClipboard();

class ClipboardHelperImpl extends ClipboardHelperBase {
  @override
  Future<String?> readTextFromClipboard() async {
    final String? text = await promiseToFuture(
      pasteFromClipboard(),
    );

    return text;
  }
}

Conclusion - I hope this could help someone and wish that Clipboard.getData() could be fixed in the future but I am using this workaround for now which seems to work

Please note that the window.navigator.clipboard could be undefined as it requires a secure origin (HTTPS or localhost)

reference: navigator.clipboard is undefined

Robert Chan
  • 21
  • 5
0

Not sure if it is a bug, seems like apple is blocking writing to clipboard if there wasn't a recent user action.

Similar issue:

https://github.com/flutter/flutter/issues/106046

The clipboard-write permission is only granted to the currently active tab.
The request to write to the clipboard must be triggered during a user gesture.
(Maybe) Your site needs to be on https.

So it's probably apple browser security related.

For me copying to clipboard after a future delayed of 1 ms it works

After a future delayed of 1 second it does not work.

Harmen
  • 841
  • 8
  • 17