[flutter] 플러터 Table 위젯에서 특정 셀에 이벤트 처리하기

15 Dec 2023

flutter

플러터(Flutter)에서 Table 위젯은 행과 열을 가진 테이블 레이아웃을 만드는 데 사용됩니다. 이 테이블에서 특정 셀에 이벤트를 처리하는 방법은 꽤 일반적인 요구 사항입니다. 특정 셀에서 발생하는 터치 이벤트를 감지하고 처리하는 방법을 살펴보겠습니다.

터치 이벤트 처리

플러터(Table) 위젯에서 특정 셀에 터치 이벤트를 처리하기 위해서는 GestureDetector 위젯을 사용해야 합니다. GestureDetector 위젯은 위젯을 터치하거나 클릭할 때 반응할 수 있도록 합니다.

다음은 GestureDetector를 사용하여 Table의 각 셀에 터치 이벤트를 추가하는 예제입니다.

Table(
  children: [
    TableRow(
      children: [
        GestureDetector(
          onTap: () {
            // 특정 셀을 터치했을 때 수행할 작업
          },
          child: TableCell(
            child: Container(
              ...
            ),
          ),
        ),
        ...
      ],
    ),
    ...
  ],
)

위의 예제에서 GestureDetector를 사용하여 Table의 각 셀에 onTap 이벤트 핸들러를 추가했습니다. 이 핸들러를 사용하여 특정 셀을 터치했을 때 원하는 작업을 수행할 수 있습니다.

예제

아래의 예제는 Table 위젯에서 특정 셀을 클릭했을 때 해당 셀의 내용이 변경되는 간단한 예제입니다.

class TableEventHandlingExample extends StatefulWidget {
  @override
  _TableEventHandlingExampleState createState() => _TableEventHandlingExampleState();
}

class _TableEventHandlingExampleState extends State<TableEventHandlingExample> {
  String selectedCellData = 'None';

  @override
  Widget build(BuildContext context) {
    return Table(
      children: [
        TableRow(
          children: [
            GestureDetector(
              onTap: () {
                setState(() {
                  selectedCellData = 'Cell 1 clicked';
                });
              },
              child: TableCell(
                child: Container(
                  padding: EdgeInsets.all(8.0),
                  child: Text('Cell 1: $selectedCellData'),
                ),
              ),
            ),
            GestureDetector(
              onTap: () {
                setState(() {
                  selectedCellData = 'Cell 2 clicked';
                });
              },
              child: TableCell(
                child: Container(
                  padding: EdgeInsets.all(8.0),
                  child: Text('Cell 2: $selectedCellData'),
                ),
              ),
            ),
          ],
        ),
      ],
    );
  }
}

위의 예제에서는 GestureDetector를 사용하여 각 셀에 터치 이벤트를 설정하고, 터치하면 해당 셀의 내용이 변경됩니다.

결론

플러터 Table 위젯에서 특정 셀에 이벤트를 처리하려면 GestureDetector를 사용하여 각 셀에 터치 이벤트를 추가해야 합니다. 이를 통해 사용자 인터랙션에 반응하고 원하는 작업을 수행할 수 있습니다.

이상으로 Table 위젯에서 특정 셀에 이벤트 처리하기에 대한 내용을 정리해 보았습니다. 부족한 점이 있거나 추가할 내용이 있다면 참고 문헌을 통해 더 자세한 정보를 확인하시기 바랍니다.

플러터 공식 문서

참고 문헌
https://flutter.dev/docs
https://api.flutter.dev/flutter/widgets/TableRow-class.html