[flutter] ListView에 아이템을 동적으로 추가하기

08 Dec 2023

Flutter 앱을 개발할 때 ListView에 동적으로 아이템을 추가하는 기능은 매우 유용합니다. ListView는 다양한 크기의 아이템 목록을 표시할 수 있으며, 동적으로 아이템을 추가하면 화면에 실시간으로 데이터가 업데이트되는 효과를 볼 수 있습니다.

1. ListView.builder 사용하기

ListView.builder를 사용하면 스크롤이 가능한 리스트를 효율적으로 구축할 수 있습니다. ListView.builder는 lazy loading을 지원하여 현재 화면에 나타나는 아이템만을 렌더링하므로 대규모 데이터 목록에 적합합니다.

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

위의 예제에서 items는 ListView에 표시될 아이템 목록을 저장하는 List입니다.

새로운 아이템을 동적으로 추가하기 위해서는 ListView를 표시하는 화면에서 상태를 관리하고, 새로운 아이템을 추가한 뒤 화면을 업데이트해야 합니다.

List<String> items = ['아이템 1', '아이템 2', '아이템 3'];

...

void addItem() {
  setState(() {
    items.add('새로운 아이템');
  });
}

위의 예제에서 addItem 함수는 새로운 아이템을 items 리스트에 추가하고, setState를 호출하여 화면을 다시 그리도록 합니다.

이제 ListView에 아이템을 동적으로 추가하는 방법에 대해 알아보았습니다. Flutter를 사용하면 ListView를 활용하여 다양한 동적인 화면을 구현할 수 있습니다.