Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | ||||||
2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 | 17 | 18 | 19 | 20 | 21 | 22 |
23 | 24 | 25 | 26 | 27 | 28 | 29 |
30 |
Tags
- javascript
- backjoon
- CS
- 스프링부트
- JPA
- 데이터
- 자료구조
- Oracle
- 스프링
- 자바스크립트
- springboot
- Spring Security
- Flutter
- 프로그래머스
- 플러터
- Java
- 네트워크
- spring
- 백준
- postgresql
- 시큐리티
- 리눅스
- CS지식
- 파이썬
- 자바
- 스프링 부트 쇼핑몰 프로젝트 with JPA
- DB
- baekjoon
- 데이터베이스
- python
Archives
- Today
- Total
Jin's Dev Story
[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 ))
],
)
'Web & Android > Flutter' 카테고리의 다른 글
[Flutter] 반응형 스크린 사이즈 (0) | 2023.09.23 |
---|---|
[Flutter] notification 알림 주는 법 (1) | 2023.09.23 |
[Flutter] Provider : store 여러개 & GET 요청 (0) | 2023.09.23 |
[Flutter] 친구 팔로우 하기 (0) | 2023.09.23 |
[Flutter] Provider : 3-step 다른 방법 (0) | 2023.09.23 |