Pagination in Flutter with Firebase Firestore

Hello Everyone, This article is about how to paginate your data from the Firebase firestore.

What is Pagination?

“Pagination, also known as paging, is the process of dividing a document into discrete pages”
When we gradually load the chunks of data and display it.
It’s efficient, quick, and server-friendly to split the results up into multiple data set . if we fetch all the data at one time then things start slowing down the more results which are returned.

What do we want?

We are fetching the data from the firestore in chunks and display it our app.

Fetch data from firestore

We need to fetch all the documents from the movies collection, if we fetch all the data at once, it will be very hard to handle so we need to fetch the data gradually.

Apply cases

We also want the result order by rank.

Lets code 👨‍💻

I am using bloc to handle the data.

https://gist.github.com/ashishrawat2911/551fbc2ec2fa1b35951673481470dae3#file-moviebloc-dart

Set up the app UI

If you see, I have set up a StreamBuilder which will listen to data when sink in stream

In the initState() , I will fetch the first list from the firestore and sink into the stream.

@override
void initState() {
  super.initState();
  movieListBloc = MovieListBloc();
  movieListBloc.fetchFirstList();
}

let’s define the fetchFirstList() method in the bloc class

https://gist.github.com/ashishrawat2911/3514d4f1065adcaecb8c9bf8223320e3#file-fetchfirstlist-dart

When you run your app, the first 10 documents will be fetched and displayed in the list

Now we will have to paginate the list when the list is scrolled down to the end.

Set up a ScrollController

ScrollController controller = ScrollController();

Now add the listener

@override
void initState() {
  super.initState();
  movieListBloc = MovieListBloc();
  movieListBloc.fetchFirstList();

controller.addListener(_scrollListener);

}

we will check every time a list reaches at the end and then we fetch the next list.

void _scrollListener() {
  if (controller.offset >= controller.position.maxScrollExtent &&
      !controller.position.outOfRange) {
    print("at the end of list");
    movieListBloc.fetchNextMovies();
  }
}

Let’s define the fetchNextMovies() in our MovieBloc.

https://gist.github.com/ashishrawat2911/2e5ae1a0dfd1a8b91e40bd3eff96fb7c#file-fetchnextlist-dart

when we fetch the next list, we are appending the documents in the existing list and sink the documents in3 the stream and update the UI using StreamBuilder .

To get the more idea, have a look at more way to paginate your data

Paginate data with query cursors | Firebase
With query cursors in Cloud Firestore, you can split data returned by a query into batches according to the parameters…firebase.google.com

Check out the Github project

ashishrawat2911/Flutter_Firebase_Pagination
Pagination in Flutter with Firebase Firestore This project is a starting point for a Flutter application. A few…github.com

---

Thanks for reading this article ❤

If I got something wrong 🙈, Let me know in the comments. I would love to improve.

Clap 👏 If this article helps you.

Connect with me on Linkedin and Github

---

Feel free to connect with us:
And read more articles from FlutterDevs.com

FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! You can connect with us on Facebook, GitHub, and Twitter for any flutter related queries.

We welcome feedback, and hope that you share what you’re working on using #Flutter. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences!

Thank you for reading. 🌸