IntrinsicHeight

개요

같은 Row 안에 나열된 자식 위젯들의 높이를, 가장 큰 자식의 고유 높이에 맞춰 서로 통일합니다. 예를 들어 좌우로 놓인 카드들의 높이를 자동으로 맞출 수 있습니다. 이 스타일은 개별 자식이 아니라, 높이를 맞추려는 자식들을 담은 컨테이너(주로 Row)에 적용합니다.

속성 (Property)

노트

이 스타일은 설정할 수 있는 속성이 없습니다. 위젯에 추가하면 바로 적용됩니다.

사용 예시 (효과 확인)

IntrinsicHeight는 컨테이너(Row)에 추가하는 스타일로, 부모가 준 남는 높이를 채우는 대신 가장 큰 자식의 내용 높이에 맞춰 컨테이너를 줄입니다. 아래처럼 만들면 효과가 눈에 보입니다.

만드는 순서

1. 세로로 충분한 높이를 가진 영역을 준비합니다(예: 높이 200인 바깥 Row 또는 컨테이너). 이것이 부모가 됩니다.
2. 그 안에 대상 Row를 하나 넣고, 교차축 정렬(crossAxisAlignment)을 stretch로 설정합니다.
3. 대상 Row 안에 배경색이 있는 컨테이너 3개를 나란히 넣고, 아래와 같이 적용합니다.
   • 카드 A: 파랑 배경
   • 카드 B: 빨강 배경
   • 카드 C: 노랑 배경 + SizedBox의 Height를 200으로 적용
4. 이제 대상 Row에서 IntrinsicHeight 적용과 해제를 번갈아 하며 비교합니다.

결과

• IntrinsicHeight 해제: 대상 Row가 부모의 높이(200)를 그대로 받아, A·B·C 배경이 전부 200까지 늘어납니다(내용과 무관하게 과하게 차지).
• IntrinsicHeight 적용 대상 Row가 가장 큰 자식(C)의 내용 높이로 줄어들어, A·B·C 배경이 그 높이로 통일됩니다. 부모의 남는 세로 공간은 채우지 않습니다.

즉 IntrinsicHeight의 핵심 동작은 '부모가 준 남는 높이를 채우지 말고, 가장 큰 자식 내용 높이에 맞춰라'입니다. 적용/해제를 번갈아 하면 이 차이가 분명히 보입니다.

팁

효과가 보이려면 세 가지가 필요합니다.

(1) 부모가 자식 내용보다 큰 높이를 줄 것,
(2) 자식에 배경색을 줄 것,
(3) Row의 crossAxisAlignment를 stretch로 둘 것.

부모 높이가 이미 내용에 딱 맞거나(=남는 높이 없음) 자식에 배경이 없으면, 적용하든 해제하든 변화가 안 보입니다(이 경우 IntrinsicHeight가 사실상 불필요).

노트

IntrinsicHeight는 자식의 고유 높이를 계산하느라 레이아웃 비용이 상대적으로 큽니다. 높이가 다른 형제를 맞출 때만 쓰고, 목록처럼 항목이 많은 곳에서는 사용을 지양하세요.