[flutter] DataTable에서 각 셀의 너비 지정하는 방법

18 Dec 2023

flutter

Flutter의 DataTable은 행과 열 형태로 데이터를 표시하는 위젯으로, 각 셀의 내용을 표시할 때 셀의 크기를 조절해야 하는 경우가 있습니다. 이러한 경우에 각 셀의 너비를 지정하는 방법을 알아보겠습니다.

1. DataColumn의 label 속성 사용

DataTable의 각 열을 정의할 때 DataColumn을 사용합니다. DataColumn의 label 속성을 활용하여 각 셀의 너비를 지정할 수 있습니다.

예를 들어, 다음과 같이 DataColumn을 정의하고, label을 SizedBox로 감싸 너비를 지정할 수 있습니다.

DataTable(
  columns: [
    DataColumn(
      label: SizedBox(
        width: 100, // 원하는 너비 지정
        child: Text('Column 1'),
      ),
    ),
    DataColumn(
      label: SizedBox(
        width: 150, // 원하는 너비 지정
        child: Text('Column 2'),
      ),
    ),
  ],
  rows: [
    DataRow(
      cells: [
        DataCell(Text('Row 1, Cell 1')),
        DataCell(Text('Row 1, Cell 2')),
      ],
    ),
    DataRow(
      cells: [
        DataCell(Text('Row 2, Cell 1')),
        DataCell(Text('Row 2, Cell 2')),
      ],
    ),
  ],
)

2. 특정 열을 지정한 너비로 설정

특정 열의 너비를 설정하는 경우, DataColumn의 numeric 속성을 활용할 수 있습니다. 이를 활용하면 해당 열의 셀이 numeric 컨텐츠를 표시하기 위해 충분한 너비를 가지도록 할 수 있습니다.

DataColumn(
  label: Text('Price'),
  numeric: true, // 너비를 적절하게 지정하도록 도와줌
),

요약

Flutter의 DataTable을 사용하여 각 셀의 너비를 지정하는 방법을 알아보았습니다. DataColumn의 label 속성을 활용하거나 특정 열에 numeric 속성을 사용하는 등의 방법으로 셀의 너비를 지정할 수 있습니다. 이를 통해 데이터를 보다 깔끔하고 보기 좋게 표시할 수 있습니다.