[Flutter] GridView, CustomScrollView

GridView로 만드는 격자 레이아웃

GridView.builder(
  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount( crossAxisCount: 2 ),
  itemCount: list자료.length,
  itemBuilder: (c, i) {
    return Container(color : Colors.grey);
  }
),

• ListView와 똑같이 자동으로 스크롤바가 생기는 GridView
• grid가 몇개 생성될지 미리 알고 있으면 GridView.count 쓰고
• grid가 몇개 생성될지 아직 모르겠으면 GridView.builder 쓰면 된다
• ListView, GridView를 쓰는데 상단엔 다른 레이아웃이 필요해서 Column 쓰면 되는데 그럼 ListView, GridView 부분만 스크롤바가 생긴다.
• 상단고정효과를 주고 싶으면 이렇게 하면 되겠지만 여러 요소를 합쳐서 전부 스크롤바를 생성하고 싶으면CustomScrollView() 위젯을 쓰고 그 안에 여러가지 것들을 다 넣으면 된다

스크롤바 만들어주는 CustomScrollView()

CustomScrollView(
  slivers: [ 위젯1, 위젯2, 위젯3 ]
)

• Column()이랑 같은 용도
• 스크롤바가 생기지만 약간 문법이 다르다
• 위처럼 쓰면 되는데 저러면 위젯 3개를 세로로 보여주는데 큰 스크롤바를 생성해 준다
• 하지만 기존처럼 아무 위젯이나 안에 넣을 수는 없고 정해진 위젯들만 넣을 숭 ㅣㅆ다.

스크롤 영역 안에 ListView 만들고 싶으면 SliverList()

SliverList(
  delegate: SliverChildListDelegate(
    [ Text('리스트'), Text('리스트'), Text('리스트') ]
  )
),

CustomScrollView안에 GridView 만들고 싶으면 SliverGrid()

SliverGrid(
  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2),
  delegate: SliverChildListDelegate(
    [ Container(Colors.blue), Container(Colors.green), Container(Colors.yellow) ],
  ),
),

• GridView.builder() 처럼 쓰고 싶으면 delegate: SliverChildBuilderDelegate()

SliverGrid(
  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2),
  delegate: SliverChildBuilderDelegate(
			(c,i) => Container(color: Colors.grey,
       child: Image.network(context.watch<Store1>().profileImage[i].toString()),),
       childCount:context.watch<Store1>().profileImage.length,
),

CustomScrollView 안에 박스 넣고 싶으면 SliverToBoxAdapter()

코딩애플

• 스크롤 영역 안에 Container 하나 만들고 싶으면 쓴다
• Child 안에 원하는 위젯을 넣으면 된다

CustomScrollView 안에 이쁜 헤더 만들고 싶으면 SliverAppBar()

SliverAppBar는 맨 위 헤더 영역을 만들어준다 근데 스크롤이 시작되면 뒷 배경이 사라지므로 그런거 만들고 싶으면 쓰면 된다.

• pinned:true (상단고정옵션)
• floating:true (위로 스크롤시 등장여부)
• expandedHeight: 300 (높이 설정)
• flexibleSpace: FlexibleSpaceBar() (앱바에 넣을 내용)

자세한건

https://api.flutter.dev/flutter/material/FlexibleSpaceBar-class.html

 

그래서 인스타그램 프로필페이지 같은 레이아웃은

• 위엔 Container, 아래엔 GridView
• 이 전체를 묶어서 스크롤바를 만들고 싶으면 CustomScrollView 안에 Container + GridView 넣으면 끝
• 하지만 CustomScrollView 안에선 위젯들 이름이 다른데
• 그냥 박스 넣을 땐 SliverToBoxAdapter()
• GridView 넣을 땐 SliverGrid()

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