[Flutter] body 전체 스크롤(SingleChildScrollView) 시 발생하는 "Exception caught by rendering library" 오류 해결

Flutter 개발을 하던 중, 여러 위젯들과 ListView.builder로 구성된 body를 전체스크롤이 가능하도록 수정하고싶어 body 전체를 SingleChildScrollView로 감싸준 후 실행을 했다.

...
body: SingleChildScrollView(
    child: Column(
        childeren: [
            Container: (
            ...
            ),
            Expanded(
                child: ListView.builder(
                    itemBuilder: (context, i) {
                    ...
                    },
                ),
            ),
        ],
    ),
)

실행을 해보니 Exception caught by rendering library 오류가 발생했다.

해당 오류는 ListView(SingleChildScrollView) 내부에 ListView를 중첩으로 사용했을 시 ListView.builder의 크기가 정해져 있지 않기 때문에 발생한다고 한다.

 

시도1.

Column 위젯은 기본적으로 세로 방향으로 확장 가능한 크기를 가진다. Column 위젯을 SingleChildScrollView 위젯의 자식으로 사용함으로 인해 오류가 발생했을 것이라고 추측했다.

이를 해결하기 위해 크기 제한을 설정할 수 있는 Container 위젯으로 Column 위젯을 감싼 후 height 제약 조건을 설정해주었다.

결과 : 동일 오류 발생

 

시도2. (해결)

이번에는 SingleChildScrollView 위젯의 자식에 있는 ListView.builder에 집중을 해보았다. 자식 ListView 자체가 크기를 확보할 수 있는만큼 확보함으로 인해 unbounded height가 되었을것이라고 생각했다.

shrinkWrap: true 를 설정해줌으로서 child 크기만큼만 크기를 할당하도록 설정했다.

추가로, 부모 SingleChildScrollView 와 자식 ListView의 스크롤이 겹치는 현상이 발생하지 않도록 자식 ListView이 스크롤 되지않게 해주는 NeverScrollableScrollPhysics를 설정해줬다.

결과 : 정상 작동 (자식 ListView에 방해되지않고 전체 스크롤 기능 작동)

//수정 코드(정상 작동)
...
body: SingleChildScrollView(
    child: Container(
        child: Column(
            childeren: [
                Container: (
                ...
                ),
                ListView.builder(
                    shrinkWrap: true,
                    physics: NeverScrollableScrollPhysics(),
                    itemBuilder: (context, i) {
                    ...
                    },
                ),
            ],
        ),
    ),
)