return ListView(
    children: [
        for (var webtoon in snapshot.data!) Text(webtoon.title),],
);
  • ListView를 이런 식으로 쓰면 한번에 모든 데이터를 가져오므로 과부하가 걸릴 수 있음


개선 : ListView.builder

return ListView.builder(
    scrollDirection: Axis.horizontal,
    // data의 갯수를 말해줌으로써 성능에 이점을 줌
    itemCount: snapshot.data!.length,
    // ListView.builder가 아이템을 build할 때 호출하는 함수
    itemBuilder: (context, index) {
        var webtoon = snapshot.data![index];
        return Text(webtoon.title);
    },
);
  • itemCount, itemBuilder 필수로 입력
  • 보이는 부분만 build함으로써 성능에 이점
  • 빌드할 항목의 갯수 미리 전달해서 메모리 활용에 도움을 준다


더 개선 : ListView.seperated

    return ListView.separated(
        scrollDirection: Axis.horizontal,
        itemCount: snapshot.data!.length,
        itemBuilder: (context, index) {
            var webtoon = snapshot.data![index];
            return Text(webtoon.title);
        },
        separatorBuilder: (context, index) => const SizedBox(
            width: 20,
        ),
    );
  • 각 리스트 사이사이에 간격을 넣을 때 사용.
  • 리스트 ‘사이’에 옵션을 넣는 것이기 때문에 맨 처음부분엔 옵션이 들어가지 않음
  • itemCount, itemBuilder, separatorBuilder 필수로 입력
  • separatorBuilder에 텍스트나 이모지, 위젯 등 뭐든 넣어도 됨