플러터(Table)[https://api.flutter.dev/flutter/material/Table-class.html] 위젯을 사용하여 데이터를 행과 열의 형태로 표시하는 경우, 사용자가 특정 셀을 선택하고 그에 대한 반응을 정의하는 것이 필요할 수 있습니다. 이 블로그 포스트에서는 플러터 Table 위젯에서 특정 셀을 선택하는 방법에 대해 알아보겠습니다.
Table 위젯과 GestureDetector를 활용한 셀 선택
Table 위젯은 데이터를 표 형태로 보여주는 데 사용되며, GestureDetector를 이용하여 특정 셀에 대한 터치 이벤트를 감지할 수 있습니다. 아래는 Table 위젯과 GestureDetector를 활용하여 특정 셀을 선택하는 예시 코드입니다.
Table(
children: [
TableRow(
children: [
GestureDetector(
onTap: () {
// 선택된 셀에 대한 작업 수행
},
child: TableCell(
child: Text('셀 내용'),
),
),
],
),
],
)
위의 예시 코드에서 GestureDetector를 사용하여 특정 셀을 터치했을 때 원하는 작업을 수행할 수 있습니다.
셀 선택 상태 관리하기
특정 셀을 선택했을 때 선택된 상태를 관리하고, 선택된 셀에 대한 시각적인 피드백을 주고 싶을 수 있습니다. 이를 위해 StatefulWidget을 활용하여 선택된 셀의 상태를 관리할 수 있습니다. 아래의 예시 코드는 선택된 셀의 상태를 관리하는 방법에 대한 간단한 예시입니다.
class TableCellSelectionExample extends StatefulWidget {
@override
_TableCellSelectionExampleState createState() => _TableCellSelectionExampleState();
}
class _TableCellSelectionExampleState extends State<TableCellSelectionExample> {
int selectedRowIndex = -1;
int selectedColumnIndex = -1;
@override
Widget build(BuildContext context) {
return Table(
children: List<TableRow>.generate(
rowCount,
(rowIndex) => TableRow(
children: List<Widget>.generate(
columnCount,
(columnIndex) => GestureDetector(
onTap: () {
setState(() {
selectedRowIndex = rowIndex;
selectedColumnIndex = columnIndex;
});
},
child: TableCell(
child: Container(
color: (rowIndex == selectedRowIndex && columnIndex == selectedColumnIndex)
? Colors.blueAccent
: Colors.transparent,
child: Text('Cell $rowIndex,$columnIndex'),
),
),
),
),
),
),
);
}
}
위의 예시 코드에서 selectedRowIndex와 selectedColumnIndex를 사용하여 선택된 셀의 정보를 관리하고, 이에 따라 각 셀의 시각적인 상태를 변경합니다.
Table 위젯을 사용하여 데이터를 표 형태로 보여줄 때, 특정 셀을 선택하고 관련 작업을 수행하는 방법을 고려할 수 있습니다. 위의 예시를 참고하여 Table 위젯에서 셀을 선택하는 기능을 구현해 보세요.
참고 자료:
저자: 챗고, 2023년 5월 10일