Flutter - ListView (플러터 리스트뷰) 사용방법

오늘은 Flutter ListView에 대해 정리해보도록 하겠습니다. 

항상 드는 생각이지만.. Flutter 공식 홈페이지가 정말 정리가 잘 되어 있기 때문에 참고하여 정리합니다. 

 

https://api.flutter.dev/flutter/widgets/ListView-class.html

ListView class - widgets library - Dart API

List란 가장 일반적으로 사용되는 스크롤 위젯이며 그 내부의 child는 ListView의 내용을 채우는데 사용 됩니다. 

 

ListView를 생성하는방법에는 총 4가지의 옵션이 있습니다. 

 

1. 일반적인 ListView를 명시적으로 호출하고 children 전달하는 방법 - 적은 데이터에 사용시 용이함

2. ListView.builder builder를 사용하여 동적으로 호출 - 많은 양의 데이터 리스트에 용이함 index사용가능 

3. ListView.separated는 2번에 구분선 사용 가능 

4. ListView.custom

 

공식문서에 적혀있는 ListView의 constructor는 다음과 같습니다. 

간단하게 ListView 와 ListView.builder 그리고 ListView.separated 사용방법을 알아보겠습니다. 

 

1. ListView

예를 들어 이런 listview widget이 있고 이 widget을 이런식으로 body안에 그대로 넣는다면 ? 

바로 이런 에러가 날겁니다. 

바로 body에 위젯을 리턴해주는게 아닌 이상 column안에 사용하게 되면 에러가 날 수 밖에 없습니다. 

일단 해결 방법은 ListView안의 shrinkWrap: true 를 설정해 주거나,
ListView 위젯을 Expanded 위젯으로 감싸주어야 합니다. 

이러한 에러가 생기는 이유는 ListView는 부모 위젯의 높이에 따라 높이를 맞추게 되는데 ListView의 자식 내용이 적더라도 ListView는 자신이 사용할 수 있는 최대 공간을 사용하게 됩니다. Column의 높이는 무한이기 때문에 ListView의 높이도 따라 무한이 됨으로 에러가 생기게 되는 겁니다. 
해결 방법은 ListView의 높이를 설정하는 방법이 있습니다. 

 

개인적으로는 Expanded로 감싸는 방식을 추천드립니다. shrinkwrap을 설정하게 되면 내부 컨텐츠의 높이를 미리 정하기 때문에 오버플로우가 발생할 수 있습니다. 

 

2. ListView.builder 

사용 방법은 간단합니다. ListView에 사용할 List를 정해두고, itemBuilder를 사용하여 item을 itemcount에 맞춰서 ListView를 구성하기만 하면 됩니다. 

 

ListView.builder를 사용하는 이유는 화면에 보여지는 리스트들 그때그때 마다 호출하기 위해 사용합니다. 보이는 부분만 불러오기 때문에 ListView보다 효율적으로 화면을 구성할 수 있습니다. 

 

3. ListView.separated

 

ListView.separated는 ListView.builder에 구분선이 추가된 형태라고 생각하시면 될것 같습니다. 쓰는 방법 또한 builder와 동일하며 추가되는 점은 separatorBuilder가 추가됩니다. -> 구분선 

 

감사합니다.