[Flutter] Sliver_01

Sliver에 관한 위젯들이 참 많은데 이번에는 그 중 SliverGrid에 대해 메모.
SliverGrid는 엑셀 셀 처럼 격자로 된 리스트를 만든다.

1. CustomScrollView 안에서 SliverGrid를 사용한다.
2. delegate로 SliverChildBuilderDelegate를 사용한다.
3. Grid의 레이아웃을 설정하는 gridDelegate는 SliverGridDelegateWithMaxCrossAxisExtent를 사용한다.

실제로 코드를 작성해 보면,

CustomScrollView(
      slivers: [
      	SliverGrid(
          delegate: SliverChildBuilderDelegate(
            childCount: 30,
            (context, index) => Container(
              color: Colors.cyanAccent[100 * (index % 9)],
              child: Align(
                alignment: Alignment.center,
                child: Text("Item $index"),
              ),
            ),
          ),
          gridDelegate: const SliverGridDelegateWithMaxCrossAxisExtent(
            maxCrossAxisExtent: 100,
            mainAxisExtent: Sizes.size20,
            mainAxisSpacing: Sizes.size20,
            // childAspectRatio: 1,
          ),
        ),

childCount만큼 Grid를 만든다.

maxCrossAxisExtent: 각 Grid의 크기 (가로)
mainAxisExtent: 각 Grid의 크기 (세로)
mainAxisSpacing: 각 Grid 간의 위아래 사이 공간
childAspectRatio: 가로 세로의 비율