flutter - infinite_scroll_pagination을 이용한 페이지네이션

 

 

https://pub.dev/packages/infinite_scroll_pagination

infinite_scroll_pagination | Flutter Package

 

 

오류1)

future형을 사용하기 때문에 fetch함수 앞에 await을 사용하는데 ()없이 사용하여 뒷부분엔 적용이 안되어 뒤 함수가 사용될때는 newItem이 사용이 안되는 오류가 발생했다

 

class ProductList extends StatefulWidget {
  //상품리스트
  ProductList({
    Key? key,
    required this.futureProducts,
    required this.topPadding,
    required this.id, //카테고리 id ,-1인 경우 전체카테고리
  }) : super(key: ValueKey<int>(id));

  final Future<List<Product>> futureProducts;
  final double topPadding;
  final int id;

  @override
  State<ProductList> createState() => _ProductListState();
}

class _ProductListState extends State<ProductList> {
  static const _pageSize = 10;

  final PagingController<int, Product> _pagingController =
      PagingController(firstPageKey: 0);

  @override
  void initState() {
 
    _pagingController.addPageRequestListener((pageKey) {
      _fetchPage(pageKey);
    });
    super.initState();
  }

  Future<void> _fetchPage(int pageKey) async {
    try {
      final newItems = await (widget.id != -1
          ? fetchProducts(widget.id, pageKey)
          : fetchProductsAll(pageKey));
      final isLastPage = newItems.length < _pageSize;
      if (isLastPage) {
        _pagingController.appendLastPage(newItems);
      } else {
        final nextPageKey = pageKey + 1;
        _pagingController.appendPage(newItems, nextPageKey);
      }
    } catch (error) {
      _pagingController.error = error;
    }
  }

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: EdgeInsets.only(top: widget.topPadding),
      child: Center(
        child: PagedListView<int, Product>(
          pagingController: _pagingController,
          builderDelegate: PagedChildBuilderDelegate<Product>(
            itemBuilder: (context, item, index) => ProductCard(
              product: item,
            ),
          ),
        ),
      ),
    );
  }
}

 

 

 

오류2)

위는 해당 infinite_scroll_pagination 3.2.0 에 있는 설명이다. 

이처럼 newItem의 길이를 더해줬으나 나는 리스트로 받아오고 url에 다음 페이지를 적어주면 되기 때문에 그냥 +1하여 다음 페이지를 넣어주었다. 따라서 nextPageKey=pageKey+1로 바꾸어주었다.

또한 json에 페이지네이션의 item 개수가 정해져 있으므로 그에 맞게 pageSize도 지정해주었으며 stateful 위젯으로 변경

 

오류3) 

부모 위젯에서 카테고리가 바뀔 때마다 해당 카테고리 id로 새로 받아와야하지만 상품리스트가 바뀌지 않는 오류 발생

해당 위젯의 키값을 바꿔주어 해결함.

카테고리 id에 해당하는 id가 바뀔 때마다 다시 빌드된다.

 

 

가장 간단하게 바꾸는 방법이 뭘까 많이 찾아봤는데 이게 가장 괜찮은것 같다. 없는 것에서 시작하는게 아니라 내 코드에 맞춤형인걸로 찾고 맞게 바꾸는게 더 어려운 것 같다.. 다음에도 이용해야지...