getting the pages multible times from infinite scroll pagination package

Question

im building an app that gets data from api and the api has pages so i used the infinite scroll pagination package but when the data appears , the first page data appears and when i scroll down the first page appears two times and the second page appears , when i scroll again , the first and second page appears with the third page etc this is the code im using

import 'dart:async';
import 'package:MyCima/models/films_data_model.dart';
import 'package:MyCima/services/services.dart';
import 'package:flutter/material.dart';
import 'films_card.dart';
import 'package:infinite_scroll_pagination/infinite_scroll_pagination.dart';

class ShowsListDesign extends StatefulWidget {
  final String filterName;
  const ShowsListDesign(this.filterName, {Key? key}) : super(key: key);

  @override
  _ShowsListDesignState createState() => _ShowsListDesignState();
}

class _ShowsListDesignState extends State<ShowsListDesign> {
  final ServicesClass _servicesClass = ServicesClass();
  FilmsDataModel modelClass = FilmsDataModel();
  final PagingController _pagingController = PagingController(firstPageKey: 1);

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

  Future<void> _fetchPage(int pageKey) async {
    try {
      final List newItems =
          await _servicesClass.getFilms('posts/$pageKey/${widget.filterName}');
      final isLastPage = newItems.length < 20;
      if (isLastPage) {
        _pagingController.appendLastPage(newItems);
      } else {
        final nextPageKey = pageKey + 1;
        _pagingController.appendPage(newItems, nextPageKey);
      }
    } catch (error) {
      _pagingController.error = error;
    }
  }

  @override
  Widget build(BuildContext context) => PagedGridView(
        pagingController: _pagingController,
        builderDelegate: PagedChildBuilderDelegate(
            itemBuilder: (BuildContext context, item, int index) {
          modelClass = FilmsDataModel.fromJson(item);
          return FilmsCard(
            key: UniqueKey(),
            image: modelClass.thumbUrl,
            title: modelClass.title,
            year: modelClass.year,
            id: modelClass.id,
          );
        }),
        gridDelegate: const SliverGridDelegateWithMaxCrossAxisExtent(
          maxCrossAxisExtent: 250,
          crossAxisSpacing: 24,
          mainAxisSpacing: 24,
          childAspectRatio: (2 / 3),
        ),
      );

  @override
  void dispose() {
    _pagingController.dispose();
    super.dispose();
  }
}

Answer 1

I think your mistake is from "final isLastPage = newItems.length < 20;" you comparison is from the new data fetched and not the total amount of posts fetched since the first time.

and be sure that your request give you the good response

this is my fetchPage

Future<void> fetchPage(int pageKey) async {
try {
  final newPage = await _presenter.getWithPagination(pageKey, 10);

  final previouslyFetchedWordCount =
      _pagingController.itemList?.length ?? 0;

  final isLastPage = newPage.isLastPage(previouslyFetchedWordCount);
  final newItems = newPage.itemList;

  if (isLastPage) {
    _pagingController.appendLastPage(newItems);
  } else {
    final nextPageKey = pageKey + 1;
    _pagingController.appendPage(newItems, nextPageKey);
  }
} catch (error) {
  _pagingController.error = error;
}