[046] 플러터 (Flutter) 배우기 - ListView.builder + 스크롤 Pagination 적용

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

 

ListView.builder + Pagination

 

이번에는 ListView.builder를 사용하여 스크롤을 내렸을 때 다음 페이지, 추가 내용을 가져와서 보여주는 스크롤 페이지네이션(Pagination) 구현 방법에 대해서 살펴보도록 하겠습니다. 보통 RestAPI를 사용하여 데이터를 가져올 때 한 번에 많은 데이터를 가지고 오는 경우는 드문데 그 이유는 한 번에 많은 데이터를 가져오게 되면 로딩 시간도 오래 걸리고 한 화면에 어차피 다 보여지지 못할 데이터들을 굳이 한 번에 가져올 필요는 없기 때문입니다. 그래서 page와 limit을 parameter로 추가하여 데이터를 가지고 오는 경우가 많은데 간단한 방법으로 이것을 구현해보는 실습을 해보도록 하겠습니다.

 

Step 1: pubspec.yaml에 http 패키지를 설치합니다.

 

 

Step 2: main.dart에 다음처럼 import 해줍니다. (이 실습에서는 모든 코드를 main.dart에 작성하여 실습하며 이 모든 코드는 맨 아래에 첨부했습니다)

 

 

Step 3: 다음처럼 변수와 initState를 작성해줍니다. 여기서 _limit은 한 번에 가져올 데이터의 숫자이며, _hasNextPage는 다음 페이지가 있는지(추가 데이터가 있는지 여부), _isFirstLoadRunning은 처음으로 데이터 로딩, isLoadMoreRunning은 추가적인 데이터 로딩, _albumList에 데이터를 누적해서 추가해줄 변수입니다. 그리고 스크롤을 조절하는데 필요한 컨트롤러 변수까지 선언해줍니다. 그리고 initState에는 _initLoad()와 컨트롤러에 ..addListener로 리스너를 달아줍니다. 아직은 에러가 나오지만 밑에서 바로 추가할 것이기 때문에 입력해주면 되겠습니다.

 

 

 

Step 4: _initLoad 메소드를 작성해줍니다. 여기에서 주목할 포인트는 먼저 _isFirstLoadRunning을 true로 바꾸어 현재 로딩중이라는 상태로 변경하고 그 다음에 데이터를 가지고 와서 _albumList에 반영해줍니다. 그리고 다 되었다면 _isFirstLoadRunning을 false로 변경하여 로딩이 모두 마무리되었음을 표시합니다. 

 

 

 

Step 5: _nextLoad() 메소드를 작성해줍니다. 여기에서 _controller.position.extendAfter < 100가 들어가는데 이거는 쉽게 이야기하여 현재 스크롤 할 수 있는 남은 픽셀 부분이 100 미만이라면 뜻이며 200이나 300으로 하셔도 됩니다. 이 extendAfter는 영어 설명으로 이렇게 되어 있습니다. The quantity of content conceptually "below" the viewport in the scrollable. This is the content below the content described by extentInside. 

https://api.flutter.dev/flutter/widgets/ScrollPosition-class.html 참고하시기 바랍니다.

 

 

Step 6: dispose 메소드도 추가하여 더 이상 사용되지 않으면 removeListener()해줍니다. 

 

 

 

Step 7: Widget build 부분입니다. 여기에 108번째처럼 먼저 처음 로딩중인지를 확인하여 로딩 중이라면 로딩 중 위젯을 표시하고 로딩이 다 되었다면 ListView.builder로 해당 불러온 데이터 부분을 보여주면 됩니다. 그리고 추가적으로 로딩 중이라는 변수가 true라면 CircularProgressIndicator 사용해주면 되며 더 이상 불러올 데이터가 없는 경우, 텍스트를 사용해서 이를 알려주면 됩니다.

 

 

 

Step 8: 아래처럼 결과가 나오면 성공입니다.

 

 

 

[전체 소스 코드]

 

 

References: 

 

https://www.kindacode.com/article/flutter-listview-pagination-load-more/

 

[유튜브 강좌 영상]

 

https://youtu.be/-0QokPwX3qA