Flutter에서 카드 UI를 그리드로 배치할 때 GridView를 많이 사용한다. 보통은 SliverGridDelegateWithFixedCrossAxisCount를 쓰고 childAspectRatio로 가로세로 비율을 맞추곤 한다.
하지만 이렇게 구현하면 단말기마다 UI가 잘리는 문제가 자주 발생한다. 어떤 기기에서는 텍스트가 두 줄로 잘 나오는데, 다른 기기에서는 같은 아이템이 하단에서 UI가 잘려 보인다.
왜 이런 현상이 생기는 걸까?
왜 단말기마다 잘릴까?
childAspectRatio는 비율 기반이다
childAspectRatio는 width / height 비율로 셀 크기를 계산한다.
화면 너비가 달라지면 셀의 가로폭이 달라지고, 그에 따라 높이도 비율로 계산된다.
폰트 렌더링 차이
단말기별로 폰트 메트릭이 달라 텍스트가 占占 2~4px 정도 더 커지거나 줄어든다.
textScaleFactor 설정이 다르면 한 줄에 필요한 세로 공간도 달라진다.
DPR(Device Pixel Ratio) 반올림
3열 분할 시 셀 폭이 소수점으로 나뉘면 반올림 오차가 발생한다.
이 오차가 누적되어 세로 길이가 약간씩 달라지고, 하단 뱃지가 잘려 보인다.
부모 높이 제한
흔히 SizedBox(height: …)로 GridView를 감싸는데, 텍스트가 2줄일 때 필요한 높이가 그 박스보다 크면 하단이 잘린다.
결국 비율로 정한 높이 < 실제 필요한 높이가 되면서 잘리는 것이다.
해결 방법: mainAxisExtent 사용하기
이 문제를 해결하는 가장 간단한 방법은 childAspectRatio 대신 mainAxisExtent를 쓰는 것이다.
gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 3,
mainAxisExtent: 240, // <- 높이를 픽셀 단위로 고정
crossAxisSpacing: 8,
mainAxisSpacing: 16,
),mainAxisExtent는 아이템 하나의 세로 길이를 고정값(px)으로 지정한다.
따라서 화면 너비나 비율에 영향받지 않고, 항상 동일한 높이를 가진다.
텍스트가 한 줄이든 두 줄이든, 카드 전체 높이가 변하지 않으므로 배지 같은 하단 요소가 잘리지 않는다.
정리
childAspectRatio는 비율 기반이라 기기마다 텍스트·폰트·픽셀 오차에 의해 잘림 문제가 생긴다.
mainAxisExtent를 쓰면 카드 높이를 고정할 수 있어서 단말기에 상관없이 일관된 레이아웃을 보장한다.
UI가 잘린다면 우선 childAspectRatio를 의심하고, 가능하면 mainAxisExtent로 바꾸는 게 안전하다.
