[flutter] DataTable에서 행 및 열의 크기 조정하는 방법

18 Dec 2023

flutter

Flutter앱을 개발하는 데 있어, 데이터를 테이블 형식으로 표시해야 하는 경우가 많습니다. 그런데 때로는 DataTable의 행이나 열의 크기를 조절해야 할 수 있습니다.

이 기술 블로그에서는 Flutter의 DataTable 위젯을 사용하여 행과 열의 크기를 조절하는 방법에 대해 알아보겠습니다.

DataTable의 행 크기 조절하기

DataTable에서 행의 크기를 조절하려면, DataRow 위젯의 height 속성을 사용하여 각 행의 높이를 지정할 수 있습니다. 아래는 예시 코드입니다.

DataTable(
  columns: [
    DataColumn(label: Text('Name')),
    DataColumn(label: Text('Age')),
  ],
  rows: [
    DataRow(
      cells: [
        DataCell(Text('John')),
        DataCell(Text('30')),
      ],
      height: 50, // 행의 높이 조절
    ),
    DataRow(
      cells: [
        DataCell(Text('Alice')),
        DataCell(Text('25')),
      ],
      height: 80, // 다른 행의 높이 조절
    ),
  ],
)

위의 코드에서, 각 DataRow 위젯에 height 속성을 사용하여 행의 크기를 조절하였습니다.

DataTable의 열 너비 조절하기

DataTable에서 열의 크기를 조절하려면, DataColumn 위젯의 numeric 속성을 사용하여 각 열의 너비를 지정할 수 있습니다. 아래는 예시 코드입니다.

DataTable(
  columns: [
    DataColumn(label: Text('Name')),
    DataColumn(
      label: Text('Age'),
      numeric: true, // 숫자열의 너비 조절
    ),
  ],
  rows: [
    DataRow(
      cells: [
        DataCell(Text('John')),
        DataCell(Text('30')),
      ],
    ),
    DataRow(
      cells: [
        DataCell(Text('Alice')),
        DataCell(Text('25')),
      ],
    ),
  ],
)

위의 코드에서, DataColumn 위젯의 numeric 속성을 사용하여 열의 너비를 조절하였습니다.

이제 DataTable의 행과 열의 크기를 조절하는 방법에 대해 알아보았습니다. 이를 응용하여 다양한 데이터 테이블 디자인을 만들어보세요.

끝.