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

플러터에서 ListView.separated는 간단하고 효율적인 방식으로 목록을 만들 수 있는 위젯입니다.

기본 ListView와 달리 항목 사이에 구분선을 자동으로 추가하여 더욱 보기 좋은 목록을 만들 수 있습니다.

또한, ListView.separated는 성능 측면에서도 ListView보다 우수할 수 있습니다.

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

1. ListView.separated 기본 사용법

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

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

 

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

예를 들어, 다음 코드는 10개의 'Item 0', 'Item 1', ..., 'Item 9' 텍스트 위젯을 포함하고, 각 항목 사이에 가로줄 구분선을 추가하는 목록을 만듭니다.

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

 

2. ListView.separated 옵션

ListView.separated에는 목록의 모양과 동작을 다양하게 조정할 수 있는 다양한 옵션들이 제공됩니다.

ListView.builder에서 사용할 수 있는 대부분의 옵션들이 ListView.separated에도 적용됩니다. 대표적인 옵션들과 간단한 설명은 다음과 같습니다.

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

3. 실제 개발 예제

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

 

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

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

 

위 코드는 데이터리스트라는 리스트에 저장된 데이터를 기반으로 목록을 만들고, 각 항목 사이에 구분선을 추가합니다.

 

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

 

데이터 리스트에 포함된 데이터가 문자열뿐만 아니라 다양한 형식일 경우, itemBuilder 함수에서 해당 데이터에 맞는 다양한 위젯을 만들어 표시할 수 있습니다.

예시

List<Product> 데이터리스트 = [
  Product(id: 1, name: '사과', price: 1000),
  Product(id: 2, name: '바나나', price: 1500),
  Product(id: 3, name: '포도', price: 2000),
];

ListView.separated(
  itemCount: 데이터리스트.length,
  itemBuilder: (context, index) {
    final product = 데이터리스트[index];
    return ListTile(
      leading: Icon(Icons.shopping_cart),
      title: Text(product.name),
      subtitle: Text('₩${product.price}'),
    );
  },
  separatorBuilder: (context, index) {
    return Divider();
  },
)

 

결과

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

 사과 (₩1000)
 바나나 (₩1500)
 포도 (₩2000)

• ListTile 위젯을 사용하여 각 항목을 카드 형태로 표시합니다.
• leading 속성에는 아이콘을, title 속성에는 제품 이름을, subtitle 속성에는 가격을 표시합니다.

3. 'separatorBuilder' 함수 사용하기

 

구분선의 모양을 커스터마이징하려면 separatorBuilder 함수를 사용할 수 있습니다.

예시

ListView.separated(
  itemCount: 데이터리스트.length,
  itemBuilder: (context, index) {
    // ... (각 항목 만들기)
  },
  separatorBuilder: (context, index) {
    return Container(
      height: 1,
      color: Colors.grey,
    );
  },
)

 

결과

위 코드는 각 항목 사이에 회색 배경의 1픽셀 높이의 구분선을 추가합니다.

 

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

 

데이터 로드에 시간이 걸리는 경우, itemBuilder 함수에서 비동기 작업을 처리할 수 있습니다.

예시

ListView.separated(
  itemCount: 데이터리스트.length,
  itemBuilder: (context, index) {
    return FutureBuilder(
      future: _loadProductData(데이터리스트[index].id), // 비동기 작업
      builder: (context, snapshot) {
        if (snapshot.hasData) {
          final product = snapshot.data;
          return ListTile(
            // ... (ListTile 구성)
          );
        } else if (snapshot.hasError) {
          return Text('Error: ${snapshot.error}');
        } else {
          return CircularProgressIndicator();
        }
      },
    );
  },
  separatorBuilder: (context, index) {
    return Divider();
  },
)

 

결과

 

위 코드는 각 항목에 대한 데이터를 비동기적으로 로드하고, 로드된 데이터를 사용하여 ListTile 위젯을 만듭니다. 데이터 로드가 완료되기 전에는 로딩 표시기를 표시합니다.

4. 더 알아보기

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

• 'SliverList' 와 함께 사용하기: 큰 목록을 처리하는 데 더 적합하며, ListView.separated보다 성능이 우수할 수 있습니다.
• CustomScrollView: 더욱 복잡하고 유연한 스크롤 동작을 구현할 때 사용합니다. ListView.separated, SliverList 등을 함께 사용하거나, 직접 커스텀 위젯을 만들 수도 있습니다.
• 기타 옵션: cacheExtent, padding, controller 등 다양한 옵션을 사용하여 ListView.separated를 더욱 효율적으로 사용할 수 있습니다.

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

5. 마무리

플러터 ListView.separated는 간단하고 효율적인 방식으로 목록을 만들 수 있는 강력한 위젯입니다.

기본 ListView보다 더 많은 기능을 제공하며, 다양한 상황에 유연하게 적용할 수 있습니다.

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

 

 

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

 

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