【Flutter】리스트내의 임베디드 리스트로 builder를 유효하게 한다

이 기사에서 해결하는 문제

중첩 목록(목록에 있는 목록)을 사용할 때 빌더가 제대로 작동하지 않습니다.

builder라면 화면에 보이는 부분만 생성되지만, 왠지 처음에 모두 생성되어 로드에 시간이 걸린다.

왜 작동하지 않는가?

부모가 스크롤 시스템 위젯이면 하위 목록이 독립적으로 스크롤되지 않도록 NeverScrollableScrollPhysics를 사용할 수 있습니다.

하지만, 이것을 사용하고 있으면 builder가 스크롤하고 있지 않은 판정이 되어, buider의 특징인 다이나믹한 로딩이 효과가 없기 때문에, 단번에 읽게 되어 버린다.

솔루션 및 사용 예

● CustomScrollView 사용



CustomScrollView를 대체하면 Sliver를 사용할 수 있습니다.

슬라이버는 스크롤할 수 있는 부모 위젯의 일부입니다.

이번에는 Slivers라는 이른바 블록과 같은 것을 조합하여 그것을 부모인 CustomScrollView라는 하나의 스크롤 가능한 위젯으로 만듭니다.

그리고 각 슬라이버는 빌더를 사용할 수 있습니다.

이하, 사용 예의 코드입니다.

CustomScrollView(
  slivers: [
    SliverList(
      // Listの要素をbuilderでつくる
      delegate: SliverChildBuilderDelegate(
        (BuildContext context, int index) => Container(
          margin: EdgeInsets.all(10),
          height: 100,
          color: Colors.amber,
          child: Text('Item $index'),
        ),
        childCount: 50, //list.lengthなどにする場合が多い
      ),
    ),

    // Gridの場合 (Sliver内で複数のList, Gridを併用可能)
    SliverGrid(
      // 子Widgetの大きさや位置を設定
      gridDelegate: const SliverGridDelegateWithMaxCrossAxisExtent(
        maxCrossAxisExtent: 200,
        mainAxisSpacing: 10,
        crossAxisSpacing: 10,
        childAspectRatio: 4,
      ),
      delegate: SliverChildBuilderDelegate(
        (BuildContext context, int index) => Container(
          alignment: Alignment.center,
          color: Colors.cyan,
          child: Text('Item $index'),
        ),
        childCount: 50,
      ),
    ),
  ],
);

이상, 참고가 되면 다행입니다.