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

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


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

![clipboardfl.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1247619/034f7039-3d1b-5bb2-51a1-05a58c3040af.gif)



# 環境
Flutter 3.22.2


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

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

```dart: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を使用してテキストボックスを作成しています。


```dart: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`を使用しています。
全体のコードは以下の通りです。

```dart: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(),
        ),
      ),
    );
  }
}
```


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


![clipboardfl.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1247619/50ffe366-4538-db88-0b21-5366e4dd3e16.gif)

# 参考

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

https://api.flutter.dev/flutter/services/Clipboard/setData.html

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