[flutter] DataTable에서 행 이동 및 복사하는 방법

18 Dec 2023

flutter

Flutter의 DataTable은 효과적으로 데이터를 표 형식으로 표시하는 데 사용됩니다. 테이블에서 행을 이동하거나 복사하는 기능은 때로 유용할 수 있습니다. 이 글에서는 Flutter 앱에서 DataTable에서 행을 이동하고 복사하는 방법에 대해 배워보겠습니다.

DataTable 소개

DataTable은 Flutter의 테이블 위젯 중 하나로, 행과 열로 구성된 데이터를 표 형식으로 나타냅니다. 데이터의 정렬, 선택, 필터링 등 다양한 작업을 수행할 수 있는 강력한 기능을 제공합니다.

DataTable에서 행 이동하기

DataTable에서 특정 행을 다른 위치로 이동하는 방법을 살펴보겠습니다. 아래 예제는 DataTable에서 드래그 앤 드롭을 사용하여 행을 이동하는 방법을 보여줍니다.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: MyDataTable(),
      ),
    );
  }
}

class MyDataTable extends StatefulWidget {
  @override
  _MyDataTableState createState() => _MyDataTableState();
}

class _MyDataTableState extends State<MyDataTable> {
  List<DataRow> _rows = [
    DataRow(cells: [
      DataCell(Text('A1')),
      DataCell(Text('B1')),
    ]),
    DataRow(cells: [
      DataCell(Text('A2')),
      DataCell(Text('B2')),
    ]),
    DataRow(cells: [
      DataCell(Text('A3')),
      DataCell(Text('B3')),
    ]),
  ];

  @override
  Widget build(BuildContext context) {
    return DataTable(
      columns: [
        DataColumn(label: Text('Column A')),
        DataColumn(label: Text('Column B'))
      ],
      rows: _rows,
    );
  }
}

DataTable에서 행 복사하기

DataTable에서 한 행을 복사하여 나머지 행에 삽입하는 방법을 살펴보겠습니다. 아래 예제는 복제된 행을 삽입하는 방법을 보여줍니다.

class _MyDataTableState extends State<MyDataTable> {
  List<DataRow> _rows = [
    DataRow(cells: [
      DataCell(Text('A1')),
      DataCell(Text('B1')),
    ]),
    DataRow(cells: [
      DataCell(Text('A2')),
      DataCell(Text('B2')),
    ]),
    DataRow(cells: [
      DataCell(Text('A3')),
      DataCell(Text('B3')),
    ]),
  ];

  void _duplicateRow(int index) {
    setState(() {
      _rows.insert(index, _rows[index]); // 복제된 행 삽입
    });
  }

  @override
  Widget build(BuildContext context) {
    return DataTable(
      columns: [
        DataColumn(label: Text('Column A')),
        DataColumn(label: Text('Column B'))
      ],
      rows: _rows,
      // 각 행의 복제 버튼 추가
      rowDecoration: BoxDecoration(color: MaterialStateProperty.all(Colors.grey[200])),
      dataRowHeight: 40,
      dataRowColor: MaterialStateProperty.resolveWith((Set<MaterialState> states) {
        return states.contains(MaterialState.selected) ? Colors.blue[200] : null;
      }),
      dataTextStyle: TextStyle(fontSize: 14),
      dataRowHeight: 50,
      columnSpacing: 100,
      showCheckboxColumn: false,
      columns: <DataColumn>[
        DataColumn(label: Text('Column A')),
        DataColumn(label: Text('Column B')),
        DataColumn(label: Text('Action')),
      ],
      rows: _rows
          .asMap()
          .entries
          .map(
            (row) => DataRow(cells: [
              DataCell(Text('A${row.key + 1}')),
              DataCell(Text('B${row.key + 1}')),
              DataCell(ElevatedButton(
                onPressed: () => _duplicateRow(row.key),
                child: Text('복제'),
              )),
            ]),
          )
          .toList(),
    );
  }
}

위의 예제에서, _duplicateRow 함수는 선택한 위치에 행을 복제하여 삽입합니다.

이제 위의 코드를 사용하여 DataTable에서 행을 이동하고 복사할 수 있게 되었습니다. 이러한 기능은 데이터를 효율적으로 관리하고 사용자 경험을 개선하는 데 도움이 될 수 있습니다.

더 많은 정보와 도움이 필요하다면, Flutter 공식 문서를 확인해보십시오.

Happy coding! 🚀