[Flutter.241115] 길고 긴 리스트를 다뤄야 할 때에는 ListView.builder

서너개의 리스트 항목을 보여주는 것은 ListView() 만으로 충분하다.

하지만 사용자가 보유한 수십개의 게임 아이템 중에 선택을 해야 하는 화면을 만들어야 한다거나,

출발하고 도착할 지하철 역을 리스트에서 고르는 화면을 만들어야 한다면,

혹은 키워드에 걸린 검색 결과 리스트를 뽑아주는 화면을 만들어야 한다면?

 

리스트 항목이 적어도 열개는 넘을테니 이럴 때에는 ListView.builder를 사용하는 것을 고려해 봅시다. 

 

 

참조한 문서는 다음과 같다. 

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

Work with long lists

 

 

내게 주어진 기차역 리스트.

  final List<String> stations = [
    "수서",
    "동탄",
    "평택지제",
    "천안아산",
    "오송",
    "대전",
    "김천구미",
    "동대구",
    "경주",
    "울산",
    "부산"
  ];

 

이 중에, 수서, 대전, 경주, 부산 가 봤고... 천안 아산은 고속도로 휴게소 들렀던 것 같고.. 

 

만약에 한 땀 한 땀 리스트 타일로 잡아서 나열한다면, 다음과 같은 코드가 될 것이다. 

ListView(
  children: [
    ListTile(title: Text("수서")),
    ListTile(title: Text("동탄")),
    ListTile(title: Text("평택지제")),
    ListTile(title: Text("천안아산")),
    .
    .
    .
    ListTile(title: Text("울산")),
    ListTile(title: Text("부산")),
  ],
);

 

사실 할 만 하다. 왜냐면 여기서 출력할 기차역은 고작 11개에 불과하기 때문이다. 하지만 여기서 그냥 넘어갔다간, 다음에 한 43개 리스트 보여줘야 할 때에도, "난 할 수 있어, 11개도 출력해 봤는걸? 그거 그냥 4번 정도 반복하면 가능하잖아?" 하면서 쓸데없이 손가락을 혹사시킬 지도 모른다. 그러다 또 나중에 한 138개 리스트 보여줘야 한다면? 그 때도 한 땀 한 땀 리스트타일 잡아서 보여줄텐가????? 정녕?????

 

우리의 관절은 소중하고, 앞으로 오랜 시간 함께 가야 하므로, 관절 건강을 위해 ListView.builder()를 공부해 둬야 한다. MUST!!! 

 

그런데 플러터 팀 참 작명도 잘한다 싶다. ListTile 이라니, 너무 귀여운 작명인 것이다. 욕실 타일도 생각나고...

 

여튼, 중요한 ListView.builder()를 사용한다면? 코드는 어떻게 바뀔까?

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

 

아주 간단하게 바뀐다. index도 자동으로 잡아서 출력해주니. 이건 뭐 아주 효자 혹은 효녀 빌더인 것이다.

 

 

끝.