[flutter] 플러터 Table 위젯의 행과 열 설정

15 Dec 2023

flutter

플러터에서 Table 위젯을 사용하여 데이터를 행과 열 형태로 표시할 수 있습니다. Table 위젯은 데이터가 표 형식으로 정렬된 모습을 구현할 때 유용하게 사용됩니다. Table 위젯을 사용하여 행과 열의 모양과 스타일을 설정하는 방법을 알아보겠습니다.

행과 열 추가

Table 위젯을 사용하여 표를 만들 때, TableRow 위젯을 사용하여 각 행을 추가할 수 있습니다. 각 행에 데이터를 추가하고 싶다면, 각 TableRow에 TableCell 위젯을 추가하여 원하는 데이터를 넣을 수 있습니다.

예를 들어, 다음 코드는 Table 위젯에 3개의 행과 2개의 열을 추가하는 방법을 보여줍니다.

Table(
  border: TableBorder.all(),
  children: [
    TableRow(
      children: [
        TableCell(child: Text('첫 번째 행, 첫 번째 열')),
        TableCell(child: Text('첫 번째 행, 두 번째 열')),
      ],
    ),
    TableRow(
      children: [
        TableCell(child: Text('두 번째 행, 첫 번째 열')),
        TableCell(child: Text('두 번째 행, 두 번째 열')),
      ],
    ),
    TableRow(
      children: [
        TableCell(child: Text('세 번째 행, 첫 번째 열')),
        TableCell(child: Text('세 번째 행, 두 번째 열')),
      ],
    ),
  ],
)

행과 열 스타일 설정

Table 위젯을 통해 각 행과 열에 스타일을 설정할 수 있습니다. TableRow 위젯의 decoration 속성을 사용하여 행에 스타일을 적용하고, TableCell 위젯의 verticalAlignment 및 horizontalAlignment 속성을 사용하여 셀의 내용을 정렬할 수 있습니다.

예를 들어, 다음 코드는 Table 위젯을 사용하여 각 행과 열에 스타일을 적용하는 방법을 보여줍니다.

Table(
  border: TableBorder.all(),
  children: [
    TableRow(
      decoration: BoxDecoration(color: Colors.grey),
      children: [
        TableCell(
          child: Container(
            alignment: Alignment.center,
            child: Text('첫 번째 행, 첫 번째 열'),
          ),
        ),
        TableCell(
          child: Container(
            alignment: Alignment.center,
            child: Text('첫 번째 행, 두 번째 열'),
          ),
        ),
      ],
    ),
    TableRow(
      decoration: BoxDecoration(color: Colors.grey),
      children: [
        TableCell(
          verticalAlignment: TableCellVerticalAlignment.middle,
          child: Container(
            alignment: Alignment.center,
            child: Text('두 번째 행, 첫 번째 열'),
          ),
        ),
        TableCell(
          child: Container(
            alignment: Alignment.center,
            child: Text('두 번째 행, 두 번째 열'),
          ),
        ),
      ],
    ),
  ],
)

위 코드에서는 BoxDecoration을 사용하여 행에 배경색을 설정하고, Container를 사용하여 셀 안의 내용을 중앙 정렬하고 있습니다.

플러터 Table 위젯을 이용하여 데이터를 표 형태로 표시할 때, 위와 같이 행과 열의 모양과 스타일을 설정할 수 있습니다.

공식 플러터 Table 위젯 문서에서 더 많은 정보를 확인할 수 있습니다.