[Flutter] GridView, GridView.builder [맥북💻]

 목차

1. GridView
   1. GridView 란?
   2. GridView의 대표 요소
      1. gridDelegate
      2. SliverGridDelegateWithFixedCrossAxisCount()
   3. GridView 예시
2. GridView.builder
   1. GridView.builder 에시
3. 사용자 위젯으로 빼는 방법 (2가지)
   1. Extract flutter widget
   2. Extract Method

 

 

 

✅ GridView

 

1️⃣ GridView 란?

• 격자(grid) 형태로 아이템을 정렬하는 스크롤 위젯
  *ListView 와 동일한 스크롤 위젯의 한 종류

 

 

2️⃣ GridView의 대표 요소

1. gridDelegate : 그리드를 컨트롤 하는 요소
2. SliverGridDelegateWithFixedCrossAxisCount() : 그리드 배치 규칙을 정해주는 클래스
   1. crossAxisCount : 그리드의 열(Column) 개수
   2. crossAxisSpacing : 열(Column) 사이 간격
   3. mainAxisSpacing : 행(Row) 사이 간격

 

 

3️⃣ GridView 예시

• 기본 형태

body: GridView(
  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
      crossAxisCount: 2,  // 그리드의 열(Column) 개수
      crossAxisSpacing: 15, // 열(Column)간 간격
      mainAxisSpacing: 12,  // 행(Row)간 간격
  ),

 

• 추가 작업

 

 

 

✅ GridView.builder

 

1️⃣ GridView.builer 예시
** ListView.builder 와 동일한 형태

1. 배열 선언
2. GridView.builder 사용
3. 사용자 위젯으로 선언한 타입에 맞춰 return

1. 배열 선언

2. GridView.builder 사용 / 3. 사용자 위젯으로 선언한 타입에 맞춰 return

4. 정상 작동 확인

 

 

 

✅ 사용자 위젯으로 빼는 방법 (2가지)

 

1️⃣ Extract Flutter Widget

2️⃣ Extract Method