[Flutter] 이미지 로딩 느림 현상 -Pagination 구현

[이미지 로딩 느림 현상]

스타일 선택 페이지와 스타일 추천 페이지에서 이미지들이 리스트로 쫙 나열되는데 아무래도 db에서 이미지를 불러오기 때문에 매끄럽지 못한 현상이 있다.

검색 결과 pagination을 통해 해결할 수 있다고 해서 한번 구현해보려고 한다.

pagination이란?

다령의 데이터를 부분적응로 나눠서 불러오는 기술로, 페이지 로딩 시간을 단축 시킬 수 있다.

pagination에 크게 2가지 종류가 있다.

1) Page Based Pagination

• 숫자 페이지나 더보기 등을 클릭하면 다음 페이지로 넘어가는 형태
• 1페이지에 데이터를 추가하게 되면 데이터가 밀려서, 뒷 페이지에서 중복 데이터를 볼 수 있다는 단점 존재

2) Cusor Based Paginaion

• 가장 최근 데이터를 기준으로 다음 데이터를 가져오는 형태
• 해당 예시를 쿠팡 페이지로 이해하면 좋을듯
• 데이터 요청시, 가장 최근 데이터가 기준이 되기 때문에, 데이터가 추가되거나 삭제 되어도 누락, 중복 등의 발생 확률이 적음

사실 우리는 DB에 데이터를 더 추가할 일이 적기 때문에 두 방법 모두 사용해도 되지만,
더 매끄러운 UI를 생각했을 땐 Cusor Based Pagination이 적합하다고 생각해서 선택했다.

  @override
  void initState() {
    super.initState();
    _loadData();
    _choiceShoweDialog();
    _scrollController.addListener(() {
      if (_scrollController.position.pixels ==
              _scrollController.position.maxScrollExtent &&
          !isLoading) {
        _loadData();
      }
    });
  }
  
   MasonryGridView.builder(
      controller: _scrollController,
      gridDelegate:
          SliverSimpleGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2),
      itemCount: _imageList.length + (isLoading ? 1 : 0),
      mainAxisSpacing: 8,
      crossAxisSpacing: 8,
      itemBuilder: (context, index) {
        if (index == _imageList.length) {
          return Center(child: CircularProgressIndicator());
        }