Flutter GridView(그리드뷰) 사용 방법

GridView는 ListView와 유사한 기능으로, 화면에 grid 형태로 위젯을 배치하고

여러 장의 사진이나 쇼핑몰 아이템을 보여줄 페이지에서 주로 사용합니다

Sliver delegate 옵션을 사용하면 그리드 형태를 유지하면서 child 위젯의 크기를 자동으로 조정해줍니다.

 

GridView.builder(
  shrinkWrap: true, // child 위젯의 크기를 정해주지 않은 경우 true로 지정해야됨
  itemCount: 6, //item 개수
  gridDelegate:
      SliverGridDelegateWithFixedCrossAxisCount(
    crossAxisCount:3, //1 개의 행에 보여줄 item 개수
    childAspectRatio: 1 / 1, //item 의 가로 세로의 비율
    mainAxisSpacing: 10, //수평 Padding
    crossAxisSpacing: 10, //수직 Padding
  ),
  itemBuilder: (BuildContext context, index) {
    return Container(
      color: Colors.yellow,
      child: Text('$index'),
    );
  },
),

 

실행 결과