Zenn
📋

【Flutter】コピー＆ペーストできるようにする

2024/12/16に公開
Flutter
copy
paste
clipboard
tech

初めに

今回は、Flutter でコピー＆ペーストを実装する方法を簡単にまとめておきたいと思います。自分のための備忘録としてはもちろん、これから実装される方の参考になれば幸いです。

記事の対象者

  • Flutter 学習者
  • Flutter でコピー＆ペーストを実装したい方

目的

今回の目的は、先述の通りコピー＆ペーストの実装を行うことです。
おそらく最も実装することが多いと思われるテキストのコピー＆ペーストに絞って実装してみたいと思います。

実装

テキストのコピー＆ペーストは Clipboard で実装できます。

具体的には以下のようなコードになります。

コピー
以下のように Clipboard.setData でクリップボードにテキストをコピーできます。
引数には ClipboardData が指定でき、その text プロパティにコピーするテキストを指定できます。

Clipboard.setData(ClipboardData(text: 'Hello World !'));

ペースト
以下のように、Clipboard.getData でクリップボードに保持されているデータを取得できます。
テキストを取得する場合は text/plain を指定することで取得できます。

final text = await Clipboard.getData('text/plain');

以下のようなコードを実装してみます。

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_hooks/flutter_hooks.dart';

class ClipboardSample extends HookWidget {
  const ClipboardSample({super.key});

  @override
  Widget build(BuildContext context) {
    final copySourceController = useTextEditingController();
    final pasteTargetController = useTextEditingController();

    return Scaffold(
      appBar: AppBar(
        title: const Text('Clipboard Sample'),
      ),
      body: Center(
        child: Padding(
          padding: const EdgeInsets.all(8),
          child: Column(
            children: [
              Row(
                children: [
                  Expanded(
                    child: TextField(
                      controller: copySourceController,
                      decoration: InputDecoration(
                        border: OutlineInputBorder(
                          borderRadius: BorderRadius.circular(8),
                          borderSide: const BorderSide(color: Colors.grey),
                        ),
                      ),
                    ),
                  ),
                  const SizedBox(width: 16),
                  ElevatedButton(
                    onPressed: () =>
                        _copyToClipboard(text: copySourceController.text),
                    child: const Text('Copy'),
                  ),
                ],
              ),
              const SizedBox(height: 32),
              Row(
                children: [
                  Expanded(
                    child: TextField(
                      controller: pasteTargetController,
                      decoration: InputDecoration(
                        border: OutlineInputBorder(
                          borderRadius: BorderRadius.circular(8),
                          borderSide: const BorderSide(color: Colors.grey),
                        ),
                      ),
                    ),
                  ),
                  const SizedBox(width: 16),
                  ElevatedButton(
                    onPressed: () async => await _pasteFromClipboard(
                      onPaste: (text) => pasteTargetController.text = text,
                    ),
                    child: const Text('Paste'),
                  ),
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }

  void _copyToClipboard({required String text}) {
    Clipboard.setData(ClipboardData(text: text));
  }

  Future<void> _pasteFromClipboard({
    required Function(String) onPaste,
  }) async {
    final data = await Clipboard.getData('text/plain');
    if (data != null) {
      onPaste(data.text ?? '');
    }
  }
}

実行すると以下の動画のように、一つ目のテキストフィールドに含まれているテキストをクリップボードにコピーし、二つ目のテキストフィールドにペーストできることがわかります。
また、一つ目のテキストフィールドのテキストをコピーして、他のアプリでもペーストできることがわかります。

https://youtube.com/shorts/ytLltYigOs0

まとめ

最後まで読んでいただいてありがとうございました。

今回はテキストをコピー＆ペーストする方法を簡単にまとめました。
誤っている点やもっと良い書き方があればご指摘いただければ幸いです。

参考

https://api.flutter.dev/flutter/services/Clipboard-class.html

Discussion