[flutter] DataTable에서 행과 열 사이에 테두리 추가하는 방법

18 Dec 2023

flutter

Flutter의 DataTable은 행과 열이 정렬된 데이터를 표시하는 데 사용되는 유용한 위젯입니다. 그러나 기본으로는 행과 열 사이의 경계선이 없습니다. 이 문제를 해결하려면 다음과 같은 방법을 사용할 수 있습니다.

1. DataTable의 형식 지정 변경

DataTable의 형식 지정 옵션을 변경하여 각 셀 사이에 테두리를 추가할 수 있습니다. 아래 예제 코드를 참고하여 적절한 형식을 지정하여 테두리를 추가할 수 있습니다.

DataTable(
  decoration: BoxDecoration(
    border: Border.all(color: Colors.grey),
  ),
  columns: [
    DataColumn(label: Text('Column 1')),
    DataColumn(label: Text('Column 2')),
    // Add more columns as needed
  ],
  rows: [
    DataRow(cells: [
      DataCell(Text('Row 1, Cell 1')),
      DataCell(Text('Row 1, Cell 2')),
      // Add more cells as needed
    ]),
    DataRow(cells: [
      DataCell(Text('Row 2, Cell 1')),
      DataCell(Text('Row 2, Cell 2')),
      // Add more cells as needed
    ]),
    // Add more rows as needed
  ],
)

2. TableCell 위젯 사용

또 다른 방법으로는 DataTable 대신에 Table 위젯을 사용하고 TableCell 위젯을 통해 행과 열 사이에 테두리를 추가할 수 있습니다. 아래 예제 코드를 참고하여 TableCell을 사용하는 방법을 살펴보세요.

Table(
  border: TableBorder.all(color: Colors.grey),
  children: [
    TableRow(
      children: [
        TableCell(child: Text('Row 1, Cell 1')),
        TableCell(child: Text('Row 1, Cell 2')),
        // Add more cells as needed
      ],
    ),
    TableRow(
      children: [
        TableCell(child: Text('Row 2, Cell 1')),
        TableCell(child: Text('Row 2, Cell 2')),
        // Add more cells as needed
      ],
    ),
    // Add more rows as needed
  ],
)

테두리가 나타나도록 변경하려면 위의 두 가지 방법 중 하나를 선택하여 적절히 적용하면 됩니다.

참고 자료

Flutter 공식 문서: DataTable class
Flutter 공식 문서: Table class