Flutter: 그리드뷰(GridView) Bottom overflowed와 스크롤 움직이지 않는 현상 해결

          Container(
              child: GridView.builder(
                  itemCount: 30,
                  shrinkWrap: true,
                  gridDelegate: new SliverGridDelegateWithFixedCrossAxisCount(
                      crossAxisCount: 3,
                  ),
                  itemBuilder: (BuildContext context, int index) {
                    return Center(
                        child: _buildImageBoxes()
                    );
                  }
              )

 

프로필 내용의 아래 부분에 넣은 GridView가 남는 공간만 차지했으면 좋겠는데, 계속 내용물의 크기만큼 그려지려고 해서 Bottom overflowed By 886 Pixels 라는 에러가 보였다. 어제 저녁 내내 고민하다가 Android Studio에서 다음과 같은 에러 사유를 발견했다.

이 에러는 스크롤 할 수 있는 리스트뷰나 그리드뷰가 또 스크롤 가능한 위젯 안에 들어있을 때 발생한다고 되어 있어서 근본적인 문제가 그리드뷰를 감싸고 있는 뷰에 있다는 걸 알아냈다.

안드로이드 개발할 때를 생각해 보니 스크롤이 안되던 게 이해가 됐다.

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 instead. Otherwise, consider using the "shrinkWrap" property (or a ShrinkWrappingViewport) to size the height of the viewport to the sum of the heights of its children.

 

          Expanded(
              child: GridView.builder(
                  itemCount: 30,
                  shrinkWrap: true,
                  gridDelegate: new SliverGridDelegateWithFixedCrossAxisCount(
                      crossAxisCount: 3,
                  ),
                  itemBuilder: (BuildContext context, int index) {
                    return Center(
                        child: _buildImageBoxes()
                    );
                  }
              )
          ),

Container로 감싸던 부분을 Expanded로 감싸주니 GridView가 내가 원하던 대로 프로필 아래 부분만 차지했고, 스크롤도 가능해졌다.

Flutter에 익숙한 사람들은 금방 생각해 내겠지만 나같은 초보들은 시간 낭비를 꽤 할 것 같은 부분이라 올려둔다.

 

이 포스트가 도움이 되었다면 하트를 눌러주세요~!