Awesome, seems like dynamic links is a popular one. The auto routing will be handled the same as the push notifications auto routing. In case you want to go ahead with the implementation. Thanks for watching and commenting, I appreciate it.
Thank you so much! Your solution works like a charm in my project. I did not know that the last document can be passed down into the firestore to start fetching from there.
Hi Dane I am currently building a chat app which requires me to load all the messages in a paginated fashion. I recently saw your video on pagination and implemented the same solution. There were slight problems in that solution which primarily occurred whenever I tried to insert a new document or delete an existing document. It'd be great help if you can help me out with a proper solution so that I can perform insertion, modification and deletion inside the list. I would really appreciate your quick response. Thank you.
Hey, yes this is known. This is a proper solution, all you have to do is do a comparison with your current pages based on the new information returned and then do replacements, inserts or deletes. If you don't want it to be realtime then I'd rather use the get request instead of the stream method. then you can use my infinite load tutorial to build up your lists / rebuild them as you scroll.
@@FilledStacks I tried comparing the indices. If I somehow manage to perform insertion correctly then I am not able to modify the documents of other pages. It would be great help if you can send me a solution for the same problem. Thanks for replying to previous comment :)
@@atishayjain690 Hey, I don't have the solution in code that i can send you. Something I can help you with is making sure that you solve the problem on paper before writing the code. Each page has its own listener attached. that means if anything changes for that page the data will update, the goes for a removal or a change in documents. if the page is at 20 documents length and the update makes it 19 that means something was removed. Then you can either, move everything 1 up. the last 1st one in the next page moves into current page etc. Which would be manually doing it. Or you loop through all the pages again and request it. If it hasn't changed it'll read from the cache so you won't be charged for a read. There's a few ways of doing it, just make sure you wrote the solution out for "adding", "removing", "new inserts" before you implement. It should help you not get stuck half way.
@@atishayjain690 Hopefully it does. Translating normal english into a code solution is not always an easy task so hopefully it does help. It's the best I can do with the limited time I have.
loving all your videos keep up great work! could you please add some videos that cover unit testing incl. mocks ? i recommend adding the tests to the Flutter and Firestore series. Would be a great help, thanks!
Thanks AJ! I really appreciate the encouragement and the feedback. I was planning on adding a unit test series but since I've been slacking with unit tests on my side I will find myself being a hypocrite if I start talking about how great they are. When I get myself and the team back on track with unit testing I'll be sure to make a series about it. We're busy internally with an architecture review and I might put unit tests in there as well as an additional improvement ontop of our architecture.
Great video ...very helpful. Please hope my question will be answered, I am trying to implement the same thing in an app with bottom tab navigation, and it does not seem to work as expected. All documents are fetched at once but just in paged so when you navigate to a different tab and return back to the tab again it does not load again because _hasMorePosts is now false so now the posts can not be fetched again. Maybe I am not implementing it well ...I will really appreciate a reply to this question. Thanks
Hey, that will all be dependent on how you implemented the bottom nav bar. If your viewmodel is constructed again you can add a reset call in the constructor so that the service know's it's a brand new instance using it. Or you can simply reset your pagination state when you navigate away from the page.
Thank you for the awesome tutorial. I liked this idea of using CreationAwareListItem than using scrollController, but I got a problem. I have a listView builder with some filters to filter the list and there is also firestore pagination. And the problem is, initState is not called when changing the filter due to this I am only getting default paginated no of list and no more. The list item are being reused hence no initState again. What will be the good solution of this?
I'm happy you liked it. I don't have an answer for your question as I don't know why any of it is happening. Try provide unique keys per list item to get them to reinitialse if they're new.
Hi FilledStacks, great tutorial. I'm following your tutorial to apply the idea to my project, however, I'm using Mobx as state management. The list is working fine, reacting to any action I do, however when I remove or add a new item to the list, it gets a bit lost, e.g duplicating or hiding the last item of the page list. any idea why it happens?
I like the idea you have here with the items being aware of their build. One Thing i do notice with this implementation is that none of the stream subscriptions are disposed at any point. You do make note that it can be done in the written tutorial, it would be nice to see it implemented so there are no memory leaks. EDIT: I see this pattern relies on "Stacked", this should be made clear from the start to prevent new developers using this without knowing its dependancy on "Stacked". I'm glad you are mature about your approach in conversation here.
Hey Shannon thanks for the comment. I leave out things that don't really add value to the current tutorial or that Don't fall into the same scope for the overall idea so I can keep the video less than 25 minutes long. But i see why you'd want to see me do it in the video.
@@FilledStacks I understand the constraints you have with-in your tutorials and videos. It seems like if the subscriptions are not cancelled there could be a substantial memory leak.
Not substantial in this case given the entire widget tree is exposed with all the listeners when navigating away from this page. In stacked all streams listening through the viewmodel is also automatically disposed.
@@FilledStacks From the outside it isn't clear that the presented pagination pattern is intended to be used with another overall state management implementation. Some kind of indication to give understanding that stream subscriptions are automatically handled only within your designed system would be helpful.
It probably would be. But I'm not making my videos longer with no added value from what Incan discern. I'm teaching a pattern, the language, the framework, state managemt the disposal or subscriptions before hand makes no difference to the patter being used. Your suggestion might be better, but it won't go into my videos unless it's required for the pattern to be executed.
Just a question how to implement firestore pagination on a screen having tab bar view with 2 different listeners on both tabs as I am getting ViewModel dispose issue on change notifier
good morning, thank you very much for sharing your knowledge, the video was very good, but a doubt how do i do this in a chat like, when the user arrives at the top of the page i make more requests, i'm using the scroolpositionedlist package, so enough I use it when index 0 is on the screen I fetch the data, does creationawerelistitem work in this package?
Good morning Keven. Thank you for the comment. Yes this would work for that. You would reverse the list then use opposite scroll index as in the video.
Great video, however I recommend you should mention/show that it is really important to cancel subscriptions (you do that in your written tutorial). Another thing is that I really wonder if the itemCreated function is not called to many times since as I remember the state also gets destroyed in listview builder, but correct me if I am wrong.
I do manage my subscriptions in my production app but only because the query changes completely and the old subscriptions are invalidated. Otherwise i don’t think it’s important. in this app there’s no need to do it because that view lives the entire lifetime of the app. i’m a firm believer in only doing what’s necessary for the task at hand to be completed with the highest level of implementation. In this case there’s no need to unsubscribe. when the app closes it will happen automatically. As for the item created it’s called whenever that item is inserted into the widget tree. thousands of times, but that’s no problem. the creation is as expensive as creating an empty class that does nothing.
FilledStacks thanks for the response, I understand what you mean, less code is always better. However you know how it goes, people will just copy paste 😒
@@ilijanl haha I know. I'm not here to protect developers from themselves, only share my knowledge from production. If that's how they want to use it then they'll have to learn the VERY hard way :) which will be better in the end. IF, they actually learn from it.
Yep, Some additional code would have to be added for any other scenario you have in the app. I simply showed real time pagination, the rest will be up to the developer to implement.
FilledStacks For example there is an array of data in firebase database like profile details and there is profile picture in firebase storage, and we have 100 users so how can we fetch each user with profile details and profile picture
Unhandled Exception: A HomeViewModelwas used after being disposed. E/flutter (26244): Once you have called dispose() on a HomeViewModel, it can no longer be used. How I can solve it? thanks
hello @FilledStacks it saved my lot of time it works like a charm thank you for this tutorial only i am facing an issue i.e when I open that screen for the second time then no data is displayed and here is my work around for that hope that it helps the other guys viewing this comment // i created a function in the FirestoreService that clears data and sets the initial flag and then i called that method in the initstate of my statefull widget static List allPagedResults = List(); static DocumentSnapshot lastChatDocument; static bool hasMoreChats = true; clearallobjects() { lastChatDocument = null; hasMoreChats = true; allPagedResults.clear(); }
Hi Tanmay, thanks a lot for sharing your work around. There are some other things that I would have liked to show, like consistency for startup logic but to stick to the point there's some things I have to cut out. I appreciate you taking the time to write out your solution for is.
Retrieve data from firebase and display it to a PageView widget and TabBarView. Would love to see your approach. :) BTW. I am slowly learning. Thank you for these tutorials! :D
I would use exactly the code in the CRUD video to retrieve the data and then probably the exact same code but show it in the tab bar view :) You're very welcome. I'm happy to share them.
dynamic links for sure .... I don't know the road map for your tutorials but i think the most major topics left is (error handling , localization ) I made my own implementations for those topics but i'm waiting for yours cause it will be x20 better 👌
Thanks. Error handling is done in my case. Futures of type dynamic it returns the error message or the results. if it’s a string i show a dialog otherwise I run the intended logic. Localization isn’t apart of the firebase series but i’ll do that after this series.
@@FilledStacks if there is more complicated error handling than printing a message should i move it to the viewmodel layer or add a multiple catch for every error type
@@berosolo866 I don't just print the message. I show a dialog to the user where the error happens. What you're talking about is handling exceptions in the code? Error handling involves also getting data that's not expected so it's a bit different than what you're referring too. Etierh way I show a dialog to the user when somethings went wrong. That's my way of handling it. In terms of catching exceptions You can add multiple catches. which ever way you find best to deal with that you should do. Multiple try's, single try catch where you check the message and convert it to a more understanding message etc. .catchError calls, how ever you feel best in code for your code base. Try different ways, see which one works the best.
In this case I’ll just be showing the implementation of the functionality. building an app with a guild ui and team joining won’t fit in to the current social media app but i’ll cover all the scenarios in terms of functionality. or at least the ones that are important if there’s too many.
This series cover all that. I use firebase for my backend, if a client has an existing one then I use that. You can watch my first architecture videos or my state & api video on the channel.
Thanks Chris! I'll try my best to keep it up. And yes, at the moment it does. Most likely I would order by time created and not title in the real world .
Hello! I get the error within firestore_service.dart on snapshot.data Map data() package:cloud_firestore/cloud_firestore.dart Contains all the data of this [DocumentSnapshot]. The argument type 'Map Function()' can't be assigned to the parameter type 'Map'. I tried searching for it but couldn't find anything :( Please help
Hello again. I have asked again for this, please can you include End to end encryption as a part of this course? There are a lot of ways to encrypt data on firestore, but none of them is ideal. I have tried lot of them. 1)using a locally stored string as the encryption key works, but what if the user logs in on another device, or factory reset his device? in this case all data is lost... 2)using users password works all well, but what if the user forgot or reset his password? in this case all data is lost... 3)add the Key in the User’s Google Account - this may also work, but again what if the user prefers another sign up method then google? 4)Use a service live Virgil E3Kit - Great approach but the free tier includes only 250 free users... and also Virgil is not a huge company, so if something goes wrong, all your data is encrypted forever. 5)Create an alternative server to store the key using Digital Ocean and Nodejs (mongo expres etc) - This may also work but takes lot of time to implement, and also if something goes wrong with the alternative server every user data is lost forever as it can't be decrypted anymore. Also you have to keep your ubuntu server up to date, making backups, and manually taking care about security 6) Google Cloud Key Management Service - Also works, bus very expensive and works only with google Auth. 7)Use UID as the encryption key. This works but again the key is stored side by side with the data so the Firebase admin can decrypt everything (The new Europe GDPR law, enforces you to protect and not collect personal data, or at least collect it with end to end encryption...). I am doing lot of research on this. I have also mentioned the same issue and the approaches i have tried on other youtube channels and started some conversations. (Reso coder, 1manStartup etc) All the best.
Hi there, you're definitely much further than me on that regard. My clients usually tell me what they're happy with. If there's a few layers of security then local device encryption is not a big concern for me. I wouldn't be able to make a video on that because I don't focus on it. When it's required I'll look at it but so far I haven't had to go through any hoops to satisfy encryption stored locally. I use Firebase's auth storage capabilities to manage my login. I don't do that manually.
(Assuming a chat app) What happens if let's say 10 new messages are created *AFTER* a user opens the screen and and scrolls , wouldn't that cause issues with the current implementation?
@@FilledStacks i think you misunderstood me, in a chat app you’re fetching newest first, and so they’re at the bottom, so when new messages come in the pages all have to increment somehow
Add a check for overflow or incoming flow and update your lists accordingly. If there's only 19 items in the query you'll have to loop through the rest and request the ones that need updating below or above that page. Most results will be cached so you'll just get reads on the new ones added.
_lastDocument and post all get reset after the UI loads. So when the method requestMoreData runs, the same set of data loads as _lastDocument is returned to null. All variable in the service class get reset. I feel like I'm missing something. Btw, great videos!
Thanks but : In Best Practices for Cloud Firestore (firebase.google.com/docs/firestore/best-practices) "Keep the number of snapshot listeners per client below 100". How can we do not to break, this recommended practice. Since in your code from page 100, (20 * 100 = 2000 documents) would already be breaking this good practice? Is there any other way to do it without so many listeners?
As you add new pages you can unsubscribe / cancel the subscription of all the pages at (newlyAddedPageIndex -5) if it exists. That means that as you add more pages and you go to page six then page 1 will be unsubscribed from real time listening. When you scroll back up and get to page 1 you do the same for 6. So you always unsubscribe anything outside of the 5 index range. This doesn't have to be one direction you can do 3 on either side of your index as well.
@@FilledStacks Thank you so much! I have one last question, currently my query is ordered by date timestamp descend true, how do I handle those updates? since if a new document is added it will always be added to the top of the list
@@erickortega480 I don't have a specific answer on hand. that's something I would have to figure out when I need to solve that problem. I'm not that great at guessing what's required around something. I usually write code then go from there and solve it. If it's top first you should filp your logic so that it's pages upward. I guess haha. I don't have any answer man, would need to see code to be able to give any real info in this case.
I edited post-42 on firebase at the end, What would happen if you update data of 10 ? why I'm asking this question because your implementation not listening previous pages just listening current page. I'm am wrong ?
@@FilledStacks but how you are listening afterLastDocument o.O ? var pagePostsQuery = _postsCollectionReference .orderBy('title') .limit(20); if (_lastDocument != null) { pagePostsQuery = pagePostsQuery.startAfterDocument(_lastDocument); } // If there's no more posts then bail out of the function if (!_hasMorePosts) return; var currentRequestIndex = _allPagedResults.length; pagePostsQuery.snapshots().listen((postsSnapshot) { if (postsSnapshot.documents.isNotEmpty) { var posts = postsSnapshot.documents .map((snapshot) => Post.fromMap(snapshot.data, snapshot.documentID)) .where((mappedItem) => mappedItem.title != null) .toList(); ....................................................
@@shahmirzali_huseynov I haven't watched this video in years, but it should all be in there. The main idea is to keep a listener for a set of results, so that as those results change we update the page dynamically.
When something on page 1 changes and you're on page 4 the stream registered with page 1 will send out all the contents of page 1 to your stream listener. If you don't check it the page exists you'll add that at the end of your list putting page 1's data as the new data. We check if the page exists and if it does we update the contents of that page instead of adding it as a new page.
DOWNSIDE: If a new document is added at the first index then the last element of the first page is magically removed. It won't be in either the first page or the second page.
Yes, that is an edge case that I thought about covering but it would have made the video twice as long. The idea was to show pagination using real time data. The same technique would apply you'd just have to rebuild your page indices using a strict compare of items per index.
@@utsavmangla8552 You'll check if the item at each index for the newly returned results match. If they don't match you can use that information to determine which pages to update.
It fires the real time listener for that block and adds the item in there. I didn't cover the shift functionality to update the page listeners to refresh their list.
Hi Jo, that's not something on my radar. I think Fireship did something like that. You should check out his channel. If I remember correctly he did something along those lines
How do I dispose the controller coz when all the files are loaded by pagination and I go to other page and come back then it keeps loading. I think it is something to do with dispose and users(post in ur case) variable in which all data is saving..Pls help
Actually I don't want to dispose anything, whenever I return to this page after navigating from other page, the data don't show because I've already got all the data from firebase so the last document, hasMore and _allPageResult don't reset there values, so loading indicator keeps on spining
Thanks Dane for another amazing tutorial! I was really wondering what is the good way to extend this MVVM architectural pattern (which I also prefer personally) to a more feature rich application? Suppose in your current application, if we were to support 20 more features, should we keep adding the Services, Models, ViewModels, Views into their respective folders or should we segregate them into their own Feature level folder by fallowing the same MVVM pattern ? I would love to hear your thoughts on that and perhaps see a tutorial on extending your current architecture !!
I just add more views, viewmodels and services. So far it’s been working fine and stays organised. When I bring in responsiveness then each responsive widget has its own view for its dedicated layout. I’m also still experimenting. I will probably take a hard look at it when I deliver two more client apps end of March. I’ll compare the code bases i’m working on and see how it could be better organised. Feature folders may be the way to go but at this point I just add more views, more view models and services. there’s something sweet about a flat file structure as well.
I'm trying my best. I have a company to run so sometimes I don't have the time. It costs me quite a bit of money to make the free videos for the channel since I edit them, write the written tutorial, record and create all the required assets and packages if the code needs it. sometimes I might not post due to all those tasks taking days,.
Hi, just want to add on. Assuming on the last index of _allPagedResults there is only 1 document read, and the document is deleted. It will not trigger the stream to update as the condition inside streamsubscription for "pagePostQuery" stream only accounts for if snapshots.documents.isNotEmpty. Leaving the deleted document still on display in the client side. Hence, may i propose to also include an additional if condition whereby snapshots.documents.isEmpty, followed by checking _pageExist. If true, then _allPagedResults[currentRequestIndex] = [] and then _postController.add. What do you think? P.S. HUGE fan of your work. Your tutorials are the best in my opinion with other online resources out there thus far. Keep going!
What happens to your listener if a new post is added? I think it causes the listeners to "shift" and accidentally stop listening to one of the original posts. Have you solved this? See groups.google.com/g/firebase-talk/c/L-maF89Hc9M
Hey, I don't experience this. The only thin I know of is that when the posts are removed with the solution above the pages indices aren't update / shifted up one to account for the changes in pages.
@@ajnaf7277 Very weird. Must be something in your code. My implementation allows me to go through about 1000 items as tested. I'm sure I could probably reach a few hundred thousand. At which point I'd do some manual memory management. But you might be doing something weird on your side.
thanks FilledStacks for another great video tutorial. Can I ask if you are using an emulator or a device? I found out that uploading and displaying large image files may cause crashes especially on old devices. I encountered this so anyone reading the comments who might experience the same 'Lost connection to device', you can start reading here: github.com/flutter/flutter/issues/42492 May I also ask if there is a specific reason why you are not using your responsive builder package? thanks again!
Hey. Thank you! Appreciate the feedback. Answers: I test on both usually but for the tutorials I stick to emulators to make it easier for the video. I haven't experienced that, I've used the exact code for uploading images multiple times in client apps. And for the responsive build, I'm not using it because this app doesn't require a responsive UI. it's focused only on Firebase and flutter. Nothing else, I don't mix topics in videos which is why I also provide starting code. I want to only focus on the implementation at hand. I hope that makes sense.
@@FilledStacks thanks for answering my questions. I think there's nothing wrong with your code and it is on flutter's end, and I'm still investigating. The crash happens when I upload images that are 5MB in file size. I really love your videos because just like what you have said, we can use your tutorials as building blocks. I like how you explain your codes and the purpose of using those functions, APIs and methods. More power to you and your channel and keep safe.
@@thruaway5036 Thanks man. That is quite a large upload size, might be a bug or a limitation in the implementation. clone the plugin locally, use it like that and log what's happening in the source code. There might be a bug you can fix for them. Goodluck
Thanks for the suggestion. I have no experience in golang so that's out of the picture at this moment. I might do a query video in the series as well. Good suggestion.
@@FilledStacks btw, could you please make a video about firestore reactive pagination like medium.com/@650egor/firestore-reactive-pagination-db3afb0bf42e I don't know how to handle it when a document is deleted following the above link
Hi, just want to add on. Assuming on the last index of _allPagedResults there is only 1 document read, and the document is deleted. It will not trigger the stream to update as the condition inside streamsubscription for "pagePostQuery" stream only accounts for if snapshots.documents.isNotEmpty. Leaving the deleted document still on display in the client side. Hence, may i propose to also include an additional if condition whereby snapshots.documents.isEmpty, followed by checking _pageExist. If true, then _allPagedResults[currentRequestIndex] = [] and then _postController.add. What do you think? P.S. HUGE fan of your work. Your tutorials are the best in my opinion with other online resources out there thus far. Keep going!
Dynamic links with auto routing
Ecommerce style!
Awesome, seems like dynamic links is a popular one. The auto routing will be handled the same as the push notifications auto routing. In case you want to go ahead with the implementation. Thanks for watching and commenting, I appreciate it.
.
I'll love to see remote config next
Awesome. Noted 😁 Thanks for letting me know.
You are the GOAT! Always a fabulous resource for Flutter information!
Thank you Alex. I really appreciate your kind words. I'm happy to see you still find this valuable after so long.
Filled Stacks is the MAN👍🏿makes everything clear and concise.
Thanks man :) Happy to see you find the videos useful
Thank you so much! Your solution works like a charm in my project. I did not know that the last document can be passed down into the firestore to start fetching from there.
You're welcome :) I'm happy to hear that it worked. It's a very nice feature to know of. You can also do it the other way around to.
Thank you. It's great to see you adding the proof end of the link.
I don't know what that means but I'm happy you found it useful :D
Thanks for making great videos, I just implemented remote config day before and love it but I love to see how you can use the remote config. Thanks
Thanks man. I’m also excited to share my implementation ☺️ Thanks for watching and giving some feedback. I appreciate it
Hi Dane
I am currently building a chat app which requires me to load all the messages in a paginated fashion. I recently saw your video on pagination and implemented the same solution. There were slight problems in that solution which primarily occurred whenever I tried to insert a new document or delete an existing document. It'd be great help if you can help me out with a proper solution so that I can perform insertion, modification and deletion inside the list.
I would really appreciate your quick response.
Thank you.
Hey, yes this is known. This is a proper solution, all you have to do is do a comparison with your current pages based on the new information returned and then do replacements, inserts or deletes. If you don't want it to be realtime then I'd rather use the get request instead of the stream method. then you can use my infinite load tutorial to build up your lists / rebuild them as you scroll.
@@FilledStacks I tried comparing the indices. If I somehow manage to perform insertion correctly then I am not able to modify the documents of other pages. It would be great help if you can send me a solution for the same problem.
Thanks for replying to previous comment :)
@@atishayjain690 Hey, I don't have the solution in code that i can send you. Something I can help you with is making sure that you solve the problem on paper before writing the code. Each page has its own listener attached. that means if anything changes for that page the data will update, the goes for a removal or a change in documents. if the page is at 20 documents length and the update makes it 19 that means something was removed. Then you can either, move everything 1 up. the last 1st one in the next page moves into current page etc. Which would be manually doing it. Or you loop through all the pages again and request it. If it hasn't changed it'll read from the cache so you won't be charged for a read. There's a few ways of doing it, just make sure you wrote the solution out for "adding", "removing", "new inserts" before you implement. It should help you not get stuck half way.
@@FilledStacks Thank you for helping me out :))
@@atishayjain690 Hopefully it does. Translating normal english into a code solution is not always an easy task so hopefully it does help. It's the best I can do with the limited time I have.
luv it
awesome.
loving all your videos keep up great work! could you please add some videos that cover unit testing incl. mocks ? i recommend adding the tests to the Flutter and Firestore series. Would be a great help, thanks!
Thanks AJ! I really appreciate the encouragement and the feedback. I was planning on adding a unit test series but since I've been slacking with unit tests on my side I will find myself being a hypocrite if I start talking about how great they are. When I get myself and the team back on track with unit testing I'll be sure to make a series about it.
We're busy internally with an architecture review and I might put unit tests in there as well as an additional improvement ontop of our architecture.
Really liked the idea. Should have though of it myself
Just spend some additional time next time before writing code and mull over 3-5 solutions. You'll find something simple like this :)
Great video!
Code Crumbs 👋👋👋 Heyoooooooop. Thanks 😁 Happy to see you over here on the tubes 🙂
@@FilledStacks Yes! hoping to start making videos too at some point. Keep up the great work
@@codecrumbs I definitely will try my best to keep it up. Looking forward to seeing your videos.
Thank you very much
You are very welcome
Great video ...very helpful. Please hope my question will be answered, I am trying to implement the same thing in an app with bottom tab navigation, and it does not seem to work as expected. All documents are fetched at once but just in paged so when you navigate to a different tab and return back to the tab again it does not load again because _hasMorePosts is now false so now the posts can not be fetched again. Maybe I am not implementing it well ...I will really appreciate a reply to this question. Thanks
Hey, that will all be dependent on how you implemented the bottom nav bar. If your viewmodel is constructed again you can add a reset call in the constructor so that the service know's it's a brand new instance using it. Or you can simply reset your pagination state when you navigate away from the page.
@@FilledStacks Thanks for the reply ...will do that
@@quajoduke6241 :)
Thank you for the awesome tutorial. I liked this idea of using CreationAwareListItem than using scrollController, but I got a problem. I have a listView builder with some filters to filter the list and there is also firestore pagination. And the problem is, initState is not called when changing the filter due to this I am only getting default paginated no of list and no more. The list item are being reused hence no initState again. What will be the good solution of this?
I'm happy you liked it. I don't have an answer for your question as I don't know why any of it is happening. Try provide unique keys per list item to get them to reinitialse if they're new.
I have the same problem
@@eNONO-ot4zh Now I use paging with state management. Have you tried providing unique key?
Hi FilledStacks, great tutorial. I'm following your tutorial to apply the idea to my project, however, I'm using Mobx as state management. The list is working fine, reacting to any action I do, however when I remove or add a new item to the list, it gets a bit lost, e.g duplicating or hiding the last item of the page list. any idea why it happens?
Hey Gustavo, I have no idea why that would be happening. It's gonna be all determined by your logic in there
@@FilledStacks I'm just replicating your logic with mobx. I'm really struggling to get this done lol.... but that's ok, I'll keep trying.. thx
I like the idea you have here with the items being aware of their build. One Thing i do notice with this implementation is that none of the stream subscriptions are disposed at any point. You do make note that it can be done in the written tutorial, it would be nice to see it implemented so there are no memory leaks.
EDIT: I see this pattern relies on "Stacked", this should be made clear from the start to prevent new developers using this without knowing its dependancy on "Stacked". I'm glad you are mature about your approach in conversation here.
Hey Shannon thanks for the comment. I leave out things that don't really add value to the current tutorial or that Don't fall into the same scope for the overall idea so I can keep the video less than 25 minutes long.
But i see why you'd want to see me do it in the video.
@@FilledStacks I understand the constraints you have with-in your tutorials and videos. It seems like if the subscriptions are not cancelled there could be a substantial memory leak.
Not substantial in this case given the entire widget tree is exposed with all the listeners when navigating away from this page. In stacked all streams listening through the viewmodel is also automatically disposed.
@@FilledStacks From the outside it isn't clear that the presented pagination pattern is intended to be used with another overall state management implementation. Some kind of indication to give understanding that stream subscriptions are automatically handled only within your designed system would be helpful.
It probably would be. But I'm not making my videos longer with no added value from what Incan discern. I'm teaching a pattern, the language, the framework, state managemt the disposal or subscriptions before hand makes no difference to the patter being used. Your suggestion might be better, but it won't go into my videos unless it's required for the pattern to be executed.
Just a question how to implement firestore pagination on a screen having tab bar view with 2 different listeners on both tabs as I am getting ViewModel dispose issue on change notifier
Set disposeViewModel to false and use a singleton ViewModel.
Please add remote config, updating the ui remotely sounds very crucial
So far dynamic links seems to be winning, so that might come first. Both videos will come, I'm just checking which one to do first.
good morning, thank you very much for sharing your knowledge, the video was very good, but a doubt how do i do this in a chat like, when the user arrives at the top of the page i make more requests, i'm using the scroolpositionedlist package, so enough I use it when index 0 is on the screen I fetch the data, does creationawerelistitem work in this package?
Good morning Keven. Thank you for the comment. Yes this would work for that. You would reverse the list then use opposite scroll index as in the video.
Great video, however I recommend you should mention/show that it is really important to cancel subscriptions (you do that in your written tutorial). Another thing is that I really wonder if the itemCreated function is not called to many times since as I remember the state also gets destroyed in listview builder, but correct me if I am wrong.
I do manage my subscriptions in my production app but only because the query changes completely and the old subscriptions are invalidated. Otherwise i don’t think it’s important. in this app there’s no need to do it because that view lives the entire lifetime of the app. i’m a firm believer in only doing what’s necessary for the task at hand to be completed with the highest level of implementation. In this case there’s no need to unsubscribe. when the app closes it will happen automatically. As for the item created it’s called whenever that item is inserted into the widget tree. thousands of times, but that’s no problem. the creation is as expensive as creating an empty class that does nothing.
FilledStacks thanks for the response, I understand what you mean, less code is always better. However you know how it goes, people will just copy paste 😒
@@ilijanl haha I know. I'm not here to protect developers from themselves, only share my knowledge from production. If that's how they want to use it then they'll have to learn the VERY hard way :) which will be better in the end. IF, they actually learn from it.
I think I found bug in this process.. if you have only one data edit works in real-time but if you delete that data it doesn't work until we refresh.
Yep, Some additional code would have to be added for any other scenario you have in the app. I simply showed real time pagination, the rest will be up to the developer to implement.
Love see next - search in firestore collection with firebase file storage
i don't know exactly what that means. Do you mean you want to search using a file instead of text?
FilledStacks For example there is an array of data in firebase database like profile details and there is profile picture in firebase storage, and we have 100 users so how can we fetch each user with profile details and profile picture
Unhandled Exception: A HomeViewModelwas used after being disposed.
E/flutter (26244): Once you have called dispose() on a HomeViewModel, it can no longer be used. How I can solve it? thanks
Make sure you don't use the HomeViewModel after it's disposed.
hello @FilledStacks it saved my lot of time it works like a charm thank you for this tutorial only i am facing an issue i.e when I open that screen for the second time then no data is displayed and here is my work around for that hope that it helps the other guys viewing this comment
// i created a function in the FirestoreService that clears data and sets the initial flag and then i called that method in the initstate of my statefull widget
static List allPagedResults = List();
static DocumentSnapshot lastChatDocument;
static bool hasMoreChats = true;
clearallobjects() {
lastChatDocument = null;
hasMoreChats = true;
allPagedResults.clear();
}
Hi Tanmay, thanks a lot for sharing your work around. There are some other things that I would have liked to show, like consistency for startup logic but to stick to the point there's some things I have to cut out. I appreciate you taking the time to write out your solution for is.
@Tanmay Sharma Thank you, this saved me some time!! :-)
Thank you for good video. Btw, what if a new post is added (instead of an existing post is updated)?
Thank you for watching, The new post will show up. You can test it out and see the results.
Retrieve data from firebase and display it to a PageView widget and TabBarView. Would love to see your approach. :) BTW. I am slowly learning. Thank you for these tutorials! :D
I would use exactly the code in the CRUD video to retrieve the data and then probably the exact same code but show it in the tab bar view :)
You're very welcome. I'm happy to share them.
@@FilledStacks just tried this one, it's kinda complicated for me but it works. :D Thank you! Arigato! Kamsamnida! Salamat!
dynamic links for sure .... I don't know the road map for your tutorials but i think the most major topics left is (error handling , localization )
I made my own implementations for those topics but i'm waiting for yours cause it will be x20 better 👌
Thanks. Error handling is done in my case. Futures of type dynamic it returns the error message or the results. if it’s a string i show a dialog otherwise I run the intended logic. Localization isn’t apart of the firebase series but i’ll do that after this series.
@@FilledStacks if there is more complicated error handling than printing a message should i move it to the viewmodel layer or add a multiple catch for every error type
@@berosolo866 I don't just print the message. I show a dialog to the user where the error happens. What you're talking about is handling exceptions in the code? Error handling involves also getting data that's not expected so it's a bit different than what you're referring too. Etierh way I show a dialog to the user when somethings went wrong. That's my way of handling it.
In terms of catching exceptions You can add multiple catches. which ever way you find best to deal with that you should do. Multiple try's, single try catch where you check the message and convert it to a more understanding message etc. .catchError calls, how ever you feel best in code for your code base. Try different ways, see which one works the best.
@@FilledStacks thank you❤️
Dynamic links if u can make users join a guild or team and post as the team. Something like a medium publication
In this case I’ll just be showing the implementation of the functionality. building an app with a guild ui and team joining won’t fit in to the current social media app but i’ll cover all the scenarios in terms of functionality. or at least the ones that are important if there’s too many.
Thank u
You're very welcome :D
How to start with backend in flutter ?
This series cover all that. I use firebase for my backend, if a client has an existing one then I use that. You can watch my first architecture videos or my state & api video on the channel.
Keep up the awesome content Dane. What happens if a new document is created with title "AAAAAAAA" that would go at the top of the list?
Thanks Chris! I'll try my best to keep it up. And yes, at the moment it does. Most likely I would order by time created and not title in the real world .
Hello! I get the error within firestore_service.dart on snapshot.data
Map data()
package:cloud_firestore/cloud_firestore.dart
Contains all the data of this [DocumentSnapshot].
The argument type 'Map Function()' can't be assigned to the parameter type 'Map'.
I tried searching for it but couldn't find anything :(
Please help
figured it out... just add parentheses "()" after .data therefore snapshot.data()
@@AM-mq3ss Awesome, I was going to say that you're trying to pass an object where it expects a function or the other way around.
Thank you for your great tutorials! Will you also cover Firebase cloud data messaging?
You're very welcome. Thanks for watching. I already have, it's in one of previous video titled push notifications.
Oh thanks!
Hello again. I have asked again for this, please can you include End to end encryption as a part of this course?
There are a lot of ways to encrypt data on firestore, but none of them is ideal. I have tried lot of them.
1)using a locally stored string as the encryption key works, but what if the user logs in on another device, or factory reset his device? in this case all data is lost...
2)using users password works all well, but what if the user forgot or reset his password? in this case all data is lost...
3)add the Key in the User’s Google Account - this may also work, but again what if the user prefers another sign up method then google?
4)Use a service live Virgil E3Kit - Great approach but the free tier includes only 250 free users... and also Virgil is not a huge company, so if something goes wrong, all your data is encrypted forever.
5)Create an alternative server to store the key using Digital Ocean and Nodejs (mongo expres etc) - This may also work but takes lot of time to implement, and also if something goes wrong with the alternative server every user data is lost forever as it can't be decrypted anymore. Also you have to keep your ubuntu server up to date, making backups, and manually taking care about security
6) Google Cloud Key Management Service - Also works, bus very expensive and works only with google Auth.
7)Use UID as the encryption key. This works but again the key is stored side by side with the data so the Firebase admin can decrypt everything (The new Europe GDPR law, enforces you to protect and not collect personal data, or at least collect it with end to end encryption...).
I am doing lot of research on this.
I have also mentioned the same issue and the approaches i have tried on other youtube channels and started some conversations. (Reso coder, 1manStartup etc)
All the best.
Hi there, you're definitely much further than me on that regard. My clients usually tell me what they're happy with. If there's a few layers of security then local device encryption is not a big concern for me. I wouldn't be able to make a video on that because I don't focus on it. When it's required I'll look at it but so far I haven't had to go through any hoops to satisfy encryption stored locally. I use Firebase's auth storage capabilities to manage my login. I don't do that manually.
(Assuming a chat app) What happens if let's say 10 new messages are created *AFTER* a user opens the screen and and scrolls , wouldn't that cause issues with the current implementation?
No, that's exactly the scenario it's meant for. Since it's listening to the real time stream it'll just add it in and show it when you scroll to it.
@@FilledStacks i think you misunderstood me, in a chat app you’re fetching newest first, and so they’re at the bottom, so when new messages come in the pages all have to increment somehow
@@yaas New messages would be added to the current page if it's in that index or automatically create a new page if it's out of that index.
Cant help but hear 'awe' 😂😂
hahaha Aweeee 😁😁😁
When I delete or add new item, some item disapear, How do I fix it?
Add a check for overflow or incoming flow and update your lists accordingly. If there's only 19 items in the query you'll have to loop through the rest and request the ones that need updating below or above that page. Most results will be cached so you'll just get reads on the new ones added.
_lastDocument and post all get reset after the UI loads. So when the method requestMoreData runs, the same set of data loads as _lastDocument is returned to null. All variable in the service class get reset. I feel like I'm missing something. Btw, great videos!
figured it out.
That doesn't happen on my side. happy to see you figured it out
Thanks sir
You are very welcome :) thanks for watching
Thanks but :
In Best Practices for Cloud Firestore (firebase.google.com/docs/firestore/best-practices)
"Keep the number of snapshot listeners per client below 100".
How can we do not to break, this recommended practice.
Since in your code from page 100, (20 * 100 = 2000 documents) would already be breaking this good practice? Is there any other way to do it without so many listeners?
yes, you can only listen to the latest 5 pages and remove the realtime updates for the pages older than that.
@@FilledStacks Can you explain a little how to accomplish that?
As you add new pages you can unsubscribe / cancel the subscription of all the pages at (newlyAddedPageIndex -5) if it exists. That means that as you add more pages and you go to page six then page 1 will be unsubscribed from real time listening.
When you scroll back up and get to page 1 you do the same for 6. So you always unsubscribe anything outside of the 5 index range. This doesn't have to be one direction you can do 3 on either side of your index as well.
@@FilledStacks Thank you so much! I have one last question, currently my query is ordered by date timestamp descend true, how do I handle those updates? since if a new document is added it will always be added to the top of the list
@@erickortega480 I don't have a specific answer on hand. that's something I would have to figure out when I need to solve that problem. I'm not that great at guessing what's required around something. I usually write code then go from there and solve it.
If it's top first you should filp your logic so that it's pages upward. I guess haha. I don't have any answer man, would need to see code to be able to give any real info in this case.
I edited post-42 on firebase at the end, What would happen if you update data of 10 ? why I'm asking this question because your implementation not listening previous pages just listening current page. I'm am wrong ?
It's listening to all the pages in real-time.
So any one should update if your listener is still attached for that page.
@@FilledStacks but how you are listening afterLastDocument o.O ?
var pagePostsQuery = _postsCollectionReference
.orderBy('title')
.limit(20);
if (_lastDocument != null) {
pagePostsQuery = pagePostsQuery.startAfterDocument(_lastDocument);
}
// If there's no more posts then bail out of the function
if (!_hasMorePosts) return;
var currentRequestIndex = _allPagedResults.length;
pagePostsQuery.snapshots().listen((postsSnapshot) {
if (postsSnapshot.documents.isNotEmpty) {
var posts = postsSnapshot.documents
.map((snapshot) => Post.fromMap(snapshot.data, snapshot.documentID))
.where((mappedItem) => mappedItem.title != null)
.toList();
....................................................
@@FilledStacks Are you creating a new listener every time you request new page data?
@@shahmirzali_huseynov I haven't watched this video in years, but it should all be in there.
The main idea is to keep a listener for a set of results, so that as those results change we update the page dynamically.
I don't understand the part that 'checking weather the page already exists". How can the page already exist?
When something on page 1 changes and you're on page 4 the stream registered with page 1 will send out all the contents of page 1 to your stream listener. If you don't check it the page exists you'll add that at the end of your list putting page 1's data as the new data. We check if the page exists and if it does we update the contents of that page instead of adding it as a new page.
@@FilledStacksGot it, Thank you :)
Dynamic link ! With Deep link
Done :):):):)
DOWNSIDE: If a new document is added at the first index then the last element of the first page is magically removed. It won't be in either the first page or the second page.
Yes, that is an edge case that I thought about covering but it would have made the video twice as long. The idea was to show pagination using real time data. The same technique would apply you'd just have to rebuild your page indices using a strict compare of items per index.
@@FilledStacks What do you mean by "using a strict compare of items per index". Thanks for the replay tho. :))
@@utsavmangla8552 You'll check if the item at each index for the newly returned results match. If they don't match you can use that information to determine which pages to update.
What happens if items are added to the list?
It fires the real time listener for that block and adds the item in there. I didn't cover the shift functionality to update the page listeners to refresh their list.
Will you show us how to implement a peer to peer chat with firebase?
Hi Jo, that's not something on my radar. I think Fireship did something like that. You should check out his channel. If I remember correctly he did something along those lines
How do I dispose the controller coz when all the files are loaded by pagination and I go to other page and come back then it keeps loading. I think it is something to do with dispose and users(post in ur case) variable in which all data is saving..Pls help
What controller do you want to dispose?
Actually I don't want to dispose anything, whenever I return to this page after navigating from other page, the data don't show because I've already got all the data from firebase so the last document, hasMore and _allPageResult don't reset there values, so loading indicator keeps on spining
yes. I am also facing same issue.. How did you solve?
@@HS-uy5ry got any solution?
@@FilledStacks any solution?
Thanks Dane for another amazing tutorial!
I was really wondering what is the good way to extend this MVVM architectural pattern (which I also prefer personally) to a more feature rich application? Suppose in your current application, if we were to support 20 more features, should we keep adding the Services, Models, ViewModels, Views into their respective folders or should we segregate them into their own Feature level folder by fallowing the same MVVM pattern ? I would love to hear your thoughts on that and perhaps see a tutorial on extending your current architecture !!
I just add more views, viewmodels and services. So far it’s been working fine and stays organised. When I bring in responsiveness then each responsive widget has its own view for its dedicated layout. I’m also still experimenting. I will probably take a hard look at it when I deliver two more client apps end of March. I’ll compare the code bases i’m working on and see how it could be better organised. Feature folders may be the way to go but at this point I just add more views, more view models and services. there’s something sweet about a flat file structure as well.
@@FilledStacks Thanks for the reply! Looking forward to see all the upcoming amazing tutorials, specially one in architecture.
@@mahdishahadat7552 :) I look forward to making and sharing it.
why are you not posting anymore :(
I'm trying my best. I have a company to run so sometimes I don't have the time. It costs me quite a bit of money to make the free videos for the channel since I edit them, write the written tutorial, record and create all the required assets and packages if the code needs it. sometimes I might not post due to all those tasks taking days,.
Hi, just want to add on. Assuming on the last index of _allPagedResults there is only 1 document read, and the document is deleted. It will not trigger the stream to update as the condition inside streamsubscription for "pagePostQuery" stream only accounts for if snapshots.documents.isNotEmpty. Leaving the deleted document still on display in the client side.
Hence, may i propose to also include an additional if condition whereby snapshots.documents.isEmpty, followed by checking _pageExist. If true, then _allPagedResults[currentRequestIndex] = [] and then _postController.add. What do you think?
P.S. HUGE fan of your work. Your tutorials are the best in my opinion with other online resources out there thus far. Keep going!
Agree, that's a good solution to implement
How to do pagination using firebase realtime database ? Plz.
same same. Just follow this tutorial and swap out the query with the realtime database equivalent.
@@FilledStacksstill can u give me ur website link wat I'm asking for. ? Flutter is new for me.. plz
@@MrShri. It's the video you're watching right now. just replace the calls to firestore with calls to firebase real time database
can we use firestore as local database
No you can’t. You should use Hive or some SQLite option
@@davidmachado530 ty
You could but it’s not recommended. Actually i was gonna make a video about this as well because it is possible.
i want to see remote config video
There is one in this playlist.
What happens to your listener if a new post is added? I think it causes the listeners to "shift" and accidentally stop listening to one of the original posts. Have you solved this? See groups.google.com/g/firebase-talk/c/L-maF89Hc9M
Hey, I don't experience this. The only thin I know of is that when the posts are removed with the solution above the pages indices aren't update / shifted up one to account for the changes in pages.
İt works great but i have a problem when adding new data
İ am trying to use it on a chat app
What is the problem with adding new data?
When there are more than 60 some data don't show and at one time it was showing me an infinite scroll loop
@@ajnaf7277 Very weird. Must be something in your code. My implementation allows me to go through about 1000 items as tested. I'm sure I could probably reach a few hundred thousand. At which point I'd do some manual memory management. But you might be doing something weird on your side.
If i open the app for first time list shows fine it only happens when adding new items is it because i am using the stream listner?
thanks FilledStacks for another great video tutorial. Can I ask if you are using an emulator or a device? I found out that uploading and displaying large image files may cause crashes especially on old devices. I encountered this so anyone reading the comments who might experience the same 'Lost connection to device', you can start reading here: github.com/flutter/flutter/issues/42492
May I also ask if there is a specific reason why you are not using your responsive builder package? thanks again!
Hey. Thank you! Appreciate the feedback.
Answers:
I test on both usually but for the tutorials I stick to emulators to make it easier for the video.
I haven't experienced that, I've used the exact code for uploading images multiple times in client apps.
And for the responsive build, I'm not using it because this app doesn't require a responsive UI. it's focused only on Firebase and flutter. Nothing else, I don't mix topics in videos which is why I also provide starting code. I want to only focus on the implementation at hand. I hope that makes sense.
@@FilledStacks thanks for answering my questions. I think there's nothing wrong with your code and it is on flutter's end, and I'm still investigating. The crash happens when I upload images that are 5MB in file size.
I really love your videos because just like what you have said, we can use your tutorials as building blocks. I like how you explain your codes and the purpose of using those functions, APIs and methods. More power to you and your channel and keep safe.
@@thruaway5036 Thanks man. That is quite a large upload size, might be a bug or a limitation in the implementation. clone the plugin locally, use it like that and log what's happening in the source code. There might be a bug you can fix for them.
Goodluck
Dynamic links
Dopeness. Thanks for the feedback
- Firebase cloud functions with golang please
- Firebase query and indexing please
Thanks for the suggestion. I have no experience in golang so that's out of the picture at this moment. I might do a query video in the series as well. Good suggestion.
@@FilledStacks btw, could you please make a video about firestore reactive pagination like medium.com/@650egor/firestore-reactive-pagination-db3afb0bf42e
I don't know how to handle it when a document is deleted following the above link
make a app like news hour and admin panel
I don't know what that is and none of my clients need that so the likelihood of that happening is very low.
Remote config
Noted
Hi, just want to add on. Assuming on the last index of _allPagedResults there is only 1 document read, and the document is deleted. It will not trigger the stream to update as the condition inside streamsubscription for "pagePostQuery" stream only accounts for if snapshots.documents.isNotEmpty. Leaving the deleted document still on display in the client side.
Hence, may i propose to also include an additional if condition whereby snapshots.documents.isEmpty, followed by checking _pageExist. If true, then _allPagedResults[currentRequestIndex] = [] and then _postController.add. What do you think?
P.S. HUGE fan of your work. Your tutorials are the best in my opinion with other online resources out there thus far. Keep going!
Hey, I think that's perfectly fine. That's probably what I would do if I run into that case. It's definitely a valid solution.
Dynamic links
👌👌