[flutter] DataTable에서 테이블 전체 선택 및 선택된 행 삭제하는 방법

18 Dec 2023

flutter

Flutter의 DataTable은 테이블을 표시하고 효과적으로 관리할 수 있는 기능을 제공합니다. 특히, 테이블의 특정 행을 선택하고 삭제하는 기능은 많은 사용자에게 유용할 수 있습니다. 이번 글에서는 Flutter 앱에서 DataTable에서 테이블 전체를 선택하는 방법과 선택된 행을 삭제하는 방법에 대해 설명하겠습니다.

DataTable 생성

먼저, DataTable을 생성하고 데이터를 추가해야 합니다. 예를 들어,

DataTable(
  columns: [
    DataColumn(label: Text('ID')),
    DataColumn(label: Text('Name')),
    DataColumn(label: Text('Action')),
  ],
  rows: _buildRows(),
)

위의 코드에서 _buildRows() 함수는 테이블의 각 행을 생성하는 함수입니다. 이 함수를 통해 데이터를 이용하여 DataTable에 행을 추가할 수 있습니다.

테이블 전체 선택 기능 추가

테이블 전체를 선택하는 간단한 방법 중 하나는 체크박스를 사용하는 것입니다. 각 행에 체크박스를 추가하고 이를 통해 테이블 전체를 선택할 수 있습니다. 다음은 각 행에 체크박스를 추가하는 예시 코드입니다.

bool _selectAll = false;

DataTable(
  columns: [
    DataColumn(label: Text('ID')),
    DataColumn(label: Text('Name')),
    DataColumn(label: Text('Action')),
  ],
  rows: _buildRows()
    .map((data) => DataRow(
      cells: [
        DataCell(Text(data['id'].toString())),
        DataCell(Text(data['name'])),
        DataCell( // Add a checkbox
          Checkbox(
            value: _selectAll,
            onChanged: (bool? value) {
              setState(() {
                _selectAll = value!;
              });
            },
          ),
        ),
      ],
    ))
    .toList(),
)

위의 코드에서 _selectAll 변수는 전체 선택 상태를 나타냅니다. 사용자가 모든 행에 체크박스를 선택하거나 해제할 때 이 변수가 업데이트됩니다.

선택된 행 삭제 기능 추가

이제 선택된 행을 삭제하는 기능을 추가할 차례입니다. 예를 들어, “Delete” 버튼을 누르면 선택된 행을 삭제하는 기능을 구현해보겠습니다.

ElevatedButton(
  onPressed: () {
    List dataToRemove = [];
    for (var data in _data) {
      if (data['selected']) {
        dataToRemove.add(data);
      }
    }
    setState(() {
      _data.removeWhere((data) => dataToRemove.contains(data));
    });
  },
  child: Text('Delete'),
)

위의 코드에서 _data는 DataTable에 사용된 데이터를 나타내며, 각 데이터의 selected 속성은 해당 행이 선택되었는지 여부를 나타냅니다. “Delete” 버튼을 누르면 선택된 행이 삭제됩니다.

이제 DataTable에서 테이블 전체 선택 및 선택된 행 삭제하는 방법에 대해 알아보았습니다. 체크박스를 이용하여 선택 기능을 추가하고 선택된 행을 삭제하는 방법을 응용하여 본인의 앱에 적용해 보세요.