[flutter] 플러터 Table 위젯에서 테이블 데이터 셀 병합하기

15 Dec 2023

flutter

플러터에서 Table 위젯을 사용하여 데이터를 표현할 때, 테이블의 데이터 셀을 병합하는 경우가 있습니다. 특히 복잡한 데이터 표를 보여줄 때 데이터 셀을 병합하는 것은 가독성을 향상시키는 데 도움이 됩니다. 이 기사에서는 플러터 Table 위젯을 사용하여 테이블 데이터 셀을 병합하는 방법에 대해 알아보겠습니다.

Table 위젯 사용하기

먼저, 플러터의 Table 위젯을 사용하여 데이터 테이블을 생성합니다.

import 'package:flutter/material.dart';

class MyTable extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Table(
      defaultColumnWidth: IntrinsicColumnWidth(),
      border: TableBorder.all(),
      children: [
        _buildTableRow(['Header 1', 'Header 2', 'Header 3']),
        _buildTableRow(['Data 1', 'Data 2', 'Data 3']),
        _buildTableRow(['Data 4', 'Data 5', 'Data 6']),
      ],
    );
  }

  TableRow _buildTableRow(List<String> rowData) {
    return TableRow(
      children: rowData
          .map((data) => Padding(
                padding: const EdgeInsets.all(8.0),
                child: Text(data),
              ))
          .toList(),
    );
  }
}

위의 예제에서는 간단한 데이터 테이블을 만들기 위해 Table 위젯을 사용하였습니다.

데이터 셀 병합하기

데이터 셀을 병합하기 위해서는 TableRow를 사용하여 데이터 행을 생성하고, TableCell 위젯을 사용하여 데이터 셀을 병합합니다.

TableRow(
  children: [
    _buildMergedCell('Merged Data', columnSpan: 2),
    _buildNormalCell('Data 3'),
  ],
),

위의 예제에서, _buildMergedCell 및 _buildNormalCell은 데이터 셀을 생성하는 helper 함수입니다. _buildMergedCell은 데이터를 병합하는 데 사용되며 columnSpan 속성은 열을 병합할 개수를 지정합니다.

결론

플러터 Table 위젯을 사용하여 데이터 테이블을 표현하고, 데이터 셀을 병합하는 방법에 대해 알아보았습니다. 데이터 테이블을 사용할 때 효율적으로 데이터를 표현하기 위해 데이터 셀을 병합하는 기능을 적절히 활용할 수 있습니다.

참고: