[Flutter] ListView 스크롤 문제와 A RenderFlex overflowed by pixels on the bottom. 와 같은 픽셀이 초과 현상

Flutter에서 다양한 항목을 정리 나열하여 보여주는 ListView라는 위젯이 존재합니다. 이 ListView은 작성도 간단하고 사용도 편리하여 많이들 사용합니다. 하지만 이 ListView를 사용할 때 리스트들은 잘 나오지만 스크롤이 되지 않고, pixel이 초과 되었다는 error시 어떻게 처리하는지 알아보도록 하겠습니다.

발생 현상

저같은 경우에는 Colum 안에 Container 2개와 ListView.builder를 포함한뒤 ListView.builder에 여러 항목을 추가하여 ListView 부분을 스크롤 하도록 작업을 하였습니다. 하지만 UI는 잘 그려졌지만 스크롤은 동작하지 않고  pixel이 초과 되었다 error를 확인 할 수 있었습니다.

원인

위와 같은 현상이 발생한 원인은 아래와 같습니다.

Column 위젯 안에 ListView.builder를 직접 사용할 때 발생하는 렌더링 오류는 ListView가 기본적으로 무한의 크기를 가질 수 있기 때문에, Column이 제공하는 무한 공간 내에서 크기를 결정할 수 없기 때문입니다. 

이를 해결하는 방법 중 하나는 ListView.builder를 Expanded 또는 Flexible 위젯으로 감싸서 ListView에게 사용할 수 있는 공간을 명시적으로 제공하는 것입니다.

해결방안

이를 해결하는 방법 중 하나는 ListView.builder를 Expanded 또는 Flexible 위젯으로 감싸서 ListView에게 사용할 수 있는 공간을 명시적으로 제공하는 것입니다. Expanded 또는 Flexible 위젯은 자식 위젯이 차지할 수 있는 공간을 Column, Row, Flex와 같은 플렉스박스 레이아웃 내에서 확장하거나 유연하게 조정할 수 있게 해줍니다. 이 방법을 사용하면 ListView.builder가 스크롤 가능한 영역 내에서 올바르게 작동하게 됩니다.

Column(
  children: <Widget>[
    Container(
      // 첫 번째 컨테이너
      height: 100, // 예시로 주어진 높이
      color: Colors.red,
    ),
    Container(
      // 두 번째 컨테이너
      height: 100, // 예시로 주어진 높이
      color: Colors.green,
    ),
    Expanded(
      // ListView.builder를 Expanded로 감싸서 나머지 공간을 모두 사용하게 함
      child: ListView.builder(
        itemCount: 20, // 항목의 수
        itemBuilder: (context, index) {
          return ListTile(
            title: Text('항목 $index'),
          );
        },
      ),
    ),
  ],
)

위 예제에서는 두 개의 Container 위젯 다음에 Expanded 위젯을 사용하여 ListView.builder를 포함하고 있습니다. Expanded가 ListView.builder를 감싸면서, ListView가 Column 내에서 남은 공간을 모두 차지하도록 합니다. 이로써 ListView.builder 내부의 항목들을 스크롤할 수 있게 됩니다.