개발

Flutter Listview 종류 ( 사용방법 및 선택 방법 포함)

코지식 2024. 10. 23. 23:24
반응형

 

 

 

 

 

플러터(Flutter)에서 리스트를 출력할 때 주로 사용하는 위젯은 ListView입니다. 하지만 다양한 요구 사항과 성능 최적화에 따라 여러 종류의 리스트 출력 위젯들이 존재합니다. 각 위젯은 특정 상황에 맞는 장점과 기능을 제공하여, 개발자가 효율적이고 사용자 경험이 좋은 리스트를 구현할 수 있도록 돕습니다. 이 글에서는 플러터에서 리스트를 출력할 수 있는 다양한 위젯들을 소개하고, 각 위젯의 특징을 설명하겠습니다.

플러터 리스트뷰

1. ListView 기본 종류

1.1 ListView

ListView는 가장 기본적인 리스트 출력 위젯입니다. 기본적으로 스크롤 가능한 수직 리스트를 만들 수 있으며, 매우 다양한 방식으로 구성할 수 있습니다. ListView는 크게 4가지 생성 방법을 제공합니다:

 

ListView.builder

ListView.builder는 지연 렌더링(lazy rendering) 방식을 사용하여 스크롤 시점에 필요한 아이템만 그립니다. 아이템이 많은 경우 성능상 매우 유리하며, 무한 스크롤 리스트에 적합합니다.

ListView.builder(
    itemCount: items.length,
        itemBuilder: (context, index) {
            return ListTile(
            title: Text(items[index]),
        );
    },
);

 

장점: 성능 최적화, 큰 데이터 셋에 적합

단점: 순차적 데이터 접근만 가능

 

 

 

 

 

 

 

ListView.separated

ListView.separated는 리스트 아이템 사이에 구분선이나 특정 위젯을 삽입할 수 있는 리스트 뷰입니다. 구분이 필요한 리스트에서 유용합니다.

ListView.separated(
  itemCount: items.length,
  itemBuilder: (context, index) {
    return ListTile(
      title: Text(items[index]),
    );
  },
  separatorBuilder: (context, index) => Divider(),
);

장점: 리스트에 구분선을 쉽게 추가

단점: 구분선이 필요하지 않다면 일반 ListView와 기능상 큰 차이가 없음

 

 

ListView.custom

ListView.custom은 사용자 정의된 슬라이버(Sliver)를 통해 매우 세밀한 제어를 할 수 있는 리스트 뷰입니다. 일반적인 상황보다는 복잡한 커스텀 레이아웃이 필요할 때 사용합니다.

ListView.custom(
  childrenDelegate: SliverChildBuilderDelegate(
    (context, index) => ListTile(title: Text(items[index])),
    childCount: items.length,
  ),
);

장점: 세밀한 레이아웃 제어 가능

단점: 코드가 복잡해질 수 있음

 

 

ListView.scrollDirection

ListView는 기본적으로 수직 방향으로 스크롤되지만, scrollDirection 속성을 사용해 수평 스크롤 리스트도 만들 수 있습니다.

ListView.builder(
  scrollDirection: Axis.horizontal,
  itemCount: items.length,
  itemBuilder: (context, index) {
    return Container(
      width: 100,
      child: Text(items[index]),
    );
  },
);

 

장점: 가로 스크롤 리스트 구현 가능

단점: 가로로 스크롤이 필요한 경우에만 사용

 

 

1.2 ListView의 기본 스타일

ListTile: 리스트 뷰의 기본 구성 요소로 사용되며, 텍스트, 아이콘 등으로 구성된 단일 항목을 쉽게 만들 수 있습니다.

Card(
  child: ListTile(
    title: Text('Card item'),
  ),
);

 

Card: Card 위젯은 개별 항목을 카드 형식으로 감싸서 제공할 수 있습니다.

Card(
  child: ListTile(
    title: Text('Card item'),
  ),
);

 

 

2. ListView 대안 및 기타 리스트 출력 위젯

2.1 GridView

GridView는 2차원 그리드 형식으로 아이템을 배치하는 위젯입니다. 갤러리나 상품 목록처럼 여러 개의 아이템을 열과 행으로 나열해야 할 때 적합합니다.

 

GridView.builder

GridView.builder는 ListView.builder와 비슷하게 동적 아이템을 효율적으로 렌더링하는 그리드 뷰입니다.

