Flutter list view need to update infinite scroll pagination

Question

I have list view with data. i m trying to update infinite scroll pagination. But i couldnot add.

my list view

class ListData {
final int id;
final String emp_name;
final String age;
final String type;
final String joinDate;

ListData({
required this.id,
required this.emp_name,
required this.age,
required this.type,
required this.joinDate

});


static List<ListData> getList() => data.map(
    (element) => ListData(
    id: element['id'],
    emp_name: element['emp_name'],
    visa: element['age'],
    type:element['type'],
    expiryDate: element['joinDate'],
),
)
  .toList();

}

this file return list of data's

But all the data coming in view. Need to add pagination for this. how to add infinite scroll pagination for this. Please any one can give your knowledge

Thank you

List view code

 class ListingData extends StatelessWidget {

  final List<ListData> emp;

 const ListingData({
  Key? key,required this.emp,}) : super(key: key);

 @override
 Widget build(BuildContext context) {
  return ListView.builder(
   itemCount: emp.length,
   itemBuilder: (context, index) {
    final empData = emp[index];
    return ListTile(
      title: Text('${empData.emp_name}'),
    
      );
    },
  );
 }
 }

How to add pagination here Few examples are referred but not able to do me. Please give some inputs it save my day

Thank you

Answer 1

I'm created a demo structure for your question, which I hope could be helped

class PaginationDemo extends StatefulWidget {
  const PaginationDemo({Key? key}) : super(key: key);

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

class _PaginationDemoState extends State<PaginationDemo> {
  final List<ListData> _rawListData = [ListData(), ListData(), ListData(), ListData()];
  final List<ListData> paginatedListData = [];
  bool isReachedMax = false;
  int page = 0;


  @override
  initState() {
    getListDataWithPagination();
    super.initState();
  }

  void getListDataWithPagination() {
    const int limit = 10;
    final int startIndex = page * limit;
    final int endIndex = startIndex + limit;

    setState(
      () {
        final paginatedData = _rawListData.sublist(startIndex, endIndex);
        if (paginatedData.isEmpty) {
          isReachedMax = true;
        } else {
          paginatedListData.addAll(paginatedData);
          page++;
        }
      },
    );
  }

  @override
  Widget build(BuildContext context) {
    return NotificationListener<ScrollNotification>(
      onNotification: (notification) {
        if (notification.metrics.pixels == notification.metrics.maxScrollExtent) {
          if (isReachedMax) return false;
          getListDataWithPagination();
        }
        return false;
      },
      child: ListView.builder(
        itemBuilder: (BuildContext context, int index) {
          return index >= paginatedListData.length
              ? const Center(child: CircularProgressIndicator())
              : ListTile(
                  title: Text('${paginatedListData[index].emp_name}'),
                );
        },
        itemCount: isReachedMax ? paginatedListData.length : paginatedListData.length + 1,
      ),
    );
  }
}