Flutter - 스크롤 페이지네이션 구현하기

Flutter 스크롤 페이지네이션 구현하기

 

 

간단한 스크롤을 만들어 페이지 네이션을 구현해보려 한다.

기본적으로 scrollView 와 scroll controller 를 만들어 준다.

그후에 scrollController에 리스너 함수를 만들어줘야한다.

 

 

리스너 함수

 

페이지네이션이 작용하는 원리는 이렇다

현재 스크롤의 위치 >= 마지막 스크롤의 위치

그러면 마지막 스크롤의 위치에 같아졌을때

데이터를 더 불러오면 된다.

if (scrollController.position.maxScrollExtent == scrollController.position.pixels) {
  projectListBloc.getMoreList();
}

maxScrollExtent는 최대(마지막) 스크롤 위치이고

offset 이나 pixels로 현재위치를 알수있다.

최대 스크롤 위치 그아래로 내려가면 getMoreList()함수를 실행시킨다.

 

데이터 받아오기

 

getMoreList는 bloc 에서 구현했다.

void getMoreList() {
    networkState.add(NetworkState.Loading);

    connection(
            first: first, after: _lastCursor, userKey: userKey, filter: filter)
        .then((data) {
      _lastCursor = data['lastCursor'];
      final List<ProjectModel> newList = data['list'];
      storedList = List<ProjectModel>.from(list.value)..addAll(newList);

      list.add(storedList);

      checkPageIsFinish(data['list'].length);
    });
  }

 

로딩 중이라는 상태를 저장하기위해 networkState 스트림을 만들어놨고

UI 에서는 스트림 빌더를 사용해 이 스트림상태를 보고 로딩 위젯을 보여준다.

로딩 위젯 구현은 아래에 추가로 설명하겠다.

 

 

새로운 데이터를 받아 기존 데이터에 추가

 

나는 리스트들을 관리할 스트림으로 rxdart - BehaviorSubject를 사용하고있다.

그냥 리스트가 아니라 단순히 add 하면 기존 데이터가 날아간다.

그래서 모든 데이터들을 모아서 스트림에 add 해야한다.

 

connection 함수를 통해 결과값이 data로들어온다.

이때 필요한것은

1.페이지 정보를 저장할 변수 _lastCursor (들어온 데이터에서 넘겨줘야한다. )

2.모든 데이터를 저장할 변수 storedList

3.지금까지 가지고있던 데이터 list.value

4.새로 들어온 데이터 가 필요하다. data['list']

 

 

그래서 storedList변수에 모든 데이터들을 저장한후

스트림에 storedList를 넣어줬다.

checkPageIsFinish 에서 네트워크 상태 를 저장해 준다(정상, 끝 등등..)

 

 

로딩위젯

 

로딩위젯을 보여주기는 어렵지않다

gridView / listView

에서 count 를 1을 더 올려준후에

마지막 아이템에 loadingWidget 을 넣어주면 된다.