Flutter Tutorial - Cloud Firestore 🔥 | Pagination & Infinite Scrolling [2022] FlutterFire UI

how to integrate infinite scrolling and pagination with firestore in flutter firstly you need to have set up a firebase project and connect it to your flutter app secondly to perform infinite scrolling and pagination therefore we need to have some data inside a firestore that we can load in my case i have added a collection with some post documents to easily create these firebase documents you can create in your interstate method and upload random method and here you reference the post collection and after it you generate 500 numbers for each of these numbers i create the post object and lastly we add then this post object to our post collection whereas you cannot put the post object directly to the collection you also need to serialize it therefore we add a converter and inside of it we convert the json data that we get from firebase to the post object by using the from json method and we also call the 2js method on our post object so that we can serialize and deserialize our object therefore i have created this object with some fields and below it we have the from json and 2js method for doing the serialization all right and finally you need to run your flutter app so that all the documents are uploaded to the firebase database and after this you can commence this out or you can also remove this code again and the last step is to display these documents from our post collection inside of our app ui therefore you only need to create the firestore listview widget which comes from the flutter fire ui package this widget works similar to the normal list view widget whereas you define two parameters mandatory first of all the query all the data that you want to load from the firestore collection and lastly you have an item builder where you can then display this data whereas over the snapshot we get the data from each document and we want to convert it to a post object therefore you need to go here up and define the post object then you see we get an arrow because this is right now not working you need to go to your collection and here you add then also this converter that we have also used before for serializing your post object and at the end we only need to display this post object and therefore i return in this case a list tile and i display then the post title likes and also the image in front let's try it out and let's hot restart our application and you will see that our app is then loading the data from the firestore collection whereas infinite scrolling and pagination is automatically supported for your list so you can scroll down and we will always load more data from firebase you also can define within the firestore list view the page size of how many elements are loaded once you reach the end of the list so in this case 20 new items will be loaded from the firebase collection by default if you don't specify the page size then he will always load 10 more items the post objects are currently unsorted inside the flutter app and therefore you can call on your collection the normal firebase method such as order by with this after hot restarting the application all post objects are ordered and you can scroll also down and he will always load more items that are also ordered sometimes you want to support infinite scrolling and pagination for other widgets than a list view and if you want to do so then you simply replace it by the firestore query builder and now within this builder property you can then define the widget that you want to display instead in this case a grid view next over the snapshot you can get the length of how many items you should display in your grid view and finally we want to get then over the snapshot each of the documents and we get then the data of the documents so that we get a post object and lastly we only need to build this post object therefore i create a new method and here i create a card widget and display then the post object such as the image and also the text inside if your hot restart two items will be displayed inside the app and this is the page size that we have defined by default if you don't specify it then 10 items will be loaded and here next to this successful case we also want to add the other cases so over your snapshot you can see if it is currently fetching some data then you can show a circular progress indicator and you can also display something if some error occurs and lastly to support also pagination and to display more data therefore you need to fetch this data inside of your item builder so every time you have to call the snapshot fetch more method if you have reached the end of your widget simply check if more items can be loaded from firebase and if so then we load more data as a result if we hot reload then he loads more data and if we scroll down then he will also have this infinite scrolling and pagination automatically supported for in this case the gridview widget [Music] you

Channel: HeyFlutter․com

Views: 16,136

Keywords: cloud firestore, firebase, flutter, flutter 2.8, flutter firestore infinite listview, flutter firestore infinite scrolling, flutter firestore inifinte gridview, flutter firestore lazy loading, flutter firestore pagination, flutter firestore realtime pagination, flutter listview pagination, flutter pagination, flutter pagination listview, flutterfire ui, infinite listview, listview, paginated listview, pagination, scroll

Id: si6sTuVZxtw

Length: 5min 25sec (325 seconds)

Published: Thu Jan 06 2022