Skill/Flutter

[Flutter 오류] GridView 자식 위젯의 overflow 발생

2023. 6. 29. 16:29

목차

1. 문제 발생
2. 해결 방안
3. 해결 완료

1. 문제 발생

Shazam의 기본 페이지를 따라 만드는 도중 GridView 자식 위젯의 bottom overflow 발생...

자식 위젯인 Container에서 height 설정, GridView의 shrinkWrap 설정 등 최대한 아는 다양한 방법을 시도해봤지만 실패...

2. 해결 방안

Expanded(
      child: GridView.count(
        // crossAxisCount is the number of columns
        crossAxisCount: 2,

		// <<해결 방안>>
        childAspectRatio: 0.75, // 자식의 비율 설정...

        // This creates two columns with two items in each column
        children: List.generate(songs.length, (index) {

그러다 찾은 해결 방안은 GridView.count의 설정인 childAspectRatio의 값을 설정해주는 것

childAspectRatio 옵션은 말 그대로 GridView의 자식 위젯의 비율을 정하는 옵션입니다.

저의 경우 자식 위젯이 bottom overflow가 발생했음으로 세로방향의 길이를 늘려야했습니다. 따라서 해당 옵션의 값을 1보다 작게 줘 길이를 세로로 늘렸습니다.

정확히는 childAspectRatio : 가로 / 세로, 의 형태를 갖춥니다.

보다 자세한 설명은 아래의 블로그를 참고하면 좋습니다.

Flutter 플러터에서 GridView 위젯의 사용자 정의 높이를 설정하는 방법은 무엇인가요?, How to set Custom

질문 Container GridView의 높이를 지정한 후에도 내 코드는 정사각형 위젯을 생성합니다. class MyHomePage extends StatefulWidget { MyHomePage({Key key, this.title}) : super(key: key); final String title; @override _MyHomePageState c

stcodelab.com

3. 해결 완료

overflow 오류가 해결된 모습입니다.

Info

Archive

기록하고,
공유합니다.

개발자로서,
기술과 일상의 접점을 기록합니다.

글 보러 가기