Flutter - Syncing data with your UI

tube guys welcome back to another video and in this video before talking about this video let's talk about the previous video in a previous video we made this left screen right the screen the minimal travel data concept screen and in that video in the middle of that video I was talking about how you could pull real data from your firebase storage or some other back-end that you use and then throw that data into the COA without hard coding all these stuff in that video I just simply used a lot of it as it images and then hard-coded all these titles and everything right so a lot of people messaged me asking me to show like make a video and show an example of how its turn that is to pull real time data from real data from firebase and then throw it up on the screen so in this video let's see how to integrate data from actual data from firebase and then integrate that into this particular screen okay so let's for now let's just ignore this stuff and if you notice here the images and the album title the person who uploaded this album and the count of the images is the one that we need to essentially pull from your back-end right so I have stored these images set of images like seven images here in firebase storage and I'll be making use of these as two sets okay the first three will be the first set of image that is this set of images and they will have their own title and owner who uploaded them and the second four will be this set of images okay now we will see so I will just show you the architecture of our collection so that you get a better idea I have a tips collection and inside that I have two documents the first document contains three images and the owner the person who uploaded it is yogin and the trip name is small somewhere to 2018 the second document is nothing but as four images uploaded by Raja and the trip names in trip that is this set of empty this traveling tree so let's see how to pull this data into your application and then actually throw it up on a integrate it with a nice you a like this okay so moving on to our code here this is the code we have right now right I mean right now we are using a lot of asset images and we just simply called image grid and gallery detail a couple of times to make it look like there were two travel entries right so first we will comment all these and then we need to have a file for pulling the data rate travel dot dot and we need something to interface with firestore so I will go ahead and install a plugin now sonic clone firestore this is installed as well now get back to travel service dot that imported package what was i drawn first alright it's fine class travel and they'll have get it again in a selfish tapas can not only need not be an asynchronous operation firestore instance this intelligence will take some time to load not collection oops not snapshots so this will return me all the documents inside eclipse collection as a stream so I need to make use of that stream get each and every set of each and every snapshot from that stream and then try to populate it on the UI in main dot dot elbow and I will say this first and in main dot dot I'll go ahead and [Music] travel service type travel service dot dot then get into in each state here we need to call that particular function and then store the data somewhere right locally so that you can use it anytime you want so I'll have a very variable for that okay and inside in its state and simply do set state details equals travel so we start to get data fine we'll write another function get through details yet travel into travel increase this function will return us this set of travel interest this entry descent in everything so I'll just do if details not equals now then may need this if not return new text loading please wait okay and return string inside the sizes in to give details on text snap shot this will be a function and inside youssef snapshot not data not equals null and unless you not be there if the snapshot contains data then we need to I will return a list view that will contain each and every entry okay and inside the list to you the first one will be prying and primary should be set to false so that it doesn't cause the same big you asian well it's called you already have a list to you here as well right yeah I already have a list you here so if we use a list you inside a list to you that will be both will have their own independence call mechanism so that will be the Samba Gration so if I set this to false then that will be the primary ListView which means that this cron will be working fine shrink-wrap true and item count snapshot dot data not documents not length length find the next thing is item builder on X I and say this return new children widget what was it build image grid image gallery detail okay two functions so they first build image grid snapshot not date dot documents of ie not date of this okay so this will take this individual snapshot and then snapshot that data or documents of I not data of images will simply refer to this particular images right so each and every document will have this array which will contain a set of images that's exactly what I am referring to here and there never mind the underlined since you don't have this image grid this is not capable of receiving this arguments into it right that's why it's showing this red underline I'll fix it in a minute so the next one will be build what was that no image grid and I image some detail image gallery detail inside this is also L just snapshot date dot documents of I dot data of name we also need the owner and the count of the photos right and provide all three here snapshot dot date dot documents of a dot date of images find and snapshot or they are not documents of I not net of own all three standard okay now let's go and try to modify this in such a way that it's quite capable of handling these two on this argument and these three arguments [Music] get to image gallery detail first and then what why are those first one was trip name right the second one where these set of images third one was the owner name click name I use interpolation or name air as well we will use interpolation laser startling that is done the second one was building magical yeah will de Madrid we just need images and inside here instead of asset imager user Network much at work image images of 0 made yourself one of two I can simply hard-code 0 1 & 2 since at any given point of time only 3 images will be visible rate in every entry only 3 images will be visible at any given point of time in the screen so all I need is those first three measures of that particular travel entry so I'm just giving 0 1 & 2 fine let's just say this we are done everything that's required let's just save this and try to run this on a device and see if we actually get the desired result you just need to call this rec get traveling trees where we commented those all right let's see how our application fares on the screen wow it looks really good right and if I scroll you can see that it's a completely different set of images not only that you can see the first Travel entry was made by yogin and the photo count is three whereas the second travel entry is made by Raja and the photo count is four I didn't add some padding here so sorry guys anyway the first Travel entry has a different title and the for instance I'll change this so that you guys can see it actually this mountain trip I will change it to something else okay I'll make real-time change and just update this just watch here see it are updated it got updated in real time right since we are using a stream it's obviously listening to all the changes that's happening in the document and then updating that changes here in real-time so you have now have a perfect way of you you know have synchronized data between firestore and the actual ua that you just built right and if you noticed we just use the stream builder and then we just passed these two I mean past the snapshots these two documents to the specific functions that will build the build image grid and the small detail info below that for us and those picked up this data and then one built the image grid neatly for us well the other use the title of the travelling tree the owner of the traveling tree and the fourth account to neatly display that for us as well beneath each and every travel entry so yeah guys this is how you synchronize your data from any of your backend with your you way that you generally make in one of my you a challenge these guys now I have just shown you a very simple way you can obviously bring in RX start and then do a lot of manipulations on this data before actually throwing it up on the UA screen the other thing thing that I wanted to mention here is kindly this there are a lot of people who kept asking me about the firebase bill and how it is exploding and all that the thing is if you are on the blaze plant for instance the free quota itself offers a lot guys if you are on the blaze blaze plant then you'll be first you'll be in the field court and then you'll be charged on a per use basis so per use basis here refers to one if you do one document read that is counted as one operation if you do one document write that is counted as one operation so as far as this is concerned there is some the free quota limit itself is choose another status I think that there is a like several thousands of rewrite operations you can do on your files for collections whereas when it comes to storage you would all obviously notice that I'm using a different app for the firestore collection and the different tab for storage right this is because I was using this SAP storage but I exceeded the quota limit that's the only thing a reason guys it'll show you see you exceeded your quota for this project so the thing is since we are using streams and if you are while developing if you are say repeatedly reloading for some simple error that you get then obviously it will make repeated requests and just watch this I just tapped on users right it's already three not four point nine MB the quota is one GB per day okay the egress network you can send data or the network the quota is 1 GB per day and I've already made 189 requests this is due to the fact that I already have some data worth of round 10 MB right right so each and every image is around 1.8 1.8 MB 1.7 1.8 MB this is 1 MB and a few images I have less than 1 MB totally I have 7 in beats I mean 7 images and I have made 189 requests asking the firebase cloud storage to send these images over the network and it took around 300 4 MB so kindly watch this while developing ok if you are using the free plan kindly watch this way level you might now ask me how to limit this and then how to you know like make it not exceed the limit rec quota limit rate so there are ways to do that I will talk about that in a separate video otherwise this whole point of this video will get diluted and I will be simply talking about how to control your firebase bill anyway the point of this video was that I was trying to show you guys show you guys how to synchronize the data from your actual file store collection to a new way that you developed this you way was the one that we developed last week and I was simply using hard-coded is a set image ascend hard-coded values here now none of this is hard-coded everything is pulled from the firebase collection I mean fire store collection I have a separate trips collection a couple of documents corresponding to a couple of travel entries one document contains the owner name the trip name and the set of images the images I'm storing in fire store I mean not far so firebase storage and then simply using the download URL here right so all this data is then integrated inside your you way and then displayed to you I just change the title of one to show you guys I'll even do another one I'll change this one guys I'll change this so that you can you guys can see this integral time I will change this to beach trip 2018 okay just watch the mobile screen no I'll just app click on update and it automatically got changed here as well right so yeah guys this is how you synchronize your data between file store and your you way that you and all the awesome UI screens that you create so yeah guys this is what I wanted to show you guys today hit like if you really like this video subscribe to my channel if you want to watch more cool stuff like this actually got a claim guys I'm working on an application now with him so I'll be just making two or three videos per week know if you like this type of content I also make you a challenge at animation related videos so if you like this type of content kindly subscribe to my channel and hit on the bell notifications icon so that you don't miss out any of my uploads and I'll talk to guys my next video by

Channel: Raja Yogan

Views: 12,332

Keywords: Flutter, Google Flutter, UI Challenge, Firebase, Firestore

Id: m7JLvHA1LUA

Length: 20min 5sec (1205 seconds)

Published: Mon Oct 22 2018