Flutter 강좌 - [List] 아이템의 수가 아주 많을 경우의 리스트뷰 사용법

Flutter 강좌 목록 : https://here4you.tistory.com/120

 

 

지난 강의에서 리스트뷰를 사용하는 다양한 방법에 대해서 알아봤다. 리스트뷰의 아이템을 구성하는 방법은 두가지가 있다.

첫번째 방법: 리스트뷰의 생성자를 이용하는 방법

body: ListView(
          children: <Widget>[
            ListTile(
              //leading. 타일 앞에 표시되는 위젯. 참고로 타일 뒤에는 trailing 위젯으로 사용 가능
              leading: Icon(Icons.map),
              title: Text('Map'),
            ),
            ListTile(
              leading: Icon(Icons.photo_album),
              title: Text('Album'),
            ),
            ListTile(
              leading: Icon(Icons.phone),
              title: Text('Phone'),
            )
          ],
        ),

 

두번째 방법: 리스트뷰 빌더를 이용하는 방법

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

 

첫번째 방법은 ListView의 생성자에서 아이템(ListTile)을 직접 구현하여 ListView를 구성하는 방법이다. 모든 아이템이 생성되고 리스트뷰에 등록된 후에 리스트뷰가 화면에 출력된다. 이 방법은 아이템의 수가 적을 경우 정상 동작한다.

그러나 천개 단위 혹은 만개 단위의 아이템을 가지를 리스트를 생성자를 통해 생성한다면 문제가 발생할 수 있다. 모든 아이템이 생성되고 메모리에 로딩된 후에 리스트뷰가 출력되기 때문에 많은 시간과 자원이 소비되어야 한다. 그리고 대부분의 경우 사용자는 리스트의 일부만 보고 앱을 종료할 가능성이 더 많다.

builder를 이용하면 이러한 문제를 예방할 수 있다. 빌더를 이용하면 리스트가 스크롤 되면서 필요한 아이템이 동적으로 생성된다.

 

본 강좌는 Flutter 공식 사이트의 문서를 참고하여 작성되었습니다.

https://flutter.dev/docs/cookbook/lists/long-lists

Work with long lists

 

---

Flutter Code Examples 강좌를 추천합니다.

• 제 블로그에서 Flutter Code Examples 프로젝트를 시작합니다.
• Flutter의 다양한 예제를 소스코드와 실행화면으로 제공합니다.
• 또한 모든 예제는 Flutter Code Examples 앱을 통해 테스트 가능합니다.

Flutter Code Examples 강좌로 메뉴로 이동

Flutter Code Examples 강좌 목록 페이지로 이동

Flutter Code Examples 앱 설치 | Google Play Store로 이동

Flutter Code Examples - Google Play 앱