* 에러 내용
원래 flutter 생명주기, dart 문법부터 포스팅할 예정이었으나 개발 도중 마침 아래와 같은 예외 상황을 마주해 먼저 업로드하려고 합니다. flutter 개발을 하시다 보면 의외로 자주 접하는 에러입니다.
예외가발생했습니다.
FlutterError (Vertical viewport was given unbounded height.
Viewports expand in the scrolling direction to fill their container.
In this case, a vertical viewport was given an unlimited amount of vertical space in which to expand.
This situation typically happens when a scrollable widget is nested inside another scrollable widget.
If the widget is always is always nested in a scrollable widget there is no need to use a viewport because there will always be enough vertical space for the children.
In this case, consider using Column or Wrap instead.
Otherwise, consider using a CustomScrollView to concatenate arbitrary slivers into a single scrollable.)Vertical viewport(사용자에게 보여지는 영역)이 높이가 무한이라서 발생했다고 합니다.
화면의 대략적 구조는 아래와 같습니다.
- Container
- Column
- Container(+Container, SizedBox)
- ListView
- Padding
- Column
- ......여기서, 상위 위젯인 Container에 높이를 주면 에러가 발생하지 않지만, ListView의 높이에 따라 동적으로 조정하고자 높이를 주지 않으면 에러가 발생하게 됩니다.
* 원인
Column 안에 ListView를 사용하여 발생하였습니다. 실제로, ListView의 높이를 주어주면 에러가 발생하지 않습니다.
ListView는 상위 위젯의 높이에 맞춰 자신의 높이를 설정하는데, Column의 높이 또한 정해지지 않았기 때문에 viewport의 높이가 무한이라는 에러가 발생하게 됩니다.
* 해결법
의외로 간단히 해결이 됩니다.
ListView의 shrinkWrap 속성을 true로 주면 해결이 됩니다.
...
child: ListView.builder(
shrinkWrap:true,
...
)
...하지만, shrinkWrap을 사용하는 데에는 비용이 많이 든다는 점이 문제점이 있다고 합니다. 애니메이션이 없고 길지 않은, 간단한 ListView의 경우 문제가 되진 않지만 ListView 내부가 복잡할 경우 문제가 발생할 수 있다고 합니다.
다른 해결 방법들은 Expanded 위젯으로 ListView를 감싸는 것과, ListView 대신 SliverList를 사용하는 방법이 있다고 합니다. 다른 방법은 하단 참고 자료를 참조하시길 바랍니다.
참고자료
- https://terry1213.github.io/flutter/flutter-decoding-flutter-shrinkwrap-vs-slivers//
- https://www.fluttercampus.com/guide/136/how-to-solve-vertical-viewport-was-given-unbounded-height-error-on-flutter/#solution-one-use-shrinkwrap-true-on-listvew-widget/
- https://terry1213.github.io/flutter/flutter-vertical-viewport-was-given-unbounded-height//
Github
