diffutil_sliverlist

패키지 개요

공개 정보를 바탕으로 생성한 선택 가이드입니다.

기본 데이터 목록이 변경될 때 부드럽고 효율적인 업데이트를 보장하기 위해 DiffUtil 알고리즘을 사용하여 항목 변경 사항을 자동으로 애니메이션 처리하는 SliverList 위젯입니다. diffutil.dart를 활용하여 기존 목록과 새 목록 간의 최소 차이를 계산하고 필요한 애니메이션과 재구성만 적용합니다. 성능과 시각적 유연성이 중요한 대규모 동적 스크롤 가능한 목록에 적합합니다. 이 패키지는 Flutter의 Sliver 아키텍처와 원활하게 통합되며 모든 주요 플랫폼을 지원합니다.

사용 사례

자주 업데이트되는 동적 스크롤 가능한 목록
스크롤 가능한 뷰에서 항목을 효율적으로 재정렬하기
목록 항목을 추가하거나 제거할 때 부드러운 전환
최적화된 렌더링이 필요한 대규모 데이터 세트
스크롤 가능한 인터페이스에서 실시간 데이터 흐름

주요 기능

리스트 변경의 자동 애니메이션
최소 업데이트를 위해 DiffUtil을 사용합니다
대규모 목록을 위한 최적화된 성능
Sliver 위젯과의 원활한 통합
모든 플러터 타겟에 대한 크로스플랫폼 지원

적합한 대상

부드러운 리스트 애니메이션을 필요로 하는 개발자
실시간 또는 자주 변경되는 데이터를 가진 앱
성능에 민감한 스크롤 인터페이스
Sliver 기반 레이아웃을 사용하는 Flutter 개발자
리스트 차이를 비교하기 위해 최소한의 보일러플레이트가 필요한 프로젝트

고려 사항

DiffUtil 개념을 이해해야 합니다
매우 작은 목록의 경우 오버헤드가 발생할 수 있습니다
애니메이션 동작의 사용자 정의가 제한적
외부의 diffutil.dart 패키지에 의존합니다
목록이 아닌 슬리버 유형에는 적합하지 않습니다

원본 README

연결된 소스 저장소의 README 원문 스냅샷입니다. 최신 내용은 저장소에서 확인하세요.

A SliverList that implicitly animates changes.

It supports two use cases:

Animating changes from a list of widgets with unique keys

When you have a list of Widgets and can give each Widget a unique key, you can use DiffUtilSliverList.fromKeyedWidgetList.

See the example code:

class _ExpandableListsState extends State<ExpandableLists> {
  bool expanded = false;

  @override
  Widget build(BuildContext context) {
    return DiffUtilSliverList.fromKeyedWidgetList(
      children: [
        ListTile(
          key: Key("1"),
          title: Text("first"),
          trailing: Icon(Icons.chevron_right),
        ),
        ListTile(
          key: Key("2"),
          title: Text("second"),
          trailing: Icon(Icons.chevron_right),
        ),
        if (this.expanded)
          for (int i = 3; i < 6; i++)
            ListTile(
              key: Key(i.toString()),
              title: Text("index: $i"),
              trailing: Icon(Icons.chevron_right),
            ),
        ListTile(
          key: Key("expand_collapse"),
          onTap: () => setState(() {
            expaned = !expaned;
          }),
          title: Text(expanded ? "collapse" : "expand", style: TextStyle(fontWeight: FontWeight.bold),),
          trailing: Icon(expanded ? Icons.expand_less : Icons.expand_more),
        )
      ],
      insertAnimationBuilder: (context, animation, child) => FadeTransition(
        opacity: animation,
        child: child,
      ),
      removeAnimationBuilder: (context, animation, child) => FadeTransition(
        opacity: animation,
        child: SizeTransition(
          sizeFactor: animation,
          axisAlignment: 0,
          child: child,
        ),
      ),
    );
  }
}

And the result:

Building Widgets from a list of data objects that implement ==

Example:


Widget build(BuildContext context) {
    return CustomScrollView(
             slivers: [
               DiffUtilSliverList<int>(
                 items: list,
                 builder: (context, item) => 
                   Container(
                     color: colors[item % colors.length],
                     height: 48,
                     width: double.infinity,
                 ),
                 insertAnimationBuilder: (context, animation, child) =>
                     FadeTransition(
                       opacity: animation,
                       child: child,
                 ),
                 removeAnimationBuilder: (context, animation, child) =>
                     SizeTransition(
                       sizeFactor: animation,
                       child: child,
                 ),
                 removeAnimationDuration: const Duration(milliseconds: 3000),
                 insertAnimationDuration: const Duration(milliseconds: 1200),
             ),
           ],
         );
}

If list changes, the list will automatically animate new/removed items:

If the items don't implement == correctly, you can pass your own equalityChecker.

패키지, 저장소 및 앱 카테고리 검색