한 화면에 여러개의 그리드뷰 사용하기

앱을 만드는 과정에서 나의 냉장고 안에 있는 아이템들을 각 냉장고에 들어 있는 아이템들끼리 그리드로 보여주고 싶었다.

그러다 보니 여러개의 그리드뷰를 사용하게 되었는데, GridView.builder는 기본적으로 스크롤이 적용되어서 여러개의 그리드뷰가 각각 스크롤되고 전체적인 화면은 스크롤되지 않았다.

Text('그리드뷰1'),
          Expanded(
            child: GridView.builder(
              gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                crossAxisCount: 3,
                mainAxisSpacing: 10,
                crossAxisSpacing: 10,
              ),
              itemCount: 8,
              itemBuilder: (context, index) {
                return Image.network(
                  'https://cdn.pixabay.com/photo/2016/02/13/12/26/aurora-1197753_150.jpg',
                  fit: BoxFit.cover,
                );
              },
            ),
          ), // 코드 반복

(실제 코드에서는 빌더에 내가 넣은 냉장고의 아이템이 나오도록 해뒀지만 우선 이미지를 리턴할 수 있도록 해뒀다.)

각각의 그리드뷰가 스크롤되지 않고 전체적으로 스크롤되게 할 수 있게 하기 위해서 그리드뷰가 담긴 Column을 SingleChildScrollView로 감싸 전체 화면이 스크롤될 수 있도록 하고,
GridView.builder 안에

   shrinkWrap: true,
   physics : const NeverScrollableScrollPhysics(),

를 추가하여 ScrollView의 크기를 채우기 위해 확장되지 않게 하고 스크롤되지 않게 하여 가려지는 곳 없이 그리드 뷰의 모든 항목이 보이게 한다.

이렇게 바꿔주는 경우에는 GridView.builder를 감싸는 Expanded를 지워줘야한다.