No video :(

Pagination in Flutter using Firebase's Cloud Firestore

Подписаться 11 тыс.

Просмотров 38 тыс.

50% 1

In this video, you will learn how to implement an infinite scrolling list in Flutter. You will start by learning how to build a simple list by retrieving data from Cloud Firestore. Next, you will learn to use a ScrollController to listen for scrolling events and finally you will learn to use Firestore's SDK method to implement pagination.
Check out my open-source Flutter UI Package on Github here: github.com/sam...
You will find more loading animations and widgets created for you, ready to be used in your apps.
Flutter is Google’s mobile app SDK for crafting high-quality native interfaces on iOS and Android in record time. Flutter works with existing code, is used by developers and organizations around the world, and is free and open source.
Learn to setup Flutter SDK here: flutter.io/
Check out my courses on Udemy if you want to learn how to develop a complete app from start to end in Ionic.
Check out the New Course "Ionic Apps with Firebase on CodeSmash.io: www.codesmash....
Best Seller on Udemy "Ionic 3 Apps for WooCommerce: Build an eCommerce Mobile App": www.udemy.com/...
Ionic Apps with Firebase is a complete course that will teach you two leading app development technologies - Ionic Framework and Firebase. In this course, you will learn all about Ionic and Firebase while working on a real-world social application. At the end of the course, you can publish your app.
We start by learning the basics of Ionic and Firebase. Once introduced to both the technologies, you will learn about building the front-end of the mobile app using the Ionic Framework and the back-end will be taken care of by Firebase. The code for each lecture is available for students to refer to in an easy to use and organized way. A repository will be shared with each student and the code for each lecture is available on a separate Git branch. You can clone the repository as well.
Music Credits - Happy Life by FREDJI / fredjimusic
/ fredjimusic
Music promoted by Audio Library • Happy Life - FREDJI (N...

Опубликовано:

21 мар 2019

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 85

@TrollMasterMW3 5 лет назад

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!

@tutonmondal6122 5 лет назад

You're wright

@badmanthegreat 4 года назад

Or you can pass less than or equal to ...

@vzhen 4 года назад

@@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.

@ezeget 4 года назад

Well spotted. Nice work

@venkatashravan6353 3 года назад

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.

@SinghSanchit 3 года назад

Alright man, you killed it. You're a great teacher.

@brujala1775 7 месяцев назад

i could never understand this before, thank you!

@sauravgupta6166 2 года назад

Thanks Samarth bro

@ghz13 3 года назад

thanks for posting this man. got exactly what I needed

@harishs9808 4 года назад

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.

@jasonli3145 4 года назад

How u trigger `load more method` in scroll listener , when the ListView cannot be scroll at the beginning?

@vlycie6628 4 года назад

simple and very understandable explanation.thanks

@ahmetcubuk4245 Год назад

Is it also work when scrolling back to top because when im scrolling back to top, images reload again and i get same problem

@HarshSingh-hk8fe 3 года назад

such an amazing content, the way you explain things is brilliant :D

@HunnyCoders 4 года назад

Thanks a lot for this helpful one. I was looking for this. So clear and described in detail.

@ezeget 4 года назад

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.

@shirjeelkhan 5 лет назад

Come back after long time... Nice to see you.

@yadhuvtk 2 года назад

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'

@fiazali6426 3 года назад

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.

@eNONO-ot4zh 4 года назад

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'), ),

@kevinyeung1787 3 года назад

maybe it is my problems only - the loading time is super slow. Do you encounter any situation like this?

@user-jchjkitv77896 2 года назад

Now you can use flutterfire ui for this with built in pagination

@luisramongarciameneses8924 3 года назад

understand english very little, but you explanation is very good, thank you

@RogerCouto 4 года назад

Thanks man, great video. This was exactly a looking for!

@mavies33 4 года назад

This is very helpful thank you dear Sir.

@user-wf6gx1ju3r 4 года назад

why we did not use the method _getProducts() directly in the listener of the scroll instead of doing another method for loading more products?

@juangamarra1463 4 года назад

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(() {}); }

@leonardocoldibelli3965 4 года назад

tanks Brother

@amonchowdhury3553 5 лет назад

great man. A million thanks.

@ModernMonk30 3 года назад

how can we do it if we are using a StreamBuilder to make query to firestore

@wesleybarnes5376 4 года назад

Thank you for making this video

@staticmain6378 4 года назад

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.

@TheSoporte 5 лет назад

I like your videos. Thanks

@AM-mq3ss 3 года назад

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!

@AM-mq3ss 3 года назад

nevermind figure it out.... just do .data()['title']

@feab100 4 года назад

Share link of the Github for this project, please!

@WuschelofDespair 4 года назад

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.

@mfaraz5075 2 года назад

kinldy explain you index of listview approach

@VenuGopal-bg7mo 5 лет назад

welcome back bro

@arabnology1 2 года назад

what about streaming data ?

@abdouseck4894 4 года назад

so relaxing

@shajeelafzal 4 года назад

Please make a video on Realtime Database as well.

@wesleybarnes5376 4 года назад

Please!

@manuabhaysinghal3819 4 года назад

how to implement this with stream builder cuz i am deleting the items

@guduguminchu 4 года назад

Nice tutorial, please make same video for remot json data fetching.

@MyChanneltutzzzzz 4 года назад

Helpful video, is there is a way to use pagination in flutter if i not use cloud firestore ?

@abdallahshaban4804 4 года назад

Will this ensure that updates on firestore are stilll dynamically sent through to the app?

@syedumair3172 2 года назад

Thanks! nice tutorial. Btw you can use startAfterDocument(yourDoc) which takes just DocumentSnapshot

@graphic-Pixel 5 лет назад

شكرا لك لقد ساعدني كثيرا

@makemypetgamedevprocess6475 3 года назад

Keep it up 💪

@Flutterdev6391 3 года назад

Thanks man

@VishvajeetSuryawanshi 3 года назад

thanks a lot

@LenVazroctstar 4 года назад

Awesome thanks

@MrShri. 3 года назад

How to do pagination with firebase realtime database ? Tutorial plz or any website u know.. inform me need help

@ibrahimmammadov9669 3 года назад

did you find? I also need that

@dheerajs2838 4 года назад

Thanks man!

@mnshaikna 5 лет назад

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??

@thesamarthagarwal 5 лет назад

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.

@mnshaikna 5 лет назад

@@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...

@omarh.soliman6814 4 года назад

i ve made what u did exactly but it gives me that error {Invalid value: Valid value range is empty: -1}

@bobobobo3142 4 года назад

I am getting same error. Did you find any solution? Please rply!

@wiltonyu4951 5 лет назад

Question, ist better to use flutter over ionic for woocommerce implementation?

@thesamarthagarwal 5 лет назад

It is like comparing Apples and Oranges.

@chouiteryacine4255 5 лет назад

Thanks a Lot

@happynewyearw 5 лет назад

I think you can try to refactor this with rxdart to make the code more readable and the function more reactive?

@thesamarthagarwal 5 лет назад

Thank you but that wasn't the objective of the video. It is intended for beginners.

@happynewyearw 5 лет назад

@@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!

@GameCrawl 4 года назад

how was the data in firestore generated and populated? I have like to try running your program that I have downloaded from github.

@thesamarthagarwal 4 года назад

I wrote a script to add some documents to a collection.

@vertobookavis2289 5 лет назад

sir please help me out in using woocommerce api in ionic 4

@thesamarthagarwal 5 лет назад

Hi. It is no different from how you do it on Ionic 3.

@vertobookavis2289 5 лет назад

@@thesamarthagarwal sir i have followed the course but i am getting few unknown errors errors using ionic 4

@vertobookavis2289 5 лет назад

like can not resolve word crypto and so on up to 24 to 30 lines of errors

@thesamarthagarwal 5 лет назад

Vertobook Avis send me an email.

@YuvrajSingh-dt7vr 3 года назад

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; } })

@jihadatlagh1223 5 лет назад

thank uuu

@wiltonyu4951 5 лет назад

Hi samarth, I bought your udemy course. Ist possible you release flutter woocommerce guide?

@thesamarthagarwal 5 лет назад

Check this out: pub.dev/packages/woocommerce_api

@WhatIsThisAllAbout 4 года назад

18 minutes of coding bliss...

@aakashdabas9490 4 года назад

someone arrange for Github code..bruh

@ahmadzuhdi4921 4 года назад

please next video add image

@rara737 3 года назад

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.