Build a RealTime User Feedback App In Flutter with Firestore

In this Flutter and Firebase tutorial I will be taking you through the process of building a real time feedback app.
Written Tutorial: www.filledstac...
GitRepo: github.com/Fil...

[@Bfas237Forum]

Another awesome tutorial from you. Thank God i saved your channel as favorites

[@FilledStacks]

Awesome! I appreciate you watching and making me a fav

[@yvzoncu8153]

perfect. I watched several times and learned alot thanks for the video bro :))

[@FilledStacks]

Thanks for watching man. I appreciate you letting me know that it helped you.

[@tasminchalmers]

I LOVE your channel :)

[@FilledStacks]

I LO.... i mean, thank you 😊

[@emmanuelfache9949]

Awesome videos. Thanks

[@FilledStacks]

Thank you

[@brennenrocks]

Great tutorial! Why not use the streams directly from Firestore and map out the values from snapshots() into the List of Objects you want? Why create our own stream controllers?

[@FilledStacks]

Thank you :) That's a good question. Two and a few main reasons: 1. Abstraction. I don't want the rest of my code to have ANY dependencies on where I get my data from. If I have to import firebase into every UI file I work with I would consider it a failure in terms of separating your UI from your logic. At that point it's not only your logic, but your UI is actually tightly coupled to your back end. Which means if you want to use a different technology (which is very possible given how early Flutter is in development) you would have to touch every single UI file that makes use of data from firestore. 2.Long term maintenance: All my code that handles firestore is in one place, if there's a problem with firespace I ONLY have to go to one place, EVER. So there's never a question about which file is causing what problem, that's not syncing. 3. Maintenance in relation to functionality: If I had to add paging to my results and data I'm getting from Firestore it would be easy. I get all my data in one place, I can keep multiple listeners for different pages of results so that I can keep them real time and the outside UI will never know the difference because number 1. 4. Logging: I have a video about logging specifically, when I do it, why to use it and how to effectively speed up your development process or bug fixing time simply by having the correct logs. I want to be able to log incoming results, log their data, log the data it has been converted to and anything else relating to it. 5. SINGLE RESPONSIBILITY: It's not the responsibility of the UI to request the information, listen for results, "serialise" the results, figure out if it should be shown and then do what the UI should do, show the results. By mixing those responsibilities you will end up with tangled code. You don't have a clear place to go in your code to make changes so you end up with what we call spaghetti code. UI should be separated from your business logic, UI should also be separated from your state, UI should only build UI from the state and let your logic components know the user did somethings, UI should not know about anything other than your own objects to keep it abstracted from third party implementations. "Keep the things together that change for the same reason, Separate the things that don't" - Robert C. Martin I hope that helps clear up my reasoning.

[@brennenrocks]

@@FilledStacks thanks a ton for the reply! I do have one more question. Using this architecture, if I change a document on a page and go back to a previous back where that same document is being used. Will the document show the new updated values?

[@FilledStacks]

@@brennenrocks Anytime man. Only if it's directly connected to the stream so any updates is broadcast to the listener on the other page as well. As long as you connect through the streams you'll get real time updates wherever it's listening

[@brennenrocks]

@@FilledStacks If I need to pass a userId into the constructor of the FirebaseService to retrieve documents relevant only to that user. How can I grab the userId in the view model and pass it into the FirebaseService? I am using a StreamProvider in my main.dart that provides my user data to the app. Currently I removed the constructor and made an init(String userId) function in my FirebaseService and inside my view in the onModelReady function I call initFirebase(Provider.of(context).uid) through the model which calls init in FirebaseService... Probably not the right way to go about it

[@FilledStacks]

@@brennenrocks Pass the user id in through the functions you're using. If it's always gonna be just for one user, then after you get your current userId call an init state function on the FirebaseService. Or use the FirebaseAuth and get the user Id at start and supply it to the service. A few ways to do it, your way also sounds good.

[@belarminonicolau4256]

Hi thanks alot for your vídeo. I'd like to link to the first vídeo, can you post the link here, please ... Or does anybody here has the link from the first vídeo ...???

[@FilledStacks]

