Table Class 의 Cell 각각의 너비 및 높이 지정하기

IntrinsicColumnWidth(),
FlexColumnWidth(),
FixedColumnWidth(원하는 크기)

Table을 만들던 중 table 각 cell의 크기를 지정하고 싶은데 잘 안 되는 것이다... 

구글을 아무리 뒤져보아도 TableCell 에 Container를 지정해서 그 안에 크기를 쓰면 된다고 했는데 나는 자꾸 

이런 모양으로 한쪽으로 치우치거나 전체 화면의 비율을 꽉 채우는 모양만 나오는 것이다. 

 

그래서 지정한 것이 바로 columnWidths 이다! 

 

Table class를 살펴보면 columnWidths 와 defaultColumnWidth 가 있다. 

Table({
    super.key,
    this.children = const <TableRow>[],
    this.columnWidths,
    this.defaultColumnWidth = const FlexColumnWidth(),
    this.textDirection,
    this.border,
    this.defaultVerticalAlignment = TableCellVerticalAlignment.top,
    this.textBaseline, // NO DEFAULT: we don't know what the text's baseline should be
  })

 

Property	Description	Type	Default
border	Table의 테두리.	TableBorder?
children	Table에 들어갈 TableRow 리스트.	List<TableRow>
columnWidths	각 세로 줄의 가로 길이 리스트.	Map<int, TableColumnWidth>?	defaultColumnWidth의 값
defaultColumnWidth	세로 줄의 디폴트 가로 길이.	TableColumnWidth	FlexColumnWidth(1.0)
defaultVerticalAlignment	각 칸의 내부의 수직 정렬 방식.	TableCellVerticalAlignment	TableCellVerticalAlignment.top
textBaseline	텍스트를 정렬하는데 사용되는 기준 수평선. (TableCell의 tableCellVerticalAlignment을 TableCellVerticalAlignment.baseline으로 설정했을 때만 유효하다.)	TextBaseline?
textDirection	내부 텍스트 진행 방향. (왼쪽에서 오른쪽 방향, 오른쪽에서 왼쪽 방향)	TextDirection?

 

 

Table은 열의 너비를 명시적으로 설정해야 하는게 포인트이다.

여기서 사용할 수 있는 것이 columnWidths 와 defaultColumnWidth인데, columnWidth 는 전달할 필요가 없지만 defaultColumnWidth는 null 값으로 초기화할 수 없다는 특징이 있다. defaultColumnWidth는 프로퍼티 중  FlexColumnWidth(1.0)을 기본 값으로 가지고 있어서 화면 배율에 딱 맞춰주는 역할을 한다. 그래서 저렇게 꽉 찬 화면을 보여주는 것이다. 나는 각 셀의 비율을 내가 원하는 너비와 높이로 설정하기 위해 아래처럼 columnWidths로 크기 조절을 설정하였다. 

  return Table(
    border: TableBorder.all(),
    columnWidths: {
      for (int i = 0; i < tdCount!; i++)
        i: IntrinsicColumnWidth(),
    },
    children: tableRowWidgets,
  );

 

 

그렇다면 ColumnWidths 로 사용할 수 있는 값들이 뭐가 있는지 알아보자 

1. IntrinsicColumnWidth() //  해당 세로 줄에 해당하는 칸들의 크기에 따라서 가로 길이를 설정.
2. FlexColumnWidth() // 나머지 세로 줄이 차지하고 남은 공간 전체를 가로 길이로 설정
3. FixedColumnWidth(원하는 크기) //특정 픽셀 만큼을 가로 길이로 설정

 

 

위의 3개를 적절하게 사용한다면 아래와 같은 아주 복잡한 Table Sample 도 만들 수 있다.