Colin's Blog
[flutter] 플러터 Table 위젯에서 전체 행 또는 열 선택하기

플러터는 다양한 위젯을 제공하여 다양한 UI 요구사항을 해결할 수 있습니다. Table 위젯은 행 및 열로 데이터를 표시하는 데 유용하며 전체 행이나 열을 선택해야 하는 경우가 있습니다. 본 문서에서는 Table 위젯에서 전체 행 또는 열을 선택하는 방법에 대해 알아보겠습니다.

전체 행 또는 열 선택 방법

Table 위젯은 selection 컨트롤러를 사용하여 전체 행 또는 열을 선택할 수 있습니다. 이를 위해서는 먼저 SelectableText와 Row 또는 Column 위젯을 사용하여 Table을 구성해야 합니다. 선택된 행 또는 열을 나타내기 위해 선택된 Row 또는 Column 위젯을 구성할 수 있습니다.

아래는 플러터에서 Table의 선택 기능을 구현하는 예제입니다.

class TableSelectionDemo extends StatefulWidget {
  @override
  _TableSelectionDemoState createState() => _TableSelectionDemoState();
}

class _TableSelectionDemoState extends State<TableSelectionDemo> {
  final List<List<String>> _tableData = [
    ['1', 'Apple', 'Red'],
    ['2', 'Banana', 'Yellow'],
    ['3', 'Grapes', 'Purple'],
  ];
  final Set<int> _selectedRows = Set<int>();
  final Set<int> _selectedColumns = Set<int>();

  @override
  Widget build(BuildContext context) {
    return Table(
      children: [
        for (int i = 0; i < _tableData.length; i++)
          TableRow(
            children: [
              for (int j = 0; j < _tableData[i].length; j++)
                GestureDetector(
                  onTap: () {
                    setState(() {
                      if (_selectedRows.contains(i)) {
                        _selectedRows.remove(i);
                      } else {
                        _selectedRows.add(i);
                      }
                      if (_selectedColumns.contains(j)) {
                        _selectedColumns.remove(j);
                      } else {
                        _selectedColumns.add(j);
                      }
                    });
                  },
                  child: Container(
                    color: _selectedRows.contains(i) || _selectedColumns.contains(j)
                        ? Colors.blue.withOpacity(0.3)
                        : Colors.transparent,
                    padding: EdgeInsets.all(8.0),
                    child: SelectableText(_tableData[i][j]),
                  ),
                ),
            ],
          ),
      ],
    );
  }
}

위 예제에서는 Table을 구성하고, GestureDetector를 사용하여 특정 행 또는 열을 선택할 수 있습니다. 선택된 행 또는 열은 _selectedRows 및 _selectedColumns Set에 보관됩니다. 선택된 행 또는 열을 강조하기 위해 색상을 변경하는 방법을 사용할 수 있습니다.

마치며

이제 플러터 Table 위젯에서 전체 행 또는 열을 선택하는 방법을 알아보았습니다. 위 예제를 참고하여 원하는 형태로 Table을 구성하고, 선택 기능을 추가해 보세요.

참고 문헌:

© 2018 Colin. All rights reserved.