Hi Thank you. It's the video before this one 😅 go to my channel and look at the video before this, under videos you can see all my videos.

[@mohabmagdyshokryabdel-hame3203]

Thank you for your great tutorial, however, I have a question now why you register both the information and the feedback inside the firebase service constructor? doing that will make us read the feedback data from firebase even if the user didn't press the feedback button and this will be extra cost in term of firebase data read correct me if I am wrong and please give me a hint or advice on how to solve that as I have many collections reads and I don't want to read all my data when it might be not used

[@FilledStacks]

You're welcome :) In my case I have to read it because I need the number of feedback items to indicate on the button in the Home View how many new feedback items there are. I could setup a separate collection for that to keep track of and only listen to that but there's no need at this point. If you have many collections then only read them in the view where you'll be showing it, if you're not on that view then cancel the stream subscription. That's what I usually do.

[@nguyenvi672]

Can you show us how to use Scoped Model with login/register page. Thanks a lot

[@FilledStacks]

This video shows how that can be done (kzbin.info/www/bejne/oXWol5-Djrl5os0) it uses provder. So if you'll be using scoped model all you have to do is replace the instances of Provider with ScopedModel, instances of ChangeNotifier with Model, and instances of Consumer with ScopedModelDescendent. The last thing to note is not to use the Stream Provider for the User, instead access it through the model by using the Authentication service and exposing it.

[@mohabmagdy4155]

Hey Dude, i have a question I don't understand why you registered your feedback model as singleton and factory is " Good for registering ViewModels that need to run the same logic on start or that has to be new when the view is opened." and this is our case ? another question I have error on my code that when i clicked on my screen to go from the first model to the second model and then pressed back and after repeating and clicking again I always "get bad state: stream has been listened to" I get the same error when I register my model as factory or singleton and when I exposed my stream as broadcast I got error in my states it changed without any logic. i dont use any dispose in my code just we are using changentifer provider and as you know they automatically dispose the stream i don't know they dispose based on what? your help is much apperiacted i have been on this issue for 2 days

[@FilledStacks]

Hey, I register my model as a singleton so that the stream stays connected and I always have the lastest information. I'll only ever have one feedback view, and I expect it to have the same information so instead of constructing a new one I want it to be singleton. We don't want any startup logic for this model, especially not everytime we navigate back to it. I don't want a new view to be opened and I mention that in the video so I'm using a singleton. If you don't want t singleton then I'd recommend using a factory and implementing a dispose call where you cancel your stream subscription. If you don't want to do it the right way you can also convert your controller into a broadcast controller to avoid that error. I've replied on your other comments in the other places with the same response. That's the only two ways to solve this, use a factory and dispose of the subscription that happens in the constructor or use a broadcast stream and deal with the memory leaks later. I'd suggest that if you have trouble with streams to go over that separately before you attempt to use an architecture that revolves around streams. Do some stream thing, listen to it, cancel when done, listen from multiple places to the same one. When you understand all the concepts behind it then you'll be able to fix this "problem".

[@raedinkhaledsakhri4859]

when I tried to run your final version from GitHub, I get this error: V/FA (30035): Inactivity, disconnecting from the service

[@FilledStacks]

🤷‍♂️ That’s probably due to the flutter versions. update the packages and try again

[@umashankarmishra4534]

Please create ply list of feedback....is this only one vedio ??

[@FilledStacks]

Two, the other one is the video before this one.

[@ojasmhatre9362]

Can't find the first part for this...please help

[@FilledStacks]

It's the video before this one

[@pluemworks]

Do you have any idea for use animation with Firestore? I found that AnimatedList need to specify insert, remove index but Stream also set the new whole value to List, So how to know that element index that remove or insert ?

[@FilledStacks]

Keep the previous list in memory then calculate the index for inserts/removals. Loop through the new list. Make sure it's in the same order as the one in memory, when an index is not equal to the new one flag it as new and pass to your list.

[@wareeffallatah1335]

Did part 1 get deleted ?

[@FilledStacks]

No, it's the episode before this one. Go to videos, find this one, then watch the one before.

[@FilledStacks]

kzbin.info/www/bejne/p5KZcmWKhNaMZqM