[009] 플러터 (Flutter) 배우기 - GridView.builder (Grid 만들기)

안녕하세요~ totally 개발자입니다.

 

GridView.builder

 

저번 시간에 GridView 위젯에 대해서 알아보았고 ListView.builder처럼 GridView도 GridView.builder도 효율적으로 코드를 구성할 수 있습니다. 

 

기존 GridView 모습

기존 GridView로 코드를 구성했던 모습입니다. 53번째부터 60번째 줄을 보면 postContainer 메소드가 8번 반복되고 있는 것을 알 수 있습니다. 이것을 GridView.builder를 이용하면 코드를 간소화할 수 있습니다. 먼저 GridView.builder를 위해서는 ListView.builder와 동일하게 배열을 사용하기 때문에 여기서도 미리 선언하겠습니다.

 

배열 선언

위에 선언한 것처럼 postList를 만들어주었습니다. 

 

GridView.builder 적용 모습

GridView.builder를 적용한 모습입니다. gridDelegate는 동일하게 적용하였고, 72번째 줄에 itemCount 부분에 postList의 길이를 넣어주고, 73번째 줄에 itemBuilder를 활용하여 index를 기반으로 postList 전체를 출력하도록 합니다. 코드가 상당히 간결해진 것을 알 수 있습니다. GridView.builder를 위해서 필요한 것은 gridDelegate + itemCount + itemBuilder이며 이미 데이터가 있는 리스트가 필요합니다. 다음 시간에는 스크롤을 가능하게 만들어주는 SingleChildScrollView 위젯에 대해 살펴보도록 하겠습니다. 감사합니다.

 

[전체 소스 코드]

 

[유튜브 강좌 영상]

 

https://youtu.be/NOTuBHVo12g