[flutter] 플러터 Table 위젯에서 특정 셀 편집하기

15 Dec 2023

flutter

플러터의 Table 위젯은 데이터를 표 형식으로 보여주는 데 유용합니다. 그러나 종종 특정 셀을 편집해야 하는 경우가 있습니다. 이 글에서는 Table 위젯에서 특정 셀을 편집하는 방법에 대해 알아보겠습니다.

특정 셀을 편집하기 위한 절차

Table 위젯 설정: 먼저 Table 위젯을 설정합니다. 데이터를 표시할 때 해당 셀을 편집할 수 있도록 Table의 각 셀에 Editor 위젯을 추가해야 합니다.
셀 편집: 특정 셀을 터치하면 해당 셀을 편집할 수 있는 Editor 위젯이 나타나도록 해야 합니다. 이를 위해서는 해당 셀이 터치되었을 때 Editor 위젯을 보여주는 동작을 추가해야 합니다.
저장 기능 추가: 수정된 내용을 저장할 수 있는 기능을 추가해야 합니다. 이때, 수정된 내용을 Table에 다시 반영해야 합니다.

예시 코드

아래는 Table 위젯에서 특정 셀을 편집하는 예시 코드입니다.

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyTable(),
    );
  }
}

class MyTable extends StatefulWidget {
  @override
  _MyTableState createState() => _MyTableState();
}

class _MyTableState extends State<MyTable> {
  List<List<String>> _data = [
    ['1', 'Apple', '100'],
    ['2', 'Banana', '200'],
    ['3', 'Cherry', '300'],
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Editable Table'),
      ),
      body: ListView.builder(
        itemCount: _data.length,
        itemBuilder: (context, index) {
          return ListTile(
            title: Text(_data[index][0]),
            subtitle: Text(_data[index][1]),
            trailing: Text(_data[index][2]),
            onTap: () {
              _editCell(context, index);
            },
          );
        },
      ),
    );
  }

  Future<void> _editCell(BuildContext context, int index) async {
    return showDialog(
      context: context,
      builder: (BuildContext context) {
        return AlertDialog(
          title: Text('Edit Cell'),
          content: TextField(
            onChanged: (newValue) {
              setState(() {
                _data[index][2] = newValue;
              });
            },
          ),
          actions: <Widget>[
            FlatButton(
                child: Text('Save'),
                onPressed: () {
                  Navigator.of(context).pop();
                }),
          ],
        );
      },
    );
  }
}

위 코드에서는 ListTile을 이용하여 각 셀을 표시하고, 해당 셀을 터치했을 때 AlertDialog를 이용하여 수정을 할 수 있도록 구현되어 있습니다.

이제 플러터 Table 위젯에서 특정 셀을 편집하는 방법에 대해 알아보았습니다. 만약 문제가 발생하거나 추가적인 도움이 필요하시면 언제든지 물어보세요.

참고 자료

Flutter Table 공식 문서: https://api.flutter.dev/flutter/widgets/Table-class.html
Flutter ListTile 공식 문서: https://api.flutter.dev/flutter/material/ListTile-class.html