[flutter] 플러터 Table 위젯에서 헤더 행 및 헤더 열 설정하기

15 Dec 2023

flutter

플러터(Table 위젯)[https://api.flutter.dev/flutter/widgets/Table-class.html] 은 행과 열로 구성된 테이블을 만들 수 있는 유용한 기능이다. 테이블에 대한 사용자 정의를 위해 헤더 행 및 헤더 열을 설정하는 방법에 대해 알아보자.

1. 헤더 행 추가하기

Table 위젯에서 헤더 행을 추가하려면 Table의 children 속성을 사용하여 TableRow 리스트에 추가한다.

예를 들어, 아래 코드는 3개의 헤더 셀을 가진 테이블을 만드는 방법을 보여준다:

Table(
  border: TableBorder.all(),
  children: [
    TableRow(
      children: [
        TableCell(child: Center(child: Text('Header 1'))),
        TableCell(child: Center(child: Text('Header 2'))),
        TableCell(child: Center(child: Text('Header 3'))),
      ],
    ),
    // 나머지 테이블 데이터...
  ],
)

2. 헤더 열 추가하기

헤더 열은 Table 위젯을 사용하여 만들 수 없지만, 헤더 열의 역할을 하는 위젯(Column)을 사용하여 수동으로 구현할 수 있다.

예를 들어, 아래 코드는 첫 번째 열이 헤더 역할을 하고 나머지 열은 데이터를 표시하는 방법을 보여준다:

Table(
  border: TableBorder.all(),
  children: [
    TableRow(
      children: [
        TableCell(child: Center(child: Text('Header 1'))),
        TableCell(child: Center(child: Text('Data 1'))),
        TableCell(child: Center(child: Text('Data 2'))),
      ],
    ),
    // 나머지 테이블 데이터...
  ],
)

위의 예에서 Header 1은 헤더 열을 대표하고 있으며, 이 개념을 활용하여 헤더 열을 표현할 수 있다.

Table 위젯을 사용하여 헤더 행 및 헤더 열을 설정하는 방법에 대해 간단하게 알아보았다. 이를 활용하여 효과적인 데이터 표시 화면을 구현할 수 있다.