[flutter] DataTable에서 데이터 편집 기능 추가하는 방법

18 Dec 2023

flutter

flutter의 DataTable 위젯은 데이터를 표 형식으로 표시하는 데 사용됩니다. 기본적으로 DataTable에는 데이터 표시 기능만 포함되어 있지만, 데이터를 편집할 수 있는 기능을 추가하려면 몇 가지 추가적인 단계가 필요합니다.

1. 데이터 소스 정의

DataTable에서 표시되는 데이터는 데이터 소스로부터 제공됩니다. 데이터를 편집하기 위해서는 데이터 소스를 정의해야 합니다. 예를 들어, List 형태의 데이터를 사용한다면 해당 List를 데이터 소스로 정의할 수 있습니다.

List<Map<String, dynamic>> _dataList = [
  {'id': 1, 'name': 'Apple', 'price': 1.35},
  {'id': 2, 'name': 'Banana', 'price': 0.85},
  {'id': 3, 'name': 'Orange', 'price': 2.00},
  // 추가적인 데이터
];

2. 데이터 소스 연결

DataTable의 데이터 소스로 앞서 정의한 데이터 소스를 연결합니다. DataTable 위젯의 columns 속성을 정의하여 각 열의 구성을 지정하고, rows 속성을 통해 데이터 소스를 연결합니다.

DataTable(
  columns: [
    DataColumn(label: Text('ID')),
    DataColumn(label: Text('Name')),
    DataColumn(label: Text('Price')),
  ],
  rows: _dataList.map((data) =>
    DataRow(
      cells: [
        DataCell(Text(data['id'].toString())),
        DataCell(Text(data['name'])),
        DataCell(Text(data['price'].toString())),
      ],
    ),
  ).toList(),
)

3. 데이터 편집 가능하게 만들기

위의 코드에서 DataTable의 rows 속성을 연결하는 부분에, DataCell을 제외한 나머지 부분에 TextField나 TextFormField를 사용하여 데이터를 편집할 수 있는 입력 필드로 변경하면 됩니다.

DataTable(
  columns: [
    DataColumn(label: Text('ID')),
    DataColumn(label: Text('Name')),
    DataColumn(label: Text('Price')),
  ],
  rows: _dataList.map((data) =>
    DataRow(
      cells: [
        DataCell(Text(data['id'].toString())),
        DataCell(TextField(
          controller: TextEditingController(text: data['name']),
          onChanged: (value) { 
            _dataList[_dataList.indexOf(data)]['name'] = value;
          },
        )),
        DataCell(TextFormField(
          controller: TextEditingController(text: data['price'].toString()),
          onChanged: (value) {
            _dataList[_dataList.indexOf(data)]['price'] = double.parse(value);
          },
        )),
      ],
    ),
  ).toList(),
)

이렇게 하면 DataTable에서 데이터를 편집할 수 있는 기능이 추가됩니다. 사용자가 입력 필드에 값을 입력하면 데이터 소스가 업데이트되고, 화면에 표시된 데이터도 동적으로 변경됩니다.

결론

flutter의 DataTable 위젯을 사용하여 데이터를 표 형식으로 표시하고 편집하는 기능을 추가하는 방법에 대해 알아보았습니다. 데이터를 편집하는 기능을 추가함으로써 사용자 경험을 향상시킬 수 있으며, 실시간으로 데이터를 업데이트할 수 있는 기능을 제공할 수 있습니다.