How can I add pagination to this api data in Flutter?

by Kit Mateyawa   Last Updated September 12, 2019 02:26 AM

Hi I'm trying to add pagination to api data which has a "total_count=7153" results. So pagination makes the most sense here.

Project is here:https://github.com/kitmt/flutter-api/blob/master/api.dart

Here's what I'm trying to achieve, this bottom bar here: https://github.com/X-Wei/flutter_catalog/blob/master/lib/routes/lists_datatable_ex.dart

Selectable results per page and the forward to next page or back to previous page like in the above project.

availableRowsPerPage: <int>[100, 200, 400, 800],
"total_pages": <int>[72, 36, 18, 9 ]

The project already has a Pagination class that comes with the api. I'm just not sure how to implement it.

class Pagination {
  int totalCount;
  int totalPages;
  int currentPage;
  int limit;

  Pagination({
    this.totalCount,
    this.totalPages,
    this.currentPage,
    this.limit,
  });

  factory Pagination.fromJson(Map<String, dynamic> json) => Pagination(
    totalCount: json["total_count"] == null ? null : json["total_count"],
    totalPages: json["total_pages"] == null ? null : json["total_pages"],
    currentPage: json["current_page"] == null ? null : json["current_page"],
    limit: json["limit"] == null ? null : json["limit"],
  );

  Map<String, dynamic> toJson() => {
    "total_count": totalCount == null ? null : totalCount,
    "total_pages": totalPages == null ? null : totalPages,
    "current_page": currentPage == null ? null : currentPage,
    "limit": limit == null ? null : limit,
  };
}

class Status {
  String message;
  int statusCode;

  Status({
    this.message,
    this.statusCode,
  });

  factory Status.fromJson(Map<String, dynamic> json) => Status(
    message: json["message"] == null ? null : json["message"],
    statusCode: json["status_code"] == null ? null : json["status_code"],
  );

  Map<String, dynamic> toJson() => {
    "message": message == null ? null : message,
    "status_code": statusCode == null ? null : statusCode,
  };
}

Any help is much appreciated. Thank you!

Tags : flutter dart


Related Questions





rxdart usage in flutter not being recognized.

Updated August 17, 2018 16:26 PM