GridView

body: GridView.builder(
         gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2),
         itemBuilder: (c, i) {return Container(color: Colors.grey,);},
         itemCount: 3,
     )

gridview 사용법 listView 랑 비슷함.

gridDelegate 얘는 가로로 몇개 보여줄 지 설정

body: CustomScrollView(
       slivers: [
         Container(), 
         GridView.builder(
           gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2),
           itemBuilder: (c, i) {return Container(color: Colors.grey,);},
           itemCount: 3,
         )
       ],
     )

CustomScorllView 애를 쓰는 이유는 Container 와 GridView 를 두개를 만든다고 할 때 GridView는 스크롤바가 생기는데 Container 에는 스크롤바가 안 생김 (상단 고정)

그러기 싫으니 CustomScorllView 를 사용하는 것임

그리고 기존에 Column에서는 children을 사용했으나 여기서는 slivers를 사용함.

slivers 안에는 평소에 쓰던 위젯을 못쓴다고 함.

slivers 안에는

• 격자 넣고 싶으면 SliverGrid()
• ListView 넣고 싶으면 SliverList()
• 박스 넣고 싶으면 SliverToBoxAdapter()
• 이쁜 헤더는 SliverAppBar()

참고로 sliver 라는 뜻은 조각이라는 뜻을 가지고 있음.

최종 코드

body: CustomScrollView(
       slivers: [
         SliverToBoxAdapter(
           child: ProfileHeader(),
         ),
         SliverGrid(
             delegate: SliverChildBuilderDelegate(
                 (c, i)=> Container(color: Colors.grey),
               childCount: 13,
             ),
             gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 3)
         ),
       ],
     )

숙제

사진 6개 격자로 띄워주기!

SliverGrid(
    delegate: SliverChildBuilderDelegate(
        (c, i)=> Image.network(context.watch<Store1>().profileImage[i].toString()),
      childCount: context.watch<Store1>().profileImage.length,
    ),
    gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 3)
),

위와 같이 하면 정상적으로 나오는 것을 볼 수 있다.