240710 TIL

① 배운 것

플러터 ListView 속성 이해하기

플러터에서 리스트뷰(ListView)는 스크롤 가능한 위젯을 만드는 데 유용하게 사용됩니다. 이번 블로그 글에서는 ListView의 주요 속성들과 그 활용법에 대해 알아보겠습니다.

ListView와 SingleChildScrollView의 차이점

ListView는 SingleChildScrollView와 달리 뷰포트에 보이지 않는 영역을 미리 그려놓지 않습니다. SingleChildScrollView는 모든 항목들을 한 번에 렌더링 하기 때문에 성능 저하의 주요 원인이 될 수 있습니다. 반면, ListView는 뷰포트에 도달했을 때 자식 위젯들을 그리기 때문에 성능적으로 더 효율적입니다.

해상도가 높은 이미지를 ListView에 넣고 빠르게 스크롤하면 이미지가 늦게 렌더링되는 것을 볼 수 있습니다. 이는 ListView가 뷰포트에 도달했을 때 자식 위젯들을 그리기 때문입니다.

cacheExtent 속성

스크롤 시 화면이 늦게 나오는 문제를 해결하기 위해 사용하는 속성이 바로 cacheExtent입니다. 이 속성은 ListView의 뷰포트 영역 위아래를 미리 렌더링해 놓아 스크롤링을 할 때 좀 더 빠르게 이미지들을 로드할 수 있게 합니다. 안드로이드의 RecyclerView와 같은 개념입니다.

cacheExtent의 기본 값은 250입니다. 뷰포트가 700이라면 위 250, 아래 250을 더해 총 1200 사이즈만큼의 자식 위젯을 그립니다. 이 값을 증가시키면 더 많은 영역을 미리 그려놓아 사용자가 보기에는 정보들이 빨리 로드되어 편리함을 느낄 수 있지만, 과도할 경우 성능 저하를 초래할 수 있습니다.

ListView(
  cacheExtent: 500,
  children: <Widget>[
    // 위젯 목록
  ],
)

itemExtent와 prototypeItem 속성

itemExtent(double)와 prototypeItem(Widget) 속성은 자식 위젯들의 사이즈를 결정합니다.

• itemExtent는 아이템의 크기를 픽셀 단위로 설정합니다. 예를 들어, itemExtent가 250이고, ListView의 scrollDirection이 vertical인 경우 아이템의 세로 사이즈가 250이 됩니다. scrollDirection이 horizontal인 경우에는 아이템의 가로 사이즈가 250이 됩니다.

ListView(
  itemExtent: 250,
  scrollDirection: Axis.vertical,
  children: <Widget>[
    // 위젯 목록
  ],
)

• prototypeItem은 위젯을 받아 그 위젯의 크기에 따라 자식 아이템의 크기를 설정합니다. 예를 들어, SizedBox(height: 200, width: 200)을 prototypeItem으로 설정하면, scrollDirection이 vertical인 경우 아이템의 세로 사이즈가 200, scrollDirection이 horizontal인 경우에는 아이템의 가로 사이즈가 200으로 설정됩니다.

ListView(
  prototypeItem: SizedBox(height: 200, width: 200),
  scrollDirection: Axis.vertical,
  children: <Widget>[
    // 위젯 목록
  ],
)

두 특성은 동시에 사용할 수 없으며, 자식 위젯의 사이즈보다 우선합니다.

primary 속성

primary: false로 설정하면 ListView 내부는 스크롤이 되지 않습니다. 이 속성은 주로 부모 위젯이 스크롤을 담당할 때 사용됩니다.

ListView(
  primary: false,
  children: <Widget>[
    // 위젯 목록
  ],
)

shrinkWrap 속성

일반적으로 목록 항목이 더 적은 공간을 필요로 하는 경우에도 ListView, GridView, PageView 및 CustomScrollView는 상위 요소에 지정된 모든 사용 가능한 공간을 채우려고 합니다. shrinkWrap: true를 사용하면 목록 뷰가 필요한 공간만 차지하도록 이 동작을 변경할 수 있습니다. 항목이 더 많아도 여전히 스크롤됩니다.

ListView(
  shrinkWrap: true,
  children: <Widget>[
    // 위젯 목록
  ],
)

위 속성들을 적절히 활용하면 플러터에서 더욱 효율적이고 성능 좋은 스크롤 가능한 리스트를 만들 수 있습니다. ListView를 사용할 때 이 속성들을 잘 이해하고 활용해 보세요!

② 회고 (restropective)

③ 개선을 위한 방법