text/image overflow 해결

문제 : Row 와 Column 으로 작업할 때 위젯 위에 자주 보이는 검은색과 노란색 줄무늬 오버레이가 생긴다.

1. 왜 overflow가 발생할까?

Flutter에서 위젯의 크기는 상위 항목에서 가져온 제약 조건에 따라 결정된다. 이러한 제약 조건은 너비와 높이로 구성되며 각각 최소값과 최대값이 있습니다. 자식 위젯은 이러한 제약 조건을 받아 원하는 크기에 맞게 가져온다. 그러나 자식에게 어떤 제약도 부과하지 않는 위젯이 있다. 바로 Row 및 Column 위젯의 경우다. 이로 인해 자식이 행 또는 열의 차원을 초과하여 이 오버플로 오류가 발생하는 상황이 발생할 수 있다.

우린 외부 소스 크기를 바꿀 수 없다. 레이아웃이 이에 반응하는 방식만 변경할 수 있다. 어쨌든 우리는 Flutter에게 첫 번째 열(이미지)이 너비와 높이가 56픽셀인 상태로 유지될 수 있지만 텍스트는 사용 가능한 공간만 사용하도록 알려야 한다고 말하고 싶다.

Row일 때의 Overflow => Expanded으로 감싼다.
Column일 때의 Overflow => Column 대신 ListView 사용, SingleChildScrollView로 감싼다.

2. GridView 내에서 플러터 열의 하단 오버플로를 방지하는 방법

Expanded(
          child: GridView.builder(
            itemCount: viewModel.movies.length,
            gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
              crossAxisCount: 2,
              childAspectRatio: 2 / 3.5,
            ),
            itemBuilder: (BuildContext context, int index) {
              return Column(
                children: [
                  GestureDetector(
                    onTap: () {
                      Navigator.push(
                        context,
                        MaterialPageRoute(
                            builder: (context) =>
                                MovieDetailScreen(viewModel.movies[index])),
                      );
                    },
                    child: ClipRRect(
                      borderRadius: BorderRadius.circular(20),
                      child: Image.network(
                        'https://image.tmdb.org/t/p/w500${viewModel.movies[index].posterPath}',
                        fit: BoxFit.cover,
                      ),
                    ),
                  ),
                  Text(
                    viewModel.movies[index].title,
                    style: const TextStyle(fontSize: 20),
                  ),
                ],
              );
            },
          ),
        ),

해결

첫번째 시도) Column -> ListView : overflow는 나지 않았지만 스크롤이 내려가지 않았다.
두번째 시도) Column -> SingleChildScrollView : children을 child로 바꿔야 해서 사용 불가.
세번째 시도) ClipRRect를 Expanded로 감쌌다. 변화가 없다.
😁😁😁 Column을 SingleChildScrollView로 감쌌다. 그러니까 해결!!!