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

 목차

1. ListView
   1. 사용 예시 1
   2. 사용 예시 2 (사용자 위젯 활용)
2. ListView.builder
   1. 사용 예시

 

 

 

✅ ListView

• 여러 가지 위젯을 가로 또는 세로로 나열할 수 있게 하는 위젯
• 스크롤 기능이 자동으로 적용
• 그 외 추가 기능
  
  • ListView() : 기본 리스트 (children을 직접 나열)
  • ListView.builder() : 반복되는 아이템을 효율적으로 생성
  • ListView.separated() : 아이템 사이에 Divider 같은 구분선 추가 가능
  • ListView.custom() : 더 복잡한 경우 직접 SliverDelegate 정의

 

 

1️⃣ 사용 예시 1

1. ListView() 위젯 생성
2. children: [] 을 통해 여러 개의 Container 박스 생성
3. 2개의 Container 박스를 하나의 짝으로 만들어서 여러 박스를 나열

 

 

 

2️⃣ 사용 예시 2 (사용자 위젯 활용)

1. 사용자 위젯으로 위에서 표현한 두 개의 Container 박스 생성
2. 사용자 위젯을 body 에 적용
3. body에서 사용한 사용자 위젯에 파람값을 넣어 title과 colorData를 원하는 대로 수정
   (** body 에 적용한 사용자 위젯 상단에 'scrollDirection' 을 사용하여 Container 박스들을 가로로 정렬할 수 도 있다)

사용자 위젯을 사용하여 ListView 데이터 나열

 

'scrollDirection' 을 사용한 Container 박스 가로 정렬

 

 

 

✅ ListView.builder

• 반복되는 데이터를 인덱스를 활용하여 사용
• 구성
  • itemCount : 리스트에 표시할 아이템 개수
  • itemBuilder : 각 인덱스마다 생성할 위젯을 정의 (ex. (BuildContext context, int index) { ... } )

 

 

1️⃣ 사용 예시 

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

 

1. 배열 선언

2. ListView.builder 사용

2-1. 빨간줄에 마우스를 대면 타입이 맞지 않다는 알림 확인 가능

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

4. 정상 작동 확인