회사에서 카드 리스트 화면이 마음에 안들어서 동적인 크기를 만드려고 하는데 지금껏 몰랐던 특이한 점을 알게되었습니다.
Column 아래에 FittedBox로 제한을 걸어도 높이에 맞게 줄어들지 않았던 문제입니다.
구조는 아래와 같았습니다.
Tile( hieght: xxx width: xxx child: Column( children: [ top(), mid(), bottom(), ] ) )
bottom()에는 Wrap으로 감싸진 icon들이 1~4개 까지 있을 수 있었고 이것을 알아서 배치하려는 의도였습니다.
하지만 자꾸 Fitted박스가 적용이 되지 않았고 어쩔 수 없이 LayoutBuilder()를 통해서 constraints를 구하고, padding을 빼서 각 아이콘의 크기를 직접 결정하려고 했습니다.
그런데 이때 알게된것은 bottom()에서 height가 double.infinity로 나오고 있었다는 사실입니다.
좀 더 조사해본 결과 Column()의 자식에서 double.infinity가 전달되는 것을 알게되었습니다.
Flutter Box Constraints: Column & Rows
그리고 뒤늦게 발견한 것이지만 정리하자면 Column과 Row는 MainAxis 방향에 대해서 자식에게 무제한의 사이즈를 제공하고 이를 막기 위해서는 children에 넣어줄 때 제한을 걸어야한다는 이야기입니다.
이 문제를 해결하려면 Flexible, Expanded, 혹은 MediaQuery로 계산하는 등의 방법으로 상위 위젯 제한보다 작게 사이즈를 지정하는 위젯을 사용하여 자식 위젯을 한번 감싸주면 됩니다.
Flexible과 Expanded을 사용하게 되면 알아서 비율대로 Column과 Row의 제약을 분할해서 가져갑니다.
덤으로 테스트해본것으로는 이중으로 Column을 중첩하면 자식 Column은 당연히 height 크기가 무한이므로 child Column 내부에서 Expanded를 사용하면 RenderFlex children have non-zero flex but incoming height constraints are unbounded. 에러가 나오게 됩니다.
Column -> Column -> Expanded (X)
Column -> Expaned -> Column -> Expanded (O)
여기서 Column은 Row로 바꿀 수 있을 것이고 꼭 Expanded를 사용할 필요는 없고 어떻게든 상위 부모에 맞게 크기에 제한을 주면됩니다. (SizedBox, Container에서 width, height를 주는 등)
솔직히 지금까지 Column, Row 간단한거라고 막 사용했는데 그러다보니 예상치 못한 곳에서 낭패를 본 것 같습니다.
