[Flutter] Column안에 ListView.builder 를 내용만큼 height 주기

Column안에 여러 개의 ListView.builder를 사용해보려 하였더니, 아래와 같은 오류가 발생했다.

오류 내용

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 this widget 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 a Column or Wrap instead. Otherwise, consider using a CustomScrollView to concatenate arbitrary slivers into a single scrollable.)

ListView.builder의 높이를 알 수 없어서 발생하는 오류였다.

위 오류를 해결 할 수 있는 방법 3가지가 있다.

해결 방안

1. shrinkWrap: true 설정
   이렇게 하면 내부 컨텐츠에 맞춰서 높이가 결정된다. 하지만 내부 컨텐츠가 화면 사이즈 보다 커지면, 오버플로우가 발생하게 된다. 그럴 때, ListView.builder겉에 SingleChildScrollView를 사용해주면 오버플로우 해결이 가능하다.

 return ListView.builder(
        shrinkWrap: true,
        itemCount: 3,
        itemBuilder: ((context, index) {
          return Text('1111');
        }));

2. height 지정
   직접 높이를 지정해주는 방법으로, 정해진 높이 크기 만큼 ListView.builder가 표시된다.
   이 방법은 기기마다 높이 차이가 있을 수 있으므로 지양하는 것이 좋다.

return SizedBox(
	height: 200,
	child: ListView.builder(
        shrinkWrap: true,
        itemCount: 3,
        itemBuilder: ((context, index) {
          return Text('1111');
        }),
   	  ),
);

3. 남은 공간만큼 높이를 지정하는 Expanded()
   남은 공간을 ListView.builder가 사용할 수 있도록 하는 Expanded() 위젯을 사용한다.
   이 위젯은 flex: 1 을 기본으로 갖고 있기 때문에, 리스트 아이템의 수가 높이보다 적으면 여백이 생기기 때문에 잘 사용되지 않는 방법이다.

return Expanded(
	child: ListView.builder(
        shrinkWrap: true,
        itemCount: 3,
        itemBuilder: ((context, index) {
          return Text('1111');
        }),
   	  ),
);

참고 문서 : https://terry1213.github.io/flutter/flutter-vertical-viewport-was-given-unbounded-height/