[Flutter] CustomScrollView 스크롤 만들기, Sliver

조형민·2022년 2월 10일
0

Flutter

목록 보기
1/9

column으로는 스크롤 바가 생기지 않으므로 CustomScrollView를 사용

CustomScrollView(
  slivers: [
    SliverGrid(),
    SliverBoxAdapter(),
    SliverList(),
    SliverAppBar(),
  ],
),
// 사용 예시
        body: CustomScrollView(
          slivers: [
            SliverToBoxAdapter(
              child: ProfileHeader(),
            ),
            SliverGrid(
                delegate: SliverChildBuilderDelegate(
                    (c,i) => Container(
                      child: Image.network(context.watch<Store1>().profileImage[i]),
                    ),
                  childCount: context.watch<Store1>().profileImage.length,
                ),
                gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 3),
            )
          ],
        )
// childCount : 생성될 그리드 갯수
// SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 3) : 한 줄에 보여줄 그리드 갯수 3개

※ 참고로 SliverGrid 이런건 데이터가 늦게 도착해도 봐줍니다.
※ if문으로 "데이터 없으면 로딩중 위젯 보여주세요~" 적을 필요 없음

profile
기획하다가 Flutter 배우는 늦깎이 코린이

0개의 댓글