[flutter] DataTable에서 데이터 수정 및 업데이트하는 방법

18 Dec 2023

flutter

Flutter를 사용하여 DataTable에서 데이터를 수정하고 업데이트하는 방법에 대해 알아보겠습니다.

DataTable 개요

DataTable은 Flutter에서 테이블 형식의 데이터를 표시하는 유용한 위젯입니다. 데이터 수정 및 업데이트를 위해 DataTable에서 사용할 수 있는 기본적인 기능을 살펴보겠습니다.

데이터 수정

DataTable에서 데이터를 수정하는 것은 꽤 간단합니다. 각 데이터 셀을 수정 가능한 위젯(예: TextFormField)으로 교체하면 됩니다.

DataTable(
  columns: [
    DataColumn(label: Text('이름')),
    DataColumn(label: Text('나이')),
  ],
  rows: [
    DataRow(cells: [
      DataCell(Text('홍길동')),
      DataCell(Text('25')),
    ]),
    DataRow(cells: [
      DataCell(Text('이몽룡')),
      DataCell(Text('27')),
    ]),
  ],
)

위의 예제 코드에서 Text 위젯을 TextFormField와 같은 수정 가능한 위젯으로 교체하여 데이터를 수정할 수 있습니다.

데이터 업데이트

데이터를 수정한 후에는 해당 변경 사항을 반영하여 UI를 갱신해야 합니다. 이를 위해서는 상태 관리 방법 중 하나인 setState 메서드를 사용할 수 있습니다.

class DataTableExample extends StatefulWidget {
  @override
  _DataTableExampleState createState() => _DataTableExampleState();
}

class _DataTableExampleState extends State<DataTableExample> {
  List<Map<String, String>> _dataList = [
    {'이름': '홍길동', '나이': '25'},
    {'이름': '이몽룡', '나이': '27'},
  ];

  @override
  Widget build(BuildContext context) {
    return DataTable(
      columns: [
        DataColumn(label: Text('이름')),
        DataColumn(label: Text('나이')),
      ],
      rows: _dataList
          .map(
            (data) => DataRow(cells: [
              DataCell(Text(data['이름'])),
              DataCell(Text(data['나이'])),
            ]),
          )
          .toList(),
    );
  }

  void _updateData(String name, String age) {
    setState(() {
      _dataList.add({'이름': name, '나이': age});
    });
  }
}

위의 예제 코드에서 _updateData 메서드를 사용하여 데이터를 업데이트하고, setState 메서드를 호출하여 UI를 갱신합니다.

결론

Flutter의 DataTable을 사용하여 데이터를 수정하고 업데이트하는 방법에 대해 알아보았습니다. DataTable은 강력한 기능을 제공하며, 데이터를 효과적으로 편집하고 관리할 수 있습니다.

데이터를 수정 및 업데이트하는 방법에 대해서는 다양한 방법이 있으며, 이는 프로젝트의 요구 사항에 따라 다를 수 있습니다. 필요에 따라 DataTable을 사용하여 데이터를 유연하게 편집하는 방법을 선택할 수 있습니다.

더 많은 내용을 학습하기 위해서는 Flutter 공식 문서를 참고하세요.