SliverList

Flutter에서 스크롤 가능한 리스트 만들기: SliverList: SliverList

Flutter는 강력한 스크롤 가능한 위젯 시스템을 제공하며, 그 중 슬리버(Slivers)는 복잡한 스크롤 효과와 레이아웃을 만들 때 매우 유용합니다.
SliverList는 여러 박스(children)를 주 축(main axis)으로 정렬하는 슬리버(sliver)입니다. 스크롤 가능한 영역 내에서 여러 요소를 배치할 때 유용하며, CustomScrollView 내에서 주로 사용됩니다.

주요 속성

• delegate: 리스트 항목을 생성하는 데 사용되는 SliverChildDelegate를 설정합니다. 주로 SliverChildBuilderDelegate나 SliverChildListDelegate를 사용합니다.
• SliverChildBuilderDelegate:
  - 동적 생성: 필요할 때마다 자식 요소를 생성합니다. 즉, 화면에 보이는 부분만 렌더링하여 성능을 최적화합니다.
• SliverChildListDelegate:
  - 정적 생성: 미리 정의된 리스트를 기반으로 자식 요소를 생성합니다. 모든 항목이 처음부터 생성되기 때문에 데이터가 적을 때 유용합니다.

일반적인 ListView와 SliverList의 차이

일반적인 ListView는 대부분의 경우 적절히 작동하지만, SliverList는 더 많은 유연성과 성능 최적화를 제공합니다. 특히 SliverList는 스크롤 가능한 큰 데이터 세트를 효율적으로 처리하는 데 매우 유용합니다.

• 대규모 데이터 처리: SliverList는 화면에 보이는 부분만 렌더링하여 성능을 최적화합니다. 일반적인 ListView는 많은 데이터를 포함할 때 성능 저하가 발생할 수 있습니다.

주요 활용도

• 대규모 데이터 처리: 화면에 보이는 부분만 렌더링하여 성능을 최적화합니다.
• 유연한 레이아웃: 다양한 레이아웃과 스크롤 효과를 쉽게 구성할 수 있습니다.

코드 예제

아래 예제는 SliverList를 사용하여 스크롤 가능한 리스트를 구현하는 방법을 보여줍니다.

CustomScrollView(
  slivers: <Widget>[
    SliverList(
      delegate: SliverChildBuilderDelegate(
        (BuildContext context, int index) {
          return Container(
            height: 100.0,
            color: index.isOdd ? Colors.white : Colors.black12,
            child: Center(
              child: Text('$index', textScaleFactor: 2),
            ),
          );
        },
        childCount: 20, // 리스트 항목 수
      ),
    ),
  ],
)

추가 팁

• 데이터 최적화: 대규모 데이터 세트의 경우 SliverChildBuilderDelegate를 사용하여 필요할 때만 항목을 생성하는 것이 좋습니다.
• 상태 유지: 자식 요소가 화면에서 벗어났을 때 상태를 유지하려면 KeepAlive나 AutomaticKeepAlive를 사용합니다.

SliverFixedExtentList 고려

만약 리스트 항목들이 주 축(main axis)에서 고정된 크기를 가지고 있다면, SliverFixedExtentList를 사용하는 것이 더 효율적입니다. SliverFixedExtentList는 항목의 크기를 사전에 알기 때문에 레이아웃 성능이 더 뛰어납니다.

Child Elements' Lifecycle

Creation

• 설명: 리스트를 레이아웃하는 동안, 화면에 보이는 자식 요소들은 필요에 따라 천천히(lazily) 생성됩니다.
• 예시: SliverChildListDelegate와 SliverChildBuilderDelegate는 필요할 때 자식 요소를 생성합니다. 즉, 처음에는 보이는 부분만 생성하고, 스크롤하면 필요한 부분을 추가로 생성합니다.

Destruction

• 설명: 자식 요소가 화면에서 벗어나면, 해당 요소 트리, 상태 및 렌더 객체가 소멸됩니다.
• 예시: 자식 요소가 화면 밖으로 스크롤되면, 해당 요소는 메모리에서 제거됩니다. 다시 스크롤해서 화면에 나타나면 새로 생성됩니다.

Destruction Mitigation (소멸 방지 방법)

자식 요소가 화면에서 벗어났을 때 상태를 유지하는 방법들:

상태 저장 (State Preservation)

• 설명: 중요한 UI 상태를 슬리버 자식 요소 외부의 데이터 모델에 저장합니다. 이렇게 하면 자식 요소들이 다시 생성될 때 쉽게 상태를 복원할 수 있습니다.

KeepAlive 사용

• 설명: KeepAlive 위젯을 사용하여 자식 요소가 화면에서 벗어나도 메모리에 유지되도록 합니다.

AutomaticKeepAlive 사용

• 설명: AutomaticKeepAlive는 자식 위젯이 필요에 따라 서브트리를 유지하도록 합니다. 예를 들어, EditableText 위젯은 입력 포커스가 있을 때 서브트리를 유지합니다.

Using More Than One Delegate in a Viewport

설명

하나의 스크롤 뷰에서 여러 델리게이트를 사용할 경우, 각 델리게이트의 첫 번째 자식은 항상 레이아웃됩니다. 이는 전체 스크롤 뷰의 스크롤 오프셋을 추정하기 위해 필요합니다.

예시

예를 들어, CustomScrollView 내에서 SliverList와 SliverGrid를 동시에 사용할 때, 각 델리게이트의 첫 번째 항목은 항상 화면에 그려집니다. 이렇게 하면 스크롤 뷰는 전체 길이를 더 잘 계산할 수 있습니다.

관련 자료

• SliverList: 스크롤 가능한 리스트를 구현하는 슬리버 위젯.
• SliverFixedExtentList: 주 축에서 고정된 크기의 자식 요소를 가진 더 효율적인 슬리버 리스트.
• SliverPrototypeExtentList: 픽셀 값 대신 프로토타입 항목을 사용하여 주 축 크기를 정의하는 슬리버 리스트.
• SliverAnimatedList: 리스트에 항목이 추가되거나 제거될 때 애니메이션 효과를 주는 슬리버.

추가 참고 리소스

• SliverList & SliverGrid (Flutter Widget of the Week)
• 공식 문서 - SliverList