[Flutter]Pasteboardを使ってクリップボードから画像を取得する方法

Index

今回紹介するサンプルアプリ

フローティングボタンを押下すると、クリップボードに貼り付けられている画像を表示するアプリです。

webアプリケーションでしか動作を確認していませんので、ご注意ください。

使ったパッケージ

pasteboardというパッケージを使用しました。

他にもクリップボードからデータをとってくるパッケージは存在するのですが、画像データをとってこれるパッケージは少なかった印象があります。

画像取得に使うAPI

imageメソッドを使っていきます。

クリップボードにimageデータ以外のデータが入っているとnullを返すので、処理する必要があります。

  @override
  Future<Uint8List?> get image async {
    try {
      final clipboardItems =
          await promiseToFuture(_readClipboard()) as List<dynamic>;
      for (var clipboardItem in clipboardItems.cast<ClipboardItem>()) {
        if (clipboardItem.types.contains('image/png')) {
          final Blob blob =
              await promiseToFuture(clipboardItem.getType('image/png'));
          return _readBlobAsArrayBuffer(blob);
        }
      }
    } catch (e) {
      return null;
    }
    return null;
  }

@override

Future<Uint8List?> get image async {

try {

final clipboardItems =

await promiseToFuture(_readClipboard()) as List<dynamic>;

for (var clipboardItem in clipboardItems.cast<ClipboardItem>()) {

if (clipboardItem.types.contains('image/png')) {

final Blob blob =

await promiseToFuture(clipboardItem.getType('image/png'));

return _readBlobAsArrayBuffer(blob);

}

} catch (e) {

return null;

}

return null;

}

サンプルコード

以下のコードをmain.dartにコピペし、pub get すれば

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

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});
  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  var _image;

  Future<void> _captureImage() async {
    final imageBytes = await Pasteboard.image;
    if (imageBytes != null) {
      setState(() {
        _image = imageBytes;
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: _image != null
            ? Image.memory(_image)
            : Container(
                color: Colors.blueGrey,
              ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _captureImage,
        tooltip: 'captureImage',
        child: const Icon(Icons.add),
      ),
    );
  }
}

import 'package:flutter/material.dart';

import 'package:pasteboard/pasteboard.dart';

void main() {

runApp(const MyApp());

}

class MyApp extends StatelessWidget {

const MyApp({super.key});

// This widget is the root of your application.

@override

Widget build(BuildContext context) {

return MaterialApp(

title: 'Flutter Demo',

theme: ThemeData(

primarySwatch: Colors.blue,

home: const MyHomePage(title: 'Flutter Demo Home Page'),

);

}

class MyHomePage extends StatefulWidget {

const MyHomePage({super.key, required this.title});

final String title;

@override

State<MyHomePage> createState() => _MyHomePageState();

}

class _MyHomePageState extends State<MyHomePage> {

var _image;

Future<void> _captureImage() async {

final imageBytes = await Pasteboard.image;

if (imageBytes != null) {

setState(() {

_image = imageBytes;

});

}

@override

Widget build(BuildContext context) {

return Scaffold(

appBar: AppBar(

title: Text(widget.title),

body: Center(

child: _image != null

? Image.memory(_image)

: Container(

color: Colors.blueGrey,

floatingActionButton: FloatingActionButton(

onPressed: _captureImage,

tooltip: 'captureImage',

child: const Icon(Icons.add),

);

}

pasteboardの使い方

クリップボードから画像データを受け取るコードは以下の通りです。

画像データ以外がクリップボードに入っていた場合は何もしない実装にしています。

  Future<void> _captureImage() async {
    final imageBytes = await Pasteboard.image;
    if (imageBytes != null) {
      setState(() {
        _image = imageBytes;
      });
    }
  }

Future<void> _captureImage() async {

final imageBytes = await Pasteboard.image;

if (imageBytes != null) {

setState(() {

_image = imageBytes;

});

}

画像の出力方法

Image,memory()にクリップボードから取得できたデータをつっこんであげると画像として表示されます。

      body: Center(
        child: _image != null
            ? Image.memory(_image)
            : Container(
                color: Colors.blueGrey,
              ),
      ),