[flutter] 플러터 Table 위젯에서 특정 셀의 데이터 수정하기

15 Dec 2023

flutter

플러터 앱을 개발하다 보면 Table 위젯을 사용하여 데이터를 효율적으로 표시해야 하는 경우가 있습니다. 하지만 Table 위젯에서 특정 셀의 데이터를 수정하는 방법은 몇 가지 특별한 고려사항이 필요합니다.

Table 위젯과 데이터 수정

Table 위젯은 간단한 데이터 표시용으로 사용될 때에는 데이터 수정이 쉽지만, 특정 셀을 선택하고 수정하는 것은 다소 복잡합니다. 이를 위해 다음 단계를 따라 데이터를 수정할 수 있습니다.

해당 셀 탐색: Table 위젯에서 특정 셀을 탐색하여 해당 셀에 있는 데이터에 접근합니다.
수정 기능 추가: 해당 셀에 대한 수정 기능을 추가하고, 사용자가 데이터를 수정할 수 있도록 합니다.
데이터 갱신: 사용자가 데이터를 수정하면 해당 변경 내용을 적용하고, 화면에 갱신합니다.

다음은 Table 위젯에서 특정 셀의 데이터를 수정하는 예제 코드입니다.

class EditableTableCell {
  String value;
  bool isBeingEdited;

  EditableTableCell(this.value, this.isBeingEdited);
}

class EditableTableWidget extends StatefulWidget {
  @override
  _EditableTableWidgetState createState() => _EditableTableWidgetState();
}

class _EditableTableWidgetState extends State<EditableTableWidget> {
  late List<List<EditableTableCell>> _data;

  @override
  void initState() {
    super.initState();
    _data = List.generate(5, (index) {
      return List.generate(5, (index) {
        return EditableTableCell('Data$index$index', false);
      });
    });
  }

  void _startEditing(int row, int column) {
    setState(() {
      _data[row][column].isBeingEdited = true;
    });
  }

  void _stopEditing(int row, int column) {
    setState(() {
      _data[row][column].isBeingEdited = false;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Table(
      children: List.generate(_data.length, (row) {
        return TableRow(
          children: List.generate(_data[row].length, (column) {
            return GestureDetector(
              onTap: () {
                _startEditing(row, column);
              },
              child: _buildCell(row, column),
            );
          }),
        );
      }),
    );
  }

  Widget _buildCell(int row, int column) {
    EditableTableCell cell = _data[row][column];
    return cell.isBeingEdited
      ? TextField(
          onChanged: (value) {
            _data[row][column].value = value;
          },
          onSubmitted: (value) {
            _stopEditing(row, column);
          },
          autofocus: true,
          controller: TextEditingController(text: cell.value),
        )
      : Text(cell.value);
  }
}

위 코드는 Table 위젯에서 특정 셀의 데이터를 수정할 수 있도록 구현된 예제입니다. 사용자는 해당 셀을 탭하면 데이터를 수정할 수 있고, 수정이 끝나면 수정된 데이터가 적용되어 화면에 표시됩니다.

확인하려면, Flutter Table 클래스 문서를 확인해 보시기 바랍니다.