[Flutter] itemBuilder 란?

Flutter의 itemBuilder

Flutter에서 itemBuilder는 리스트나 그리드와 같은 위젯에서 반복적으로 아이템을 생성하기 위한 콜백 함수입니다. itemBuilder는 리스트나 그리드의 각 아이템을 동적으로 생성하는 데 사용되며, 주로 ListView.builder나 GridView.builder와 함께 사용됩니다.

 

 

 

 

 

 

 

itemBuilder의 주요 특징

• 동적 아이템 생성: itemBuilder는 각 아이템이 필요할 때마다 호출되어, 성능을 최적화합니다. 즉, 화면에 보이는 아이템만 생성하므로 많은 데이터를 처리할 때 유리합니다.
• 인덱스를 전달: itemBuilder는 현재 생성되고 있는 아이템의 인덱스를 매개변수로 받습니다. 이를 통해 각 아이템의 고유한 콘텐츠를 설정할 수 있습니다.
• 반환 값: itemBuilder는 각 아이템의 위젯을 반환해야 합니다. 주로 ListTile, Container 등의 위젯을 반환합니다.

 

 

 

 

 

 

 

 

 

itemBuilder의 기본 구조

ListView.builder(
  itemCount: 10,  // 리스트의 아이템 개수
  itemBuilder: (BuildContext context, int index) {
    return ListTile(
      leading: Icon(Icons.person),
      title: Text('아이템 $index'),
    );
  },
)
    

위 코드에서 itemBuilder는 index를 사용하여 각 아이템의 고유한 값을 출력하는 ListTile을 반환합니다.

 

 

 

 

 

 

 

 

itemBuilder의 매개변수

• context: 빌드에 사용되는 BuildContext 객체로, 위젯 트리에서의 위치와 관련된 정보를 제공합니다.
• index: 리스트 또는 그리드에서 현재 아이템의 위치(인덱스)입니다. 이를 통해 각 아이템에 고유한 콘텐츠를 제공할 수 있습니다.

 

 

 

 

 

 

 

 

ListView.builder와 itemBuilder 예시

다음 예시는 ListView.builder와 itemBuilder를 사용하여 50개의 아이템을 동적으로 생성하는 방법을 보여줍니다:

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('itemBuilder 예제'),
        ),
        body: ListView.builder(
          itemCount: 50,  // 50개의 아이템 생성
          itemBuilder: (BuildContext context, int index) {
            return ListTile(
              leading: Icon(Icons.person),
              title: Text('사용자 $index'),
              subtitle: Text('설명 텍스트 $index'),
            );
          },
        ),
      ),
    );
  }
}
    

 

 

 

 

 

 

 

 

GridView.builder와 itemBuilder 예시

itemBuilder는 GridView.builder와 함께 사용할 수도 있습니다:

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('GridView.builder 예제'),
        ),
        body: GridView.builder(
          gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
            crossAxisCount: 2,  // 각 행에 2개의 아이템을 배치
          ),
          itemCount: 20,
          itemBuilder: (BuildContext context, int index) {
            return Card(
              color: Colors.blueAccent,
              child: Center(
                child: Text(
                  '아이템 $index',
                  style: TextStyle(color: Colors.white, fontSize: 18),
                ),
              ),
            );
          },
        ),
      ),
    );
  }
}
    

 

 

 

 

 

 

 

 

itemBuilder의 사용 상황

• 대규모 리스트: 많은 양의 데이터를 처리해야 할 때 itemBuilder는 화면에 보이는 데이터만 빌드하여 성능을 최적화합니다.
• 동적 콘텐츠 생성: 각 아이템의 콘텐츠를 인덱스나 다른 데이터를 기반으로 동적으로 생성할 수 있습니다.
• 무한 스크롤: 무한 스크롤이 필요한 경우 itemBuilder와 함께 데이터를 점진적으로 불러올 수 있습니다.

 

 

 

 

 

 

 

 

 

 

 

결론

itemBuilder는 Flutter에서 리스트나 그리드와 같은 스크롤 가능한 위젯을 동적으로 생성할 때 매우 중요한 콜백 함수입니다. 많은 데이터를 처리할 때, 아이템이 필요한 순간에만 빌드하여 메모리 사용을 줄이고 성능을 향상시킬 수 있습니다.