【Flutter】クリップボードにテキストをコピーしSnackBarで通知する

はじめに

本記事ではFlutterでクリップボードにテキストをコピーし、スナックバーでの通知処理を実装していきます。

ゴール

次のようにクリップボードにテキストをコピーし、スタックバーで通知を出すことを本記事のゴールとします。

環境

Flutter 3.22.2

クリップボードにテキストをコピーしてみる

下記のCopyButtonクラスではボタンを押下すると Clipboard.setData でテキストをクリップボードにコピーします。また、ScaffoldMessenger クラスの showSnackBar メソッドを使用し、コピーできたことをスナックバー通知します。

main.dart

// コピーボタン
class CopyButton extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // ボタン
    return ElevatedButton(
      onPressed: () {
        // クリップボードにテキストをコピー
        Clipboard.setData(const ClipboardData(text: 'ほげほげコピー対象のテキスト'));
        // スナックバーを表示
        ScaffoldMessenger.of(context).showSnackBar(
          const SnackBar(content: Text('テキストがクリップボードにコピーされました')),
        );
      },
      child: const Text('コピーボタン'),
    );
  }
}

テキストボックスを作成

下記のSampleTextBox クラスでは、TextFieldを使用してテキストボックスを作成しています。

main.dart

// テキストボックス
class SampleTextBox extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      padding: const EdgeInsets.all(8.0),
      child: const TextField(
        decoration: InputDecoration(
          border: OutlineInputBorder(),
        ),
      ),
    );
  }
}

全体のソース

body部分では上記のコピーボタンを作成するCopyButtonクラスと、テキストボックスを作成するSampleTextBoxを使用しています。
全体のコードは以下の通りです。

main.dart

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('クリップボード コピー サンプル '),
          centerTitle: true,
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              // コピーボタン
              CopyButton(),
              const SizedBox(height: 20),
              // テキストボックス
              SampleTextBox(),
            ],
          ),
        ),
      ),
    );
  }
}

// コピーボタン
class CopyButton extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // ボタン
    return ElevatedButton(
      onPressed: () {
        // クリップボードにテキストをコピー
        Clipboard.setData(const ClipboardData(text: 'ほげほげコピー対象のテキスト'));
        // スナックバーを表示
        ScaffoldMessenger.of(context).showSnackBar(
          const SnackBar(content: Text('テキストがクリップボードにコピーされました')),
        );
      },
      child: const Text('コピーボタン'),
    );
  }
}

// テキストボックス
class SampleTextBox extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      padding: const EdgeInsets.all(8.0),
      child: const TextField(
        decoration: InputDecoration(
          border: OutlineInputBorder(),
        ),
      ),
    );
  }
}

動作確認

デバッグして確認すると コピー ボタンを押下した際に、対象のテキスト（ほげほげコピー対象のテキスト）をクリップボードにコピーし、ペーストまでできている事が確認できます。

参考