[Flutter] ListView 사용 방법

1. ListView

 리스트뷰는 가장 일반적으로 사용되는 스크롤 위젯입니다.

 

---

 

2. ListView 생성 방법

 ListView 생성 방법에는 4가지가 있습니다. 기본 생성자, ListView.builder 생성자, ListView.separated 생성자, ListView.custom 생성자입니다. 그 중 가장 많이 사용되는 것은 ListView.builder 입니다. 

 

1) 기본 생성자

 기본 생성자 방식으로는 자식 위젯의 수가 적은 경우에 적합합니다. 왜냐하면 기본 생성자 방식은 실제로 보이는 것 뿐만 아니라 모든 자식을 생성하는 작업이 필요하기 때문입니다. 즉, 화면에 보이는 항목 뿐만 아니라 리스트에 포함된 모든 항목을 미리 렌더링하고 메모리에 올리기 때문에 많은 항목을 가진 리스트일수록 비효율적입니다.

 

ListView(
  children: [
    ListTile(title: Text("Item 1")),
    ListTile(title: Text("Item 2")),
    ListTile(title: Text("Item 3")),
  ],
);

 

2)  ListView.builder

 ListView.builder 생성자 방식은 필요한 아이템만 동적으로 생성하여 메모리 및 성능 최적화에 유리합니다. 즉, 화면에 실제로 표시되는 아이템만 생성하고 렌더링합니다. 화면에 보이지 않는 아이템은 생성하지 않기 때문에 메모리 사용이 효율적입니다.  그래서 많은 데이터나 무한 스크롤 구현에 적합합니다.

 

ListView.builder(
  itemCount: items.length,
  itemBuilder: (context, index) {
    return ListTile(
      title: Text(items[index]),
    );
  },
);

 

3) ListView.separated

 ListView.separated 생성자 방법은 항목 사이에 구분선 또는 구분자가 필요할 때 사용합니다.

 

ListView.separated(
  itemCount: items.length,
  itemBuilder: (context, index) {
    return ListTile(
      title: Text(items[index]),
    );
  },
  separatorBuilder: (context, index) {
    return Divider();
  },
);

 

4) ListView.custom

 ListView.Custom 생성자 방법은 자식 커스터마이징이 필요할 때 사용합니다. 

 

ListView.custom(
  childrenDelegate: SliverChildBuilderDelegate(
    (context, index) {
      return ListTile(
        title: Text('Item $index'),
      );
    },
    childCount: items.length,
  ),
);

 

---

 

3. 요약 정리

 아이템이 정적이고 개수가 많지 않을 때 ListView 기본 생성자 방법을 사용하고, 동적으로 아이템을 생성하거나 아이템이 많을 경우에는 ListView.builder 생성자 방법을 사용하면 됩니다. 이 2가지만 알아도 문제는 없을 듯 합니다.