플러터에서 ListView.builder 사용법과 옵션 가이드

플러터에서 ListView.builder는 동적 목록을 만들 때 사용하는 가장 기본적인 위젯입니다.

데이터 개수가 많거나 미리 알 수 없는 경우, ListView.builder를 사용하면 효율적으로 목록을 생성하고 관리할 수 있습니다.

이 블로그에서는 ListView.builder의 기본 사용법부터 다양한 옵션과 속성, 그리고 실제 개발에 활용할 수 있는 실용적인 예제까지 심층적으로 알아봅니다.

1. ListView.builder 기본 사용법

ListView.builder를 사용하려면 먼저 다음과 같은 형식으로 위젯을 생성해야 합니다.

ListView.builder(
  itemCount: 데이터 개수,
  itemBuilder: (context, index) {
    // 각 항목을 만들어 반환하는 함수
    return 위젯;
  },
)

 

• itemCount: 목록에 표시할 데이터 개수를 설정합니다.
• itemBuilder: 각 항목을 어떻게 만들지 정의하는 함수입니다. itemBuilder 함수는 인덱스를 매개변수로 받고, 해당 인덱스에 해당하는 항목을 나타내는 위젯을 반환해야 합니다.

예를 들어, 다음 코드는 10개의 'Item 0', 'Item 1', ..., 'Item 9' 텍스트 위젯을 포함하는 목록을 만듭니다.

ListView.builder(
  itemCount: 10,
  itemBuilder: (context, index) {
    return Text('Item $index');
  },
)

 

2. ListView.builder 옵션

ListView.builder에는 목록의 모양과 동작을 다양하게 조정할 수 있는 다양한 옵션들이 제공됩니다. 대표적인 옵션들과 간단한 설명은 다음과 같습니다.

• scrollDirection: 목록의 스크롤 방향을 설정합니다. 기본값은 Axis.vertical이며, Axis.horizontal 로 설정하면 가로 방향으로 스크롤되는 목록을 만들 수 있습니다.
• physics: 목록의 스크롤 방식을 설정합니다. 기본값은 AlwaysScrollableScrollPhysics이며, BouncingScrollPhysics 를 설정하면 목록 끝에서 반동 효과를 적용할 수 있습니다.
• shrinkWrap: 목록의 높이를 콘텐츠에 맞춰 조절할지 여부를 설정합니다. 기본값은 false이며, true 로 설정하면 목록이 스크롤바 없이 콘텐츠 높이만큼만 표시됩니다.
• primary: 기본 스크롤 위젯으로 설정할지 여부를 설정합니다. 기본값은 true이며, false 로 설정하면 다른 스크롤 위젯과 함께 사용할 수 있습니다.
• reverse: 목록 항목의 순서를 반전할지 여부를 설정합니다. 기본값은 false이며, true 로 설정하면 마지막 항목부터 첫 번째 항목까지 순서대로 표시됩니다.
• itemBuilder: 각 항목을 어떻게 만들지 정의하는 함수입니다. 이미 위에서 설명했습니다.
• separatorBuilder: 항목 사이에 구분선을 추가하는 함수입니다. separatorBuilder 함수는 인덱스를 매개변수로 받고, 해당 인덱스에 해당하는 구분선 위젯을 반환해야 합니다.
• itemExtent: 각 항목의 고정된 높이를 설정합니다. 이 옵션을 사용하면 각 항목의 크기가 항상 일정하게 유지됩니다.
• addAutomaticKeepAlive: 스크롤 범위 밖에 있는 항목도 메모리에 유지할지 여부를 설정합니다. 기본값은 false이며, true 로 설정하면 스크롤 범위 밖에 있는 항목도 다시 표시될 때까지 메모리에 유지됩니다.

3. 실제 개발 예제

다음은 실제 개발에서 활용할 수 있는 ListView.builder 사용 예제입니다.

 

1. 기본 데이터 목록 만들기

ListView.builder(
  itemCount: 데이터리스트.length, // 데이터 리스트 길이
  itemBuilder: (context, index) {
    final item = 데이터리스트[index]; // 각 항목 데이터
    return Text(item); // 데이터를 Text 위젯으로 표시
  },
)

 

설명:

• 위 코드는 데이터리스트라는 리스트에 저장된 데이터를 기반으로 목록을 만듭니다.
• itemCount 속성은 목록에 표시할 데이터 개수를 설정합니다. 이 경우 데이터리스트의 길이를 사용합니다.
• itemBuilder 함수는 각 항목을 어떻게 표시할지 정의하는 함수입니다.
  • context 매개변수는 현재 빌드 컨텍스트를 나타냅니다.
  • index 매개변수는 현재 표시할 항목의 인덱스입니다.
• itemBuilder 함수 내에서:
  • 데이터리스트[index] 를 사용하여 현재 인덱스에 해당하는 데이터 항목을 가져옵니다.
  • Text(item) 으로 가져온 데이터를 Text 위젯으로 변환하여 표시합니다.

예시

List<String> 데이터리스트 = ['사과', '바나나', '포도'];

ListView.builder(
  itemCount: 데이터리스트.length,
  itemBuilder: (context, index) {
    final item = 데이터리스트[index];
    return Text(item);
  },
)

 

결과

위 코드는 다음과 같은 목록을 만들 것입니다.

사과
바나나
포도

 

2. 다양한 위젯으로 목록 만들기

ListView.builder(
  itemCount: 100,
  itemBuilder: (context, index) {
    if (index % 2 == 0) {
      return Text('Item $index (Text)');
    } else {
      return Icon(Icons.favorite);
    }
  },
)

 

위 코드는 0부터 99까지의 숫자를 반복하며, 짝수 인덱스에는 'Item n (Text)' 텍스트 위젯을, 홀수 인덱스에는 'favorite' 아이콘을 번갈아 표시하는 목록을 만듭니다.

 

3. 'separatorBuilder' 함수 사용하기

ListView.builder(
  itemCount: 10,
  itemBuilder: (context, index) {
    return Text('Item $index');
  },
  separatorBuilder: (context, index) {
    return Divider();
  },
)

 

위 코드는 'separatorBuilder' 함수를 사용하여 항목 사이에 구분선을 추가합니다. separatorBuilder 함수는 Divider 위젯을 반환하여 구분선을 만듭니다.

 

4. 'itemBuilder' 함수에서 비동기 작업 처리하기

ListView.builder(
  itemCount: 데이터 리스트.length,
  itemBuilder: (context, index) {
    return FutureBuilder(
      future: _loadItemData(데이터 리스트[index]), // 비동기 작업
      builder: (context, snapshot) {
        if (snapshot.hasData) {
          final itemData = snapshot.data;
          return Text(itemData.title);
        } else if (snapshot.hasError) {
          return Text('Error: ${snapshot.error}');
        } else {
          return CircularProgressIndicator();
        }
      },
    );
  },
)

 

위 코드는 'itemBuilder' 함수에서 비동기 작업을 처리하는 방법을 보여줍니다. _loadItemData 함수는 각 데이터 항목에 대한 정보를 비동기적으로 로드하고, 로드된 데이터를 사용하여 Text 위젯을 만듭니다.

 

5. 'SliverList' 와 함께 사용하기

SliverList(
  delegate: SliverChildBuilderDelegate(
    (context, index) {
      // 각 항목을 만들어 반환하는 함수
      return 위젯;
    },
    childCount: 데이터 개수,
  ),
)

 

위 코드는 'SliverList' 위젯을 사용하여 ListView.builder를 더욱 효율적으로 만들 수 있는 방법을 보여줍니다. 'SliverList'는 큰 목록을 처리하는 데 더 적합하며, ListView.builder보다 성능이 우수할 수 있습니다.

4. 더 알아보기

플러터 ListView.builder는 다양한 옵션과 속성을 제공하며, 상황에 맞게 활용하면 더욱 효과적이고 유연한 목록을 만들 수 있습니다.

• ListView.separated: 항목 사이에 구분선을 자동으로 추가합니다. separatorBuilder 함수를 사용하여 구분선의 모양을 커스터마이징할 수도 있습니다.
• CustomScrollView: 더욱 복잡하고 유연한 스크롤 동작을 구현할 때 사용합니다. ListView.builder, SliverList, GridView 등을 함께 사용하거나, 직접 커스텀 위젯을 만들 수도 있습니다.
• 기타 옵션: cacheExtent, padding, controller 등 다양한 옵션을 사용하여 ListView.builder를 더욱 효율적으로 사용할 수 있습니다.

플러터 공식 문서에서 ListView.builder에 대한 자세한 정보를 확인할 수 있습니다: https://api.flutter.dev/flutter/widgets/ListView/ListView.builder.html

5. 마무리

플러터 ListView.builder는 동적 목록을 만들 때 사용하는 가장 기본적인 위젯이지만, 다양한 기능과 옵션을 제공하여 상황에 맞게 유연하게 활용할 수 있습니다.

이 블로그에서 다룬 내용을 잘 이해하고, 실제 개발에 적용해 본다면 플러터에서 더욱 효과적이고 유용한 목록을 만들 수 있을 것입니다.

 

수발가족을 위한 일기장 “나비일기장”

 

https://play.google.com/store/apps/details?id=com.maccrey.navi_diary_release

 

구글플레이 앱 배포의 시작! 비공개테스트 20명의 테스터모집을 위한 앱 "테스터 쉐어"

 

https://play.google.com/store/apps/details?id=com.maccrey.tester_share_release

Tester Share [테스터쉐어] - Google Play 앱

카카오톡 오픈 채팅방

https://open.kakao.com/o/gsS8Jbzg