ListView.builder

ListView.builder는 Flutter에서 대량의 아이템을 효율적으로 표시할 때 사용하는 위젯입니다. 특히, 동적으로 생성되는 리스트를 처리할 때 유용합니다. 이 섹션에서는 ListView.builder의 사용법을 코드와 함께 상세히 설명하겠습니다.

---

ListView.builder란?

ListView.builder는 화면에 표시되는 아이템만 생성하고, 스크롤할 때 필요한 아이템을 동적으로 생성합니다. 이를 통해 성능을 최적화할 수 있습니다.
대량의 데이터를 렌더링할 때 메모리와 성능을 효과적으로 관리할 수 있습니다.

---

코드 분석

예제 코드 (HomeScreen에서 사용된 부분):

ListView.builder(
  itemCount: schedules.containsKey(selectedDay)
      ? schedules[selectedDay]!.length
      : 0, // 아이템의 개수
  itemBuilder: (BuildContext context, int index) {
    // 선택된 날짜의 일정 리스트 가져오기
    final selectedSchedules = schedules[selectedDay]!;
    final scheduleModel = selectedSchedules[index];

    // 각 일정 데이터를 ScheduleCard 위젯으로 변환
    return ScheduleCard(
      startTime: scheduleModel.startTime,
      endTime: scheduleModel.endTime,
      color: Color(
        int.parse(
          'FF${scheduleModel.color}', // 16진수 색상 문자열을 Color로 변환
          radix: 16,
        ),
      ),
      content: scheduleModel.content,
    );
  },
),

---

1. 주요 속성

itemCount

• 리스트에 표시할 아이템의 개수를 지정합니다.
• 예제에서는 selectedDay에 해당하는 일정이 있는지 확인 후, 일정 개수를 반환.

itemCount: schedules.containsKey(selectedDay)
    ? schedules[selectedDay]!.length
    : 0,

• 조건 설명:
  • schedules.containsKey(selectedDay)는 선택된 날짜에 일정이 있는지 확인.
  • 일정이 있다면, 해당 날짜의 일정 개수를 반환.
  • 일정이 없다면 0을 반환해 빈 리스트를 표시.

---

itemBuilder

• 각 아이템의 UI를 생성하는 함수를 제공합니다.
• 매개변수:
  1. context: 위젯 트리의 컨텍스트.
  2. index: 현재 생성되는 아이템의 인덱스.

itemBuilder: (BuildContext context, int index) {
  final selectedSchedules = schedules[selectedDay]!; // 해당 날짜의 일정 리스트
  final scheduleModel = selectedSchedules[index];   // 해당 인덱스의 일정 데이터

  return ScheduleCard( // 일정 데이터를 기반으로 UI 생성
    startTime: scheduleModel.startTime,
    endTime: scheduleModel.endTime,
    color: Color(
      int.parse(
        'FF${scheduleModel.color}', // 16진수 색상 문자열을 Color로 변환
        radix: 16,
      ),
    ),
    content: scheduleModel.content,
  );
},

• itemBuilder는 index를 기반으로 리스트의 각 요소를 생성합니다.
• 위 코드에서는 ScheduleCard라는 커스텀 위젯으로 일정 데이터를 표시.

---

2. 전체 구조

ListView.builder 기본 구조:

ListView.builder(
  itemCount: <아이템 총 개수>, // 표시할 아이템 개수
  itemBuilder: (BuildContext context, int index) {
    // index를 기반으로 UI 생성
    return <각 아이템의 위젯>;
  },
);

---

코드 흐름 정리

1. itemCount 결정

selectedDay에 해당하는 일정 데이터를 확인해 총 아이템 개수를 반환.

schedules.containsKey(selectedDay)
    ? schedules[selectedDay]!.length
    : 0,

2. itemBuilder로 아이템 생성

itemBuilder는 각 인덱스에 해당하는 데이터를 기반으로 UI를 생성.

final selectedSchedules = schedules[selectedDay]!; // 선택된 날짜의 일정 리스트
final scheduleModel = selectedSchedules[index];   // 해당 인덱스의 일정 데이터

return ScheduleCard(
  startTime: scheduleModel.startTime,
  endTime: scheduleModel.endTime,
  color: Color(
    int.parse(
      'FF${scheduleModel.color}',
      radix: 16,
    ),
  ),
  content: scheduleModel.content,
);

---

ListView.builder를 사용하는 이유

1. 대량의 데이터 처리 최적화:

   • 스크롤 중 필요한 위젯만 동적으로 생성.
   • 모든 데이터를 한꺼번에 렌더링하지 않음.

2. 동적 UI 생성:

   • 리스트의 각 데이터를 기반으로 개별 위젯을 동적으로 생성 가능.

3. 인덱스 기반 제어:

   • itemBuilder에서 제공되는 index를 사용해 각 데이터를 처리.

---

ListView.builder로 구현한 UI 결과

위 코드를 사용하면 다음과 같은 UI를 얻을 수 있습니다:

• 선택된 날짜에 일정이 있다면 해당 일정 리스트를 동적으로 생성.
• 일정이 없다면 빈 화면이 표시.

---

추가 예제: 단순한 ListView.builder

간단한 문자열 리스트 출력

ListView.builder(
  itemCount: 5, // 총 5개의 아이템
  itemBuilder: (BuildContext context, int index) {
    return ListTile(
      title: Text('Item $index'), // 각 아이템에 인덱스 표시
    );
  },
);

• 결과:

  Item 0
  Item 1
  Item 2
  Item 3
  Item 4

---

자주 묻는 질문 (FAQ)

1. ListView.builder와 ListView의 차이점은?

• ListView는 모든 아이템을 한 번에 생성.
• ListView.builder는 스크롤할 때 필요한 아이템만 동적으로 생성.

2. itemBuilder에서 UI 외에 데이터를 처리해도 되나요?

• 가능하지만 권장되지 않습니다. UI 생성 외의 작업은 성능 저하를 일으킬 수 있으니 분리하세요.

---

정리

ListView.builder는 Flutter에서 대량의 데이터를 효율적으로 렌더링하는 데 최적화된 도구입니다.
위 예제는 실제 프로젝트에서 자주 사용되는 일정 관리 UI를 보여주며, ListView.builder를 활용한 동적 UI 구성의 좋은 사례입니다.

ListView.builder를 활용하면 성능을 유지하면서도 유연하게 데이터를 처리할 수 있습니다. 필요한 경우, 추가적인 성능 최적화 옵션인 ListView.separated나 ListView.custom도 검토해보세요! 🚀