Flutter 앱을 개발할 때, 화면에 표시된 리스트의 아이템을 스크롤하여 추가 아이템을 동적으로 불러오는 무한 스크롤링(infinite scrolling) 을 구현해야 하는 경우가 있습니다. ListView를 사용하여 이러한 무한 스크롤링을 구현하는 방법을 살펴보겠습니다.

ListView.builder로 무한 스크롤링 구현하기

ListView.builder(
  itemCount: _items.length + 1,
  itemBuilder: (BuildContext context, int index) {
    if (index == _items.length) {
      // 추가 아이템 로딩을 표시하는 위젯 반환
      return _buildLoadingIndicator();
    } else {
      // 리스트 아이템을 표시하는 위젯 반환
      return _buildListItem(_items[index]);
    }
  },
  controller: _scrollController,
  // 스크롤 감지 및 추가 아이템 로딩 처리 등을 위한 ScrollController 설정
)

위의 코드에서 ListView.builder의 itemCount를 기존 아이템 개수에 1을 더한 값으로 설정하고, itemBuilder에서 index가 기존 아이템 개수와 같을 때 추가 아이템 로딩을 표시하는 위젯을 반환합니다.

또한, ScrollController를 사용하여 스크롤 감지와 추가 아이템 로딩을 처리할 수 있도록 설정합니다.

ScrollController를 활용하여 무한 스크롤링 구현하기

ScrollController _scrollController = ScrollController();

@override
void initState() {
  super.initState();
  _scrollController.addListener(() {
    if (_scrollController.position.pixels == _scrollController.position.maxScrollExtent) {
      // 추가 아이템 로딩 처리
      _loadMoreItems();
    }
  });
}

void _loadMoreItems() {
  // 추가 아이템 로딩 및 리스트 갱신 로직 구현
}

ScrollController의 addListener를 통해 스크롤 위치 변화를 감지하고, maxScrollExtent를 이용하여 리스트의 끝에 도달했을 때 추가 아이템 로딩을 처리할 수 있습니다. _loadMoreItems 메서드에서 추가 아이템을 로딩하고 리스트를 갱신하는 로직을 구현합니다.

이와 같이 ListView.builder와 ScrollController를 활용하여 Flutter 앱에서 ListView에서의 무한 스크롤링을 구현할 수 있습니다.

결론

ListView를 활용하여 리스트 아이템을 스크롤하여 무한 스크롤링을 구현하기 위해 ListView.builder 및 ScrollController를 사용하는 방법에 대해 알아보았습니다. 이를 통해 Flutter 앱에서 동적으로 아이템을 추가하는 무한 스크롤링을 구현하는 데 도움이 될 것입니다.

Flutter ListView 공식 문서를 참고할 수 있습니다.