플러터에는 데이터를 테이블 형식으로 보여주는 Table 위젯이 있습니다. 하지만 Table 위젯에서 행과 열의 크기를 동적으로 조절하는 것은 조금 복잡할 수 있다. 이번 글에서는 Table 위젯에서 테이블의 크기를 동적으로 조절하는 방법에 대해 알아보겠습니다.

Table 위젯 소개

Table 위젯은 행과 열로 이루어진 2차원 표를 만들 수 있는 위젯으로, 각 셀에 위젯을 배치할 수 있습니다.

Table(
  children: [
    TableRow(
      children: [
        Text('Cell 1'),
        Text('Cell 2'),
      ],
    ),
    TableRow(
      children: [
        Text('Cell 3'),
        Text('Cell 4'),
      ],
    ),
  ],
)

위와 같이 Table을 생성하면 2x2 형태의 표가 생성됩니다.

테이블의 크기 동적으로 조절하기

Table 위젯에서 테이블의 가로 크기를 동적으로 조절하려면, 각 열의 크기를 지정해주어야 합니다.

Table(
  columnWidths: {
    0: FlexColumnWidth(2),
    1: FlexColumnWidth(1.5),
  },
  children: [
    TableRow(
      children: [
        Text('Cell 1'),
        Text('Cell 2'),
      ],
    ),
    TableRow(
      children: [
        Text('Cell 3'),
        Text('Cell 4'),
      ],
    ),
  ],
)

위의 예제에서 columnWidths 속성을 사용하여 열의 너비를 설정하였습니다. 값은 FlexColumnWidth를 이용해 상대적인 비율을 설정할 수 있습니다.

비슷한 방식으로 테이블의 세로 크기를 조절할 수도 있습니다.

결론

Table 위젯은 행과 열의 크기를 동적으로 조절하기 위해 자체적인 기능을 제공하지는 않지만, FlexColumnWidth와 FlexColumnWidth를 이용하여 각각의 열과 행의 크기를 설정함으로써 동적인 크기 조절을 구현할 수 있습니다.

참조: 플러터 Table 위젯 공식 문서