[Flutter] SingleChildScrollView 위젯 사용 주의사항 (ListView 관련 오류)

SingleChildScrollView 위젯은 스크롤을 하나로 만들어주는 효과가 있습니다.

위젯의 Bottom overflowed 메시지를 해결하기 위해 많이 사용합니다.

 

하지만 ListView를 같이 사용할 때 아래와 같이 에러가 나오는 경우가 많이 있습니다.

 

에러내용

Vertical viewport was given unbounded height.

Failed assertion: line 1927 pos 12: 'hasSize'

RenderBox was not laid out: RenderViewport#cc258 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE

 

이유는 전체적으로 하나의 스크롤이 있고 ListView에도 스크롤이 있으므로 모순되는 상황이 발생하기 때문입니다.

 

2가지 해결법이 있습니다.

 

1. ListView에 고정 높이를 지정

고정 높이를 지정하는 방법도 여러가지 있습니다.

아래는 간단히 SizedBox로 감싸는 방법입니다.

고정된 영역만 스크롤이 별도로 동작합니다.

SizedBox(
  height: 500,
      child: ListView(),
)

 

2. ListView에 스크롤을 제거하는 방법

아래와 같이 2줄을 추가해주시면 됩니다.

ListView에 스크롤이 없으므로 하나의 스크롤로 동작하여 오류가 해결됩니다.

ListView(
  shrinkWrap: true,
  physics: const NeverScrollableScrollPhysics(),

 

읽어 주셔서 감사합니다.