Mastering Clipboard Operations in Flutter Web: A Step-by-Step Guide to Copying Widgets as Images

In Flutter, capturing a widget and converting it into an image can be achieved in several ways, but one of the simplest and most efficient methods is using the Flutter Screenshot library. This library provides a convenient way to capture any widget and save it as an image file. Here’s how to use this library:

Add Dependency: First, you need to add the Screenshot library to your Flutter project. Include the following dependency in your pubspec.yaml file:

dependencies:
  flutter:
    sdk: flutter
  screenshot: ^[latest_version]

Using the Screenshot Widget: Next, in your Dart code, use the Screenshot widget. Wrap the widget you want to capture inside the Screenshot widget. To do this, create a ScreenshotController instance.

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

class CaptureWidget extends StatefulWidget {
  @override
  _CaptureWidgetState createState() => _CaptureWidgetState();
}

class _CaptureWidgetState extends State<CaptureWidget> {
  ScreenshotController screenshotController = ScreenshotController();

  @override
  Widget build(BuildContext context) {
    return Screenshot(
      controller: screenshotController,
      child: WidgetToCapture(), // Place the widget you want to capture here
    );
  }

  // Call this function to capture and obtain the image
  void captureImage() async {
    final Uint8List? capturedImage = await screenshotController.capture();
    if (capturedImage != null) {
      // Use the capturedImage
    }
  }
}

Once we have the image, the next step is to convert this image into a Base64 string. This is essential for transferring the image data to the clipboard.

import 'dart:convert';
// Call this function to capture and obtain the image
void captureImage() async {
  final Uint8List? capturedImage = await screenshotController.capture();
  if (capturedImage != null) {
    final base64Image = base64Encode(capturedImage);
  }
}

Flutter Web leverages JavaScript to perform clipboard operations. We’ll use a JavaScript function to copy our Base64 image string to the clipboard.

Modify your HTML file (for instance, web/index.html in your Flutter Web project) and add the following JavaScript function:

<script>
  function copyBase64ImageToClipboard(base64Image) {
  // Check for and remove any prefix from the Base64 string
  const base64Data = base64Image.split(',')[1] || base64Image;

  // Convert the Base64 string to a Blob
  const blob = new Blob([Uint8Array.from(atob(base64Data), c => c.charCodeAt(0))], { type: 'image/png' });

  // Use the Clipboard API to copy the image
  navigator.clipboard.write([
    new ClipboardItem({ 'image/png': blob })
  ]).then(function() {
    console.log('Image copied to clipboard!');
  })
  .catch(function(error) {
    console.error('Copy to clipboard failed: ', error);
  });
}
</script>

Invoke the JavaScript function in Flutter:

import 'dart:convert';
import "dart:js" as js;

// Call this function to capture and obtain the image
void captureImage() async {
  final Uint8List? capturedImage = await screenshotController.capture();
  if (capturedImage != null) {
    final base64Image = base64Encode(capturedImage);
    js.context.callMethod('copyBase64ImageToClipboard', [base64Image]);
  }
}

Live demo:

qr_generator

I hope you enjoy reading this article and hitting clap 👏 .