Flutter - ListView 효율적으로 사용하기

ListView.builder를 사용한다.

이전 글의 ListView는 코드적으로 문제는 없지만, 많은 양의 데이터를 가지고 오게 된다면
코드를 알아보기 굉장히 어려워지므로, 해결한 방법이 바로 ListView.builder이다.

ListView.builder는 기본적으로 itemCount와 itemBuilder 속성이 필요하다.
itemCount는 몇 개의 아이템을 표시할건지, itemBuilder는 위젯을 지정해서 카운트대로 빌드해주는 역할을 하게 된다.

JSON 형태로 되어있는 데이터가 있다고 하자.

final postList = [
    {
      "title" : "Sample Title 1",
      "color" : Colors.green,
    },
    {
      "title" : "Sample Title 2",
      "color" : Colors.redAccent,
    },

 

이를 사용하기 위해 ListView.builder를 사용한 모습니다.

body: ListView.builder(
        itemCount: postList.length,
        itemBuilder: (BuildContext con, int index) {
          return postContainer(
            title: postList[index]["title"] as String,
            colorData:  postList[index]["color"] as Color,
          );
        }

 

이는 index를 활용하여 postList의 데이터들을 가져온다. 

이때 주의할 점은 as String, as Color 처럼 as를 꼭 써야한다.

 

해당 글의 전체 코드 :  https://github.com/jisssuu/flutter-study/blob/chap06/flutter_application_1/lib/main.dart

flutter-study/flutter_application_1/lib/main.dart at chap06 · jisssuu/flutter-study