동영상
https://www.youtube.com/watch?v=jckqXR5CrPI
내용 정리
ListView를 Column에 넣으면 이런 에러와 마주친다.
"Viewport was given unbounded height"
어떻게 해야할까?
다른 말로 위젯을 어떻게 배치해야할까?
이것은 당신의 앱을 더 빠르고 더 배터리를 아낄 수 있게 해준다.
플러터의 layout 알고리즘은 다음과 같다.
- Single pass
- Constraints go down (제약조건(ex - 최대 크기) 을 아래에 전달)
- Geometry goes up (위젯의 위치와 크기 정보를 위로 전달)
각 기능은 한 방향으로만 동작하며 양 방향으로 동작하지 않는다.
모든 위젯에 해당되며, 위 정보는 최 상위 노드에서 시작해 아래의 노드로 전달했다가 다시 최 상위 노드로 돌아온다.
Column의 경우 여러개의 children을 가지기 때문에 조금 더 재미있다.
children 위젯이 정해진 크기라면 상관 없지만 다음과 같이 하나가 ListView일 때를 보자.
Column도 제한된 크기를 가지는데 ListView는 별다른 설정이 없으면 무한한 길이를 가진다.
제한된 크기 내부에 무한한 길이의 위젯이 들어가게 되면?
으아ㅏㅏㅏㅏㅏㅏ
unbounded height error 가 생긴다.
그렇다면 왜 Column은 애초에 크기에 제한을 두지 않았을까?
children 위젯의 크기를 자신보다 작게 제한하면 되지 않을까?
"최대 크기는 이거야" 라고 할 수 있지 않을까?
위와 같이 한다면 에러는 없어지겠지만, 위 unbounded height error가 의미하는 근본적인 문제는 해결하지 못한다.
ex) ListView 하나가 최대 크기를 다 먹게 되면 나머지 위젯이 놓일 공간이 없어진다.
위와 같은 예의 경우 에러가 나진 않지만 원하는 레이아웃은 아닐 것이다.
해결법은 몇 가지가 있는데
- 지금처럼 Unbounded height error가 뜸
- 에러는 없지만 원하지 않는 결과
- Column이 서로 상호작용하며 정보를 전달하는 것인데 이 땐 layout 알고리즘이 훨씬 느려지게 됨
그렇다면 이 문제를 어떻게 해결해야 할까?
가능한 명확하게 만들면 된다.
결론
Unbounded height error가 생겼다면 이렇게 처리하자.
- Expanded 나 Flexible 위젯으로 감싸기
- SizedBox 같은 제한된 크기의 위젯으로 감싸기
