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

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

 

GridView

 

오늘 살펴볼 부분은 GridView입니다. 지난 시간에는 ListView에 관해서 살펴 보았는데, ListView와 비슷하지만 2차원 배열 형태로 보여주는 위젯입니다. 

 

GridView 적용

GridView에는 몇 가지 알고 적용해야 할 속성이 있는데 그 중 하나가 gridDelegate입니다. gridDelegate는 GridView의 children 위젯들의 레이아웃을 조정하는 역할을 하며 여기에서는 SilverGridDelegateWithFixedCrossAxisCount를 활용하여 crossAxisCount (가로축 카운트) 2개, crossAxisSpacing(가로축 사이 간격) 15.0, mainAxisSpacing (세로축 사이 간격)을 12.0로 설정하였습니다. 이것만 지정하여도 위처럼 보여주는데 충분합니다. 그리고 필요한 위젯들을 children에 배치하면 됩니다. 

 

postContainer의 높이 수정

postContainer의 높이를 Grid 간격에 맞게 살짝 수정해주었습니다. GridView는 ListView와 원리가 비슷하기 때문에 ListView를 이해했다면 GridView 위젯도 어렵지 않게 적용하실 수 있습니다. 다만 GridView에서 쓰이는 속성 및 기능들을 몇 가지 알고 계시면 유용하게 레이아웃 조정이 가능합니다. 다음 시간에는 GridView.builder에 대하여 살펴보도록 하겠습니다. 감사합니다.

 

[전체 소스 코드]

 

[유튜브 강좌 영상]

 

https://youtu.be/Y673Ofh-b2Y