Flutter - GridView 사용하기

GridView는 ListView와 비슷하지만 2차원 배열 형태로 보여주는 위젯이다.

GridView에서 몇가지 알고 적용해야 하는 속성이 있는데 그 중 하나가 gridDelegate다.
girdDelegatesms GridView의 children 위젯들의 레이아웃을 조정하는 역할을 하며 ,

여기에서는 SilverGridDelegateWithFixedCrossAxisCount를 활용하여 
crossAxisCount (가로축 카운트), crossAxisSpacing(가로축 사이 간격), mainAxisSpacing(세로축 사이 간격)을 설정하였다.

 

body: GridView(
        gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: 2,
          crossAxisSpacing: 15.0,
          mainAxisSpacing: 12.0,
        ),
        children: [
          postContainer(number: "1",colorData: Colors.amber),
          postContainer(number: "2",colorData: Colors.green),
          postContainer(number: "3",colorData: Colors.blue),
          postContainer(number: "4",colorData: Colors.grey), 
        ],
      ),

Widget postContainer({String number = "0", Color colorData = Colors.amber}) {
    return Container(
          height: 200,
          color: colorData,
          child: Center(child: Text("Box $number")),
        );
  }

 

해당 글의 전체 코드 : https://github.com/land-waters/flutter-study/blob/chap07/flutter_application_1/lib/main.dart

flutter-study/flutter_application_1/lib/main.dart at chap07 · land-waters/flutter-study