Simple and Excellent... Thanks! One correction is to check the length of the List prodducts in the getProducts() function as well, so that getMoreProducts() is not called if the initial list itself is small.
Great stuff. Well explained. Useful to know. Will be tuning in for more if this. Keep em coming please. If you have something on more generic custom API calls that’s what I’m looking for. No doubt it’s on here just need to hunt around as always with this game.
Good tutorial but 1 problem though! In the below statement when we fetch new products : => products.addAll(querySnapshot.docs); If i don't use this statement in setState() method then the listview.builder() doesn't render/show new content. The products array does have new data coming from firebase by pagination but the data is not shown by listview.builder automatically or should i say that the we can't scroll downwards.
i getting this error please help me : E/flutter (25414): [ERROR:flutter/lib/ui/ui_dart_state.cc(209)] Unhandled Exception: Invalid argument: Instance of '_JsonQueryDocumentSnapshot'
I'm running into a weird issue.... my Text(products[index].data['title']) is giving me an error on title this is the error: The operator '[]' isn't defined for the type 'Map Function()'. Try defining the operator '[]'. please help!
Hey there is a mistake in your code, I believe. At the very end, at Line 73 you have " if(querySnapshot.documents.length < _per_page) ". Since you could have 3 more items but if its less than _per_page it would not display. It should be " if(querySnapshot.documents.length == 0) " This should fix it. I also had to use "Query q = _firestore .collection('Post') .orderBy('order') .startAfterDocument(_lastDocument).limit(_perPage);" Thanks for the help otherwise!
The code he wrote is actually right, when length < _per_page , he will fetch the documents and for the next time when getmoreProducts is called , it shouldn't fetch , cause we have already fetched all the documents in the last call , when moreProductsAvailable is set to false.
I think there is an issue with the code. Everything you set in the getnextproduct should be under setState(). I am not sure how does your demo code works as expected.
Hi i have a query.. I have 6 collections and i want my code to iterate itself through the collections.. So even if i add a new collection, i need not change the code but the iterator will have 7 collections in it?? Any possible solutions??
Getting list of collections is not possible. You can, however, store names of your collections in a seperate place, may be in a seperate collection/document.
@@thesamarthagarwal thanks... I will give it a try and get back... Also I was thinking of creating a new collection and put all the existing collection within it... Similar to what u have suggested...
I checked it out. This is pretty much similar to how I ended up implementing it. But I used the index of the listview builder to reload content, which I personally find cleaner than using a ScrollController. This approach didn’t use a futurebuilder though, because I originally implemented this using a future builder yo wanted to keep it. I had to scrap it though.
Me ha sido de mucha utilidad. Gracias. Algunas mejoras al código para que sea mas eficiente con la ultima version de cloud_firestore. *** Les dejo el codigo abajo: ** Obtener LastDocument con querySnapshot.documents.last ** Usar condicional querySnapshot.documents.length > 0 para saber si aun hay elementos por cargar. Firestore _firestore = Firestore.instance; List _products = []; bool _loadingProducts = true; int _paginationLimit = 20; DocumentSnapshot _lastDocument; ScrollController _scrollController = ScrollController(); bool _gettingMoreProducts = false; bool _moreProductsIsAvailable = true; _getProducts() async { Query q = _firestore.collection('producs').limit(_paginationLimit); setState(() => _loadingProducts = true); QuerySnapshot querySnapshot = await q.getDocuments(); if (querySnapshot.documents.length > 0) { _lastDocument = querySnapshot.documents.last; } _products.addAll(querySnapshot.documents); setState(() => _loadingProducts = false); } _getMoreProducts() async { if (!_moreProductsIsAvailable || _gettingMoreProducts) return;
Users note to: Include all your assignment code inside setstate() in the function(s), it won't work without that. ex. setState(() { _lastDocument = querySnapshot.docs[querySnapshot.docs.length - 1]; _posts.addAll(querySnapshot.docs); _gettingMorePosts = false; if (querySnapshot.docs.length < _perPage) { _morePostsAvailable = false; } })
this is trash code I guess because of "_scrollController" I realize that int i = 0; _scrollController.addListener(() { double maxScroll = _scrollController.position.maxScrollExtent; double currentScroll = _scrollController.position.pixels; double delta = MediaQuery.of(context).size.height * 0.25; if (maxScroll - currentScroll < delta) { i += 1; print("i = " + i.toString()); _getmoreProducts(); } }); guess what when I scrolled should be counted only once, but it is counted dozens of times.
![Flutter Tutorial - Cloud Firestore 🔥 | Pagination & Infinite Scrolling [2022] FlutterFire UI](/img/n.gif)
pagination made easy.
I have always feared this topic and finally faced it
i could never understand this before, thank you!
Alright man, you killed it. You're a great teacher.
How u trigger `load more method` in scroll listener , when the ListView cannot be scroll at the beginning?
Is it also work when scrolling back to top because when im scrolling back to top, images reload again and i get same problem
thanks for posting this man. got exactly what I needed
how can we do it if we are using a StreamBuilder to make query to firestore
Simple and Excellent... Thanks! One correction is to check the length of the List prodducts in the getProducts() function as well, so that getMoreProducts() is not called if the initial list itself is small.
why we did not use the method _getProducts() directly in the listener of the scroll instead of doing another method for loading more products?
such an amazing content, the way you explain things is brilliant :D
Great stuff. Well explained. Useful to know. Will be tuning in for more if this. Keep em coming please. If you have something on more generic custom API calls that’s what I’m looking for. No doubt it’s on here just need to hunt around as always with this game.
Thanks Samarth bro
Good tutorial but 1 problem though!
In the below statement when we fetch new products :
=> products.addAll(querySnapshot.docs);
If i don't use this statement in setState() method then the listview.builder() doesn't render/show new content.
The products array does have new data coming from firebase by pagination but the data is not shown by listview.builder automatically or should i say that the we can't scroll downwards.
Come back after long time... Nice to see you.
Thanks a lot for this helpful one.
I was looking for this.
So clear and described in detail.
simple and very understandable explanation.thanks
Will this ensure that updates on firestore are stilll dynamically sent through to the app?
what about streaming data ?
understand english very little, but you explanation is very good, thank you
i getting this error please help me : E/flutter (25414): [ERROR:flutter/lib/ui/ui_dart_state.cc(209)] Unhandled Exception: Invalid argument: Instance of '_JsonQueryDocumentSnapshot'
Helpful video, is there is a way to use pagination in flutter if i not use cloud firestore ?
Share link of the Github for this project, please!
how to implement this with stream builder cuz i am deleting the items
I'm running into a weird issue.... my Text(products[index].data['title']) is giving me an error on title
this is the error:
The operator '[]' isn't defined for the type 'Map Function()'.
Try defining the operator '[]'.
please help!
nevermind figure it out.... just do .data()['title']
Hey there is a mistake in your code, I believe.
At the very end, at Line 73 you have " if(querySnapshot.documents.length < _per_page) ". Since you could have 3 more items but if its less than _per_page it would not display.
It should be " if(querySnapshot.documents.length == 0) " This should fix it.
I also had to use "Query q = _firestore
.collection('Post')
.orderBy('order')
.startAfterDocument(_lastDocument).limit(_perPage);"
Thanks for the help otherwise!
You're wright
Or you can pass less than or equal to ...
@@badmanthegreat I believe equal to is not working too. Let say your _perPage is 10 and you have 10 more items then 10 == 10 and return false.
Well spotted. Nice work
The code he wrote is actually right, when length < _per_page , he will fetch the documents and for the next time when getmoreProducts is called , it shouldn't fetch , cause we have already fetched all the documents in the last call , when moreProductsAvailable is set to false.
I think there is an issue with the code. Everything you set in the getnextproduct should be under setState(). I am not sure how does your demo code works as expected.
Question, ist better to use flutter over ionic for woocommerce implementation?
It is like comparing Apples and Oranges.
welcome back bro
Thanks man, great video. This was exactly a looking for!
great man. A million thanks.
This is very helpful thank you dear Sir.
I think you can try to refactor this with rxdart to make the code more readable and the function more reactive?
Thank you but that wasn't the objective of the video. It is intended for beginners.
@@thesamarthagarwal I see, hope to see some video with more advance content such as using rxdart or some other packages! Thanks for the great video!
Hi i have a query..
I have 6 collections and i want my code to iterate itself through the collections..
So even if i add a new collection, i need not change the code but the iterator will have 7 collections in it?? Any possible solutions??
Getting list of collections is not possible. You can, however, store names of your collections in a seperate place, may be in a seperate collection/document.
@@thesamarthagarwal thanks... I will give it a try and get back... Also I was thinking of creating a new collection and put all the existing collection within it... Similar to what u have suggested...
Keep it up 💪
I like your videos. Thanks
Thank you for making this video
how was the data in firestore generated and populated? I have like to try running your program that I have downloaded from github.
I wrote a script to add some documents to a collection.
Now you can use this "paginate_firestore 0.1.1"
It works very well.
like this
return Scaffold(
body: PaginateFirestore(
itemBuilder: (context, documentSnapshot) {
return ListTile(
title: Text(documentSnapshot.data['title'],
maxLines: 1,
style: new TextStyle(
fontWeight: FontWeight.w500,
color: Colors.deepOrangeAccent,
fontSize: 18.0)),
subtitle: Text(documentSnapshot.data['subtitle'],
style:
new TextStyle(fontWeight: FontWeight.w500, fontSize: 14.0)),
trailing: (documentSnapshot.data['imageUrl'] != null)
? Image.network(
documentSnapshot.data['imageUrl'],
height: 120.0,
width: 100.0,
fit: BoxFit.fill,
)
: CircleAvatar(
backgroundColor: Colors.grey,
),
onTap: () {
Navigator.of(context).push(MaterialPageRoute(
builder: (context) => EditArticle(
Article.fromFirestore(documentSnapshot.data))));
},
);
},
query: Firestore.instance.collection('articles').orderBy('title'),
),
maybe it is my problems only - the loading time is super slow. Do you encounter any situation like this?
Now you can use flutterfire ui for this with built in pagination
Nice tutorial, please make same video for remot json data fetching.
How to do pagination with firebase realtime database ? Tutorial plz or any website u know.. inform me need help
did you find? I also need that
Please make a video on Realtime Database as well.
Please!
so relaxing
sir please help me out in using woocommerce api in ionic 4
Hi. It is no different from how you do it on Ionic 3.
@@thesamarthagarwal
sir i have followed the course but i am getting few unknown errors errors using ionic 4
like can not resolve word crypto and so on up to 24 to 30 lines of errors
Vertobook Avis send me an email.
I checked it out. This is pretty much similar to how I ended up implementing it. But I used the index of the listview builder to reload content, which I personally find cleaner than using a ScrollController. This approach didn’t use a futurebuilder though, because I originally implemented this using a future builder yo wanted to keep it. I had to scrap it though.
kinldy explain you index of listview approach
i ve made what u did exactly but it gives me that error {Invalid value: Valid value range is empty: -1}
I am getting same error. Did you find any solution? Please rply!
Me ha sido de mucha utilidad. Gracias.
Algunas mejoras al código para que sea mas eficiente con la ultima version de cloud_firestore.
*** Les dejo el codigo abajo:
** Obtener LastDocument con querySnapshot.documents.last
** Usar condicional querySnapshot.documents.length > 0 para saber si aun hay elementos por cargar.
Firestore _firestore = Firestore.instance;
List _products = [];
bool _loadingProducts = true;
int _paginationLimit = 20;
DocumentSnapshot _lastDocument;
ScrollController _scrollController = ScrollController();
bool _gettingMoreProducts = false;
bool _moreProductsIsAvailable = true;
_getProducts() async {
Query q = _firestore.collection('producs').limit(_paginationLimit);
setState(() => _loadingProducts = true);
QuerySnapshot querySnapshot = await q.getDocuments();
if (querySnapshot.documents.length > 0) {
_lastDocument = querySnapshot.documents.last;
}
_products.addAll(querySnapshot.documents);
setState(() => _loadingProducts = false);
}
_getMoreProducts() async {
if (!_moreProductsIsAvailable || _gettingMoreProducts) return;
_gettingMoreProducts = true;
Query q = _firestore
.collection('producs')
.orderBy('name')
.startAfterDocument(_lastDocument)
.limit(_paginationLimit);
QuerySnapshot querySnapshot = await q.getDocuments();
if (querySnapshot.documents.length > 0) {
_lastDocument = querySnapshot.documents.last;
}
_moreProductsIsAvailable = querySnapshot.documents.length > 0;
_products.addAll(querySnapshot.documents);
_gettingMoreProducts = false;
setState(() {});
}
tanks Brother
Thanks man
Hi samarth, I bought your udemy course. Ist possible you release flutter woocommerce guide?
Check this out: pub.dev/packages/woocommerce_api
Thanks man!
Awesome thanks
Thanks! nice tutorial. Btw you can use startAfterDocument(yourDoc) which takes just DocumentSnapshot
thanks a lot
شكرا لك لقد ساعدني كثيرا
Thanks a Lot
Users note to:
Include all your assignment code inside setstate() in the function(s), it won't work without that.
ex.
setState(() {
_lastDocument = querySnapshot.docs[querySnapshot.docs.length - 1];
_posts.addAll(querySnapshot.docs);
_gettingMorePosts = false;
if (querySnapshot.docs.length < _perPage) {
_morePostsAvailable = false;
}
})
someone arrange for Github code..bruh
18 minutes of coding bliss...
thank uuu
please next video add image
Your videos are good but please remove that advt pop up that keeps coming in the bottom right screen. It's distracting.
this is trash code I guess because of "_scrollController"
I realize that
int i = 0;
_scrollController.addListener(() {
double maxScroll = _scrollController.position.maxScrollExtent;
double currentScroll = _scrollController.position.pixels;
double delta = MediaQuery.of(context).size.height * 0.25;
if (maxScroll - currentScroll < delta) {
i += 1;
print("i = " + i.toString());
_getmoreProducts();
}
});
guess what when I scrolled should be counted only once, but it is counted dozens of times.