[flutter] DataTable에서 특정 셀에 드래그 앤 드랍 기능 추가하는 방법

18 Dec 2023

flutter

Flutter에서 DataTable은 효과적으로 데이터를 표 형식으로 표시하는 데 사용됩니다. 그런데 때때로, 특정 셀에 드래그 앤 드랍 기능을 추가하고 싶을 수 있습니다. 이 기능을 추가하는 방법을 알아보겠습니다.

1. DataTable 생성

우선, DataTable을 생성합니다. 아래는 간단한 예제 코드입니다.

DataTable(
  columns: [
    DataColumn(label: Text('이름')),
    DataColumn(label: Text('나이')),
    DataColumn(label: Text('이메일')),
  ],
  rows: [
    DataRow(cells: [
      DataCell(Text('제이슨')),
      DataCell(Text('30')),
      DataCell(Text('jason@example.com')),
    ]),
    DataRow(cells: [
      DataCell(Text('앨리스')),
      DataCell(Text('25')),
      DataCell(Text('alice@example.com')),
    ]),
  ],
)

2. 드래그 앤 드랍 기능 추가

특정 셀에 드래그 앤 드랍 기능을 추가하려면, Draggable 위젯과 DragTarget 위젯을 사용해야 합니다.

class DraggableDataCell extends StatelessWidget {
  final String data;

  DraggableDataCell(this.data);

  @override
  Widget build(BuildContext context) {
    return Draggable(
      data: data,
      child: DataCell(Text(data)),
      feedback: DataCell(Text(data)),
    );
  }
}

class DragTargetDataCell extends StatelessWidget {
  final Function(String) onDragCompleted;

  DragTargetDataCell({required this.onDragCompleted});

  @override
  Widget build(BuildContext context) {
    return DragTarget<String>(
      onAccept: (data) {
        onDragCompleted(data);
      },
      builder: (BuildContext context, List<String?> candidateData, List<dynamic> rejectedData) {
        return DataCell(Text("Drop here"));
      },
    );
  }
}

DraggableDataCell 위젯은 드래그 가능한 셀을 나타내고, DragTargetDataCell 위젯은 드롭 대상 셀을 나타냅니다.

3. DataTable 업데이트

마지막으로, DataTable을 업데이트하여 새로운 드래그 앤 드랍 기능을 포함하도록 수정해야 합니다.

DataTable(
  columns: [
    DataColumn(label: Text('이름')),
    DataColumn(label: Text('나이')),
    DataColumn(label: Text('이메일')),
  ],
  rows: [
    DataRow(cells: [
      DraggableDataCell('제이슨'),
      DataCell(Text('30')),
      DataCell(Text('jason@example.com')),
    ]),
    DataRow(cells: [
      DataCell(Text('앨리스')),
      DataCell(Text('25')),
      DragTargetDataCell(
        onDragCompleted: (data) {
          // 드롭 완료 시 처리 로직
        },
      ),
    ]),
  ],
)

이제 DataTable에서 특정 셀에 드래그 앤 드랍 기능을 추가했습니다. 위의 코드를 참고하여 자신만의 DataTable에 이 기능을 구현해 보세요!

더 많은 고급 기능을 원한다면, Flutter 공식 문서를 참고하시기 바랍니다.