Flutter Clipboard 다루기

Flutter에서 text를 클립보드로 복사하고, 클립보드의 text 값을 가져오는 방법을 알아보자.

Clipboard로 text 복사하기

Flutter를 사용하여 어떤 텍스트를 클립보드로 복사해보자. 이를 위해 Clipboard 클래스의 setData를 사용할 것이다.

• setData
  • 인자
    • ClipboardData data
  • 반환값
    • Future<void>

flutter/services.dart를 import 한 후 원하는 시점에 텍스트를 클립보드로 복사하는 코드를 호출하면 된다.

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

// copy to clipboard
Clipboard.setData(ClipboardData(text: 'text to copy'));

Clipboard에서 text 가져오기

클립보드에서 텍스트를 가져오자. 이를 위해 Clipboard 클래스의 getData를 사용한다. 'getData'는 Future<ClipboardData?>를 반환하는데, 이로 인하여 작업이 완료되었을 떄 값을 받아오는 것이 가능한 경우 ClipboardData를, 그렇지 않은 경우 null을 얻게된다. 인자로 가져올 media type을 주는데, 22년 3월 9일 기준으로 'text/plain'만 가능하며, 이 값은 Clipboard.kTextPlain과 같다.

• getData
  • 인자
    • String format
  • 반환값
    • Future<ClipboardData?>

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

아래 코드에서 클립보드에서 값을 가져오는데에 성공하는 경우 str의 값은 클립보드에서 가져온 값이 되며, 실패한 경우 'got null...'이 된다.

// get text from clipboard
ClipboardData? data = await Clipboard.getData(Clipboard.kTextPlain);
String str = data?.text ?? 'got null...';

간단한 demo

아래는 간단한 예제이다. 두개의 버튼이 있고, 각 버튼은 '클립보드로 복사', '클립보드에서 붙여넣기'를 수행한다. '복사'를 수행하는 버튼은 TextField에 적은 값을 클립보드로 복사하며, '붙여넣기'를 수행하는 버튼은 클립보드에서 가져온 값을 Text로 출력하도록 한다.

아래는 코드의 일부이다.

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  final TextEditingController _control = TextEditingController();
  var _data = 'String Here';

  void copyToClipboard() {
    Clipboard.setData(ClipboardData(text: _control.text));
  }

  void pasteFromClipboard() async {
    ClipboardData? cdata = await Clipboard.getData(Clipboard.kTextPlain);

    setState(() {
      _data = cdata?.text ?? 'got null...';
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Container(
          width: 200,
          height: 200,
          child: Column(children: [
            TextField(
              controller: _control,
            ),
            IconButton(
              icon: const Icon(Icons.copy),
              onPressed: copyToClipboard,
            ),
            Text(_data),
            IconButton(
              icon: Icon(Icons.paste),
              onPressed: pasteFromClipboard,
            )
          ]),
        ),
      ),
    );
  }
}

실행결과 (web)

실행결과 (android)