[flutter] 플러터 Table 위젯에서 테이블 데이터 복사하기

15 Dec 2023

flutter

플러터에서 Table 위젯을 사용하여 테이블 데이터를 화면에 표시하는 방법에 관해 알아보겠습니다. Table 위젯을 사용하면 효과적으로 데이터를 표 형식으로 표시할 수 있습니다. 여기서는 Table 위젯에서 표시된 데이터를 클립 보드에 복사하여 다른 곳에 붙여 넣을 수 있는 방법에 대해 알아보겠습니다.

Table 위젯을 사용하여 데이터 표시하기

먼저, 플러터 앱에서 Table 위젯을 사용하여 데이터를 표시합니다.

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Table Widget Example'),
        ),
        body: Center(
          child: Table(
            children: [
              TableRow(
                children: [
                  Text('Name'),
                  Text('Age'),
                ],
              ),
              TableRow(
                children: [
                  Text('John'),
                  Text('25'),
                ],
              ),
              TableRow(
                children: [
                  Text('Alice'),
                  Text('30'),
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }
}

위 코드는 플러터 앱에서 Table 위젯을 사용하여 간단한 데이터를 표시하는 예시입니다. 위 코드를 실행하면 이름과 나이가 표 형식으로 표시됩니다.

Table 데이터 복사 기능 추가하기

표의 데이터를 클립보드에 복사할 수 있는 기능을 추가하기 위해서는 clipboard 패키지를 사용할 수 있습니다. 먼저 pubspec.yaml 파일에 clipboard 패키지를 추가해야 합니다.

dependencies:
  flutter:
    sdk: flutter
  clipboard: ^1.3.0

다음으로, 아래 코드와 같이 Table 위젯 아래에 “Copy” 버튼을 추가하고, 해당 버튼을 누를 때 표의 데이터를 클립보드에 복사하도록 구현할 수 있습니다.

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

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  void _copyToClipboard() {
    final data = 'Name\tAge\nJohn\t25\nAlice\t30';
    Clipboard.setData(ClipboardData(text: data));
    _showToast('Copied to clipboard');
  }

  void _showToast(String message) {
    // Implement code to show toast message
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Table Widget Example'),
        ),
        body: Column(
          children: <Widget>[
            Table(
              children: [
                TableRow(
                  children: [
                    Text('Name'),
                    Text('Age'),
                  ],
                ),
                TableRow(
                  children: [
                    Text('John'),
                    Text('25'),
                  ],
                ),
                TableRow(
                  children: [
                    Text('Alice'),
                    Text('30'),
                  ],
                ),
              ],
            ),
            RaisedButton(
              onPressed: _copyToClipboard,
              child: Text('Copy'),
            ),
          ],
        ),
      ),
    );
  }
}

위 코드에서 _copyToClipboard 함수는 표의 데이터를 클립보드에 복사하는 역할을 합니다. 클립보드에 복사한 후에는 _showToast 함수를 통해 “Copied to clipboard”와 같은 안내 메시지를 표시할 수 있습니다.

이제 플러터 앱을 실행하고 “Copy” 버튼을 누르면 표의 데이터가 클립보드로 복사됩니다.

플러터에서 Table 위젯을 사용하여 데이터를 보여주고, 해당 데이터를 클립보드에 복사하는 방법에 대해 알아보았습니다. 표의 디자인이나 복사 버튼의 위치 등을 필요에 맞게 조정하여 원하는 기능을 구현할 수 있습니다.

참고 자료

위에서 소개된 내용은 플러터 Table 위젯 및 클립보드 복사 기능에 대한 기본적인 예시입니다. 필요에 따라서 더 다양한 기능들을 추가하거나 디자인을 변경할 수 있습니다.