[007] 플러터 (Flutter) 배우기 - ListView.builder (리스트 만들기)

안녕하세요~ totally 개발자입니다.

 

ListView.builder

 

이번 시간에는 저번 시간에 다루었던 ListView를 builder를 활용하여 더 효율적으로 만드는 방법을 살펴보도록 하겠습니다. 

 

기존 ListView 모습

먼저 앞서 살펴보았던 ListView의 형태입니다. 34번째부터 36번째 줄에 postContainer가 중복되고 있는 것을 확인하실 수 있고, 이것이 3개 정도면 이렇게 진행해도 무방하겠으나 훨씬 더 많은 데이터가 들어가야 하는 상황이라면 이것은 분명 비효율적입니다. 이 한계점을 극복하기 위해서 사용하는 것이 ListView.builder입니다. 

 

ListView.builder의 기본 사용법

위의 화면을 보시면 31번째부터 36번째 줄이 ListView.builder 부분인데 사용하는 방법이 매우 간단합니다. 기본적으로 itemCount와 itemBuilder 속성이 필요하고 itemCount는 용어 그대로 몇 개의 아이템을 표시할 것인지, itemBuilder는 위젯을 지정해서 카운트대로 빌드해주는 역할을 합니다. 하지만 이렇게만 적용하면 Title과 color를 parameter값으로 전달해주지 못하기 때문에 동일한 postContainer가 반복되는 문제점이 있습니다. 이것을 해결할 수 있는 방법은 여러가지 방법이 있겠지만 저는 리스트 자료형으로 새로 선언하여 객체 형태로 3개 정도 넣은 뒤 parameter값으로 전달해보도록 하겠습니다.

 

postList 선언

JSON 형태로 배열 대괄호, 객체 중괄호 형태로 데이터를 추가하여 변수를 final로 선언하였습니다.

 

 

리스트 변수를 활용한 모습

47번째 카운트에 숫자 3이 아니라 postList의 크기를 지정하고, 50-51번째 줄처럼 postContainer의 parameter 값으로 index값을 활용하여 title(제목)과 color(색상)을 postContainer 메소드에 전달해주면 됩니다. 

 

실행 모습

시뮬레이터로 확인했을 때 다음과 같이 확인할 수 있습니다. 이처럼 ListView.builder와 리스트 변수를 적절히 활용하면 반복적인 코드를 줄일 수 있고 관리와 수정도 더 간단하다는 장점이 있습니다. 다음 시간에는 GridView에 대해서 살펴보도록 하겠습니다. 감사합니다.

 

[전체 소스 코드]

 

 

[유튜브 강좌 영상]

 

https://youtu.be/SeZPQ93HpeU