GridView.builder(
  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
    crossAxisCount: 2,
  ),
  itemCount: items.length,
  itemBuilder: (context, index) {
    return Card(
      child: Center(child: Text(items[index])),
    );
  },
);

 

장점: 2차원 레이아웃 구현에 적합

단점: 행과 열이 고정되어 있어, 유연성이 제한적일 수 있음

 

 

 

 

 

 

 

2.2 CustomScrollView

CustomScrollView는 다양한 스크롤 가능한 영역을 함께 배치할 수 있도록 하는 고급 위젯입니다. Sliver 위젯과 함께 사용되며, 여러 종류의 리스트를 결합하여 복잡한 스크롤 레이아웃을 만들 수 있습니다.

CustomScrollView(
  slivers: [
    SliverList(
      delegate: SliverChildBuilderDelegate(
        (context, index) => ListTile(title: Text(items[index])),
        childCount: items.length,
      ),
    ),
  ],
);

 

장점: 다이나믹한 스크롤 구조와 레이아웃 제공

단점: 구현이 다소 복잡함

 

2.3 ReorderableListView

ReorderableListView는 사용자가 항목을 드래그 앤 드롭으로 재배열할 수 있는 리스트 뷰입니다. 사용자가 리스트 항목의 순서를 자유롭게 변경해야 하는 경우에 적합합니다.

ReorderableListView(
  onReorder: (oldIndex, newIndex) {
    setState(() {
      final item = items.removeAt(oldIndex);
      items.insert(newIndex, item);
    });
  },
  children: List.generate(
    items.length,
    (index) => ListTile(
      key: ValueKey(index),
      title: Text(items[index]),
    ),
  ),
);

 

장점: 사용자 인터랙션이 필요한 리스트에 적합

단점: 구현 시 키(Key) 설정이 필수

 

 

2.4 AnimatedList

AnimatedList는 리스트 아이템을 추가하거나 제거할 때 애니메이션 효과를 부여할 수 있는 리스트 뷰입니다. 동적인 UI를 만들어야 할 때 유용합니다.

AnimatedList(
  initialItemCount: items.length,
  itemBuilder: (context, index, animation) {
    return SlideTransition(
      position: animation.drive(Tween(
        begin: Offset(1, 0),
        end: Offset(0, 0),
      )),
      child: ListTile(title: Text(items[index])),
    );
  },
);

 

장점: 아이템 추가/삭제 시 애니메이션 제공

단점: 기본적인 ListView에 비해 복잡함

 

 

2.5 SliverList

SliverList는 CustomScrollView 안에서 사용되며, 스크롤 가능한 리스트를 만드는 데 유용한 고급 위젯입니다. 성능 최적화가 필요한 대규모 리스트에 적합합니다.

CustomScrollView(
  slivers: [
    SliverList(
      delegate: SliverChildBuilderDelegate(
        (context, index) {
          return ListTile(title: Text(items[index]));
        },
        childCount: items.length,
      ),
    ),
  ],
);

 

장점: 고급 레이아웃과 성능 최적화 가능

단점: 일반적인 사용보다는 고급 레이아웃에서 주로 사용됨

 

 

3. 성능 최적화 및 선택 기준

리스트를 출력하는 위젯을 선택할 때 고려해야 할 중요한 요소는 성능과 사용 사례입니다.

  • 큰 데이터셋: 아이템이 많다면 ListView.builder나 GridView.builder와 같은 지연 로딩 방식이 성능에 좋습니다.
  • 복잡한 레이아웃: 복잡한 스크롤 구조나 섹션 구분이 필요하다면 CustomScrollView나 SliverList 같은 위젯을 고려하세요.
  • 애니메이션: 아이템을 동적으로 추가/삭제할 때는 AnimatedList가 유용합니다.
  • 사용자 인터랙션: 사용자가 리스트를 재정렬해야 한다면 ReorderableListView를 사용할 수 있습니다.

 

결론

플러터는 다양한 리스트 출력 위젯을 제공하여 개발자가 상황에 맞는 최적의 방법으로 리스트를 구현할 수 있도록 합니다. 기본적인 ListView부터 시작해, 성능 최적화가 필요한 경우에는 ListView.builder나 SliverList를, 동적인 인터랙션이 필요한 경우에는 ReorderableListView나 AnimatedList를 사용하는 것이 좋습니다. 

 

 

 

 

 

 

반응형