[Flutter] GridView, CustomScrollView 프로필 페이지 만들기

GridView

• 격자 레이아웃

• grid가 몇개 생성될지 미리 알고 있으면 GridView.count 쓰고
• grid가 몇개 생성될지 아직 모르겠으면 GridView.builder

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

• itemCount : 개수
• gridDelegate : 가로로 보여질 개수

예제

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

 

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

CustomScrollView(
  slivers: [ 위젯1, 위젯2, 위젯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) ],
  ),
),

 

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

• child 안에 원하는 위젯 넣으면 됨

SliverToBoxAdapter(
              child: ProfileHeader(),
            ),

 

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

• 맨 위 헤더 영역을 만들어줌
• 스크롤 시작되면 뒷 배경 사라짐
• pinned:true (상단고정옵션)
• floating:true (위로 스크롤시 등장여부)
• expandedHeight: 300 (높이 설정)
• flexibleSpace: FlexibleSpaceBar() (앱바에 넣을 내용)

⇒ 참고

FlexibleSpaceBar class - material library - Dart API

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

• 위엔 Container, 아래엔 GridView
• 이 전체를 묶어서 스크롤바를 만들고 싶으면 CustomScrollView 안에 Container + GridView 넣으면 끝

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