How to show live Firebase data in your Flutterflow app

in this video we're going to talk all about data how to model and set up your database and then how to display things in the front end and how to pass data along especially with nested data structures now this is one of the more tricky things to do not because it's tricky in flutter flow but because it's conceptually tricky but i'm going to give you some mental models to help you do kind of anything you want to do with data in your app so let's start out with the simplest task and that's just getting some data into our database into our firestore and then displaying it then we'll move on to more tricky matters so i've already got a project set up here just two pages i've set up my firebase and firestore if you haven't done that yet to follow along you're gonna need to do this we put links in the description so you can follow along it'll take 10 minutes tops and then come back here and we can do this so here i've just got a blank page it's called lists it's just going to be a list of products and so let's go over to our database and here we just have our users collection and let's make a new collection and let's just say we're gonna have a merch collection here we're gonna have some merchandise so we create it okay great so here we've got an empty collection so let's add some merchandise say like a t-shirt and a mug now you might think that that's where we do it here that we like add those things they're called documents here but that's not how it works here is where we set up our schema and that is what properties will each of our pieces of merchandise have so will it have a name are we going to track inventory so maybe we would want an inventory property that was an integer maybe we would want a bunch of options say the color that this merchandise was available in that's what we set up here after we set up our schema then we can actually add the individual merch to our collections and those in firestore are called documents okay so obviously we're going to have a name right so let's just start out with name and then we got to specify the data type and that's going to be a string is this a list no we're just each one is just gonna have one name and so we create it okay this is the simplest setup we could think of so let's just leave it here right we got this okay so now we've got our schema so let's manage our content all right so let's go over to our merch and let's just add some things so add a document so that's each item in our collection and so when we pull this up we can see the schema right here we've got a name property that's the name property we just set up that name schema and so if we had other schema it would be populated here as well so let's just have a t-shirt a hat not a mat a hat and a mug okay great once again simplest setup we could possibly have now let's go back to our app and let's display it now okay so we've got a column right here and we want to display a list of our products so whenever you're displaying a list of things you're going to need a widget that supports many things so if we just go over to our builder right here you can see the types of things that we could use so a column or a row one thing to keep in mind when you're setting up back end queries on widgets is that if you're doing it on a column or a row those are only meant for a few items say like less than 20. if you have a lot of documents you want to use a list view or a grid view these are made for rendering a lot of data but we just have a few so we can use our column that we've already got set up here okay so we've got a column this is the widget for displaying multiple children so now let's just do the simplest possible setup let's grab a text widget and throw it in here okay so we are ready we're all set up our ui is set up so that we can display our merch so we want to come to our column see our tree right here and then we want to be in our back end query here and we want to query so we're making a call we're making a query to our back end now we're not doing an algolia search we're not calling to an external service like twitter or something like that we're not getting a document from reference we're going to talk about that in our next example we're just querying a collection this query collection is the most basic most fundamental call that is we're just connecting to our database so we're querying our collection okay build firebase query great now it's asking us which collection do we want to connect to so we open this up we want to connect to our merch collection okay cool so now we've got more options do we want a single document remember document was just one of those things we made so a t-shirt or that one mug or do we want a list of documents well we want a list of documents and remember here when you first start using flutterflow you might be confused with the word documents once again documents is just an item in a collection or you can think about it if you come from sql database world or air table it's a record an item it's not a document like a pdf that's not what this is talking about okay so we want a list of documents cool now down here we could filter it we can order it which is super helpful we're not gonna do any of that right now remember we want the simplest possible setup so let's just confirm that now here we get a really helpful pop-up we're going to create it's telling us what we're going to do we're going to create a back-end query and it tells us by adding a back-end query to this column you're telling it to generate its children dynamically from the return list of merch documents that is to say we've got a bunch of merch documents t-shirt mug hat and we're going to make children out of each one of those things and because we're going to be generating like presumably a bunch of things normally you just don't have three things normally you get them a bunch of things it's trying to say hey just fyi this is what's happening that is indeed what we want to happen so we confirm it okay cool so now we see these sort of like ghost text widgets right here you can select them and this is actually not the the right number of items but that's not the purpose of this display this is just giving us a visual representation of what's going on hey you're making a database call on your column here and you're generating a bunch of children just fyi i want you to visually see that awesome thank you so much flutter flow this is also because we will only see these back end firebase calls displayed here when we run in test or run mode we don't see them in the ui builder but flutter flow wants us to know hey there's some stuff going on here and i can visually communicate that okay great so we've made this call on our column now there's one other step we need to do because if you think about it we've connected to this data source and so we've made we've we've plugged in the light but we haven't flicked on the light right and we need to that is we're connected to the energy to the source but we're not doing anything with that source so we need to come down to our text widget and we're going to connect it because we're going to display the name of each of these things so here is where our text is right and this is where you can just put whatever in but we don't want it we want it set from a variable we want it dynamic right so we set from variable and if you see here we've got this merch document and if we just go to this eye here it gives us this nice helper it's from our column query right so we can see all the other things that we can bind this text to but what we want to do is we want to bind it to a merch document once again that's the in each individual item in our database okay so we're going to bind it now we get our available options remember we set up this schema this field right here if we'd set up other ones we would have other ones available here as long as it is of the data type text because that's kind of widgets we're using okay but we want to bind it to name okay awesome so now our ui changed and we can see in our brackets here we have name which is the schema name that we have okay awesome so we're all set up that's everything we can just test this now and see if we've set it up correctly awesome so here it is here's our list of products that we've pulled from our database okay so that's pretty simple right so let's move up a level in difficulty okay so what do we want to do well let's add some more data some more properties to our merch that we've got right here so let's go back into firestore let's go into our merch and let's add a new field and let's call this color so maybe we can get our merch in different types of colors and for this one let's just have it be a string but this time let's make it a list okay if you're you might also know these as arrays okay let's turn that on great so now we've got this and let's add some stuff to it so let's manage our content great let's go into our merch here we go and we see we get this new column for our additional schema so let's come in here let's edit our mug and once again we have this and so let's add some items to this list and we're going to say red and green update that then we're going to say pink blue let's add one more let's say yellow and on the last one we'll just have one and we'll just say orange great so now we've got a more complex data set up because in our documents we've just got a name but then we have a nested data structure right we've got a property of colors but inside our colors we have a list an array so we have a bunch of things going on here okay so now let's figure out how to display this and let's say our scenario is we've got a list of products we want to click into them and then on the page we see further information because this is like a super common pattern right where you've got a list of stuff and on the first level you have the fundamental data about it like its name and then when you go into it you see a bunch of more information that's like on every product website that exists okay so let's just get rid of our text now so we have a little bit more robust view here and let's add a card and inside of our card let's have our text widget back that's great and then that'll be good so let's just come to our card and in our text widget let's just add some padding right here just some simple styling make clicking easier let's just lock that in so we got some room okay great so now we still have our column we didn't change that that's bound to our collection a list of documents that's all great then we want to go to our text remember we want to bind that to the name so we just know what we're on we've got our names so that's great so we're all good there all right so now let's set up our action so we grab our card right here and we want to say hey when we click on it we want to navigate to our item page right here individual item page that's all sounds good and here's the first step for configuring our data correctly our parameters and what parameters are is there data their information that we pass on this action so this action is navigating and so we're saying hey when we navigate we want to pass some information as we navigate okay and we're going to define what parameters we want to pass here so we want now notice we skipped over to our item page it popped us over to our item page and here's a helpful way to think about it is that when you're passing data you need a sender and a receiver so here we're sending the data and you're receiving i kind of think about like if someone's sending you an amazon package and it just gets dumped in your yard and you don't have anyone to receive it well you can't really do anything with it for you to do something with your new toaster you have to have someone to receive it so they can like open it up and set it up and it's the same thing here we're on our receiving page and we may send the data over when we click but if we don't have a receiver then it's going to be useless so here we're going to add a parameter on this page and we are going to call it colors and then we're just going to say receive here just so when we see that parameter we know exactly what it is and the type is going to be what now you might first think that oh well i'm passing a string right because i'm going to want to display all of those strings you know all of those colors but remember we're not just displaying one color we're passing a bunch of colors so you might come down and say okay so maybe you're passing like a document right here and we're getting closer but this document isn't tied to anything right we want a document reference and here's the next helpful conceptual thing to have in mind when you're passing data between pages and especially now when we're talking about passing documents passing records from our database we're not actually passing the record itself but we're passing a reference to our document because once we're on the page we're gonna do some stuff we'll say hey i've got a location i've got an id i've got a reference to that document now i want to do some stuff right i'm going to i'm going to do a query i'm going to look this stuff up and then i'm going to display certain things from our document so we want document reference and what collection is it well it's our merch collection and there we're all set up and it pops us back helpfully to our list of products okay so we set up the receiver we set up the parameter on the page to receive the document reference now we need to set up the sender that is we need to set up the action and tell it what we want to pass in the parameters so here we are we're in our action flow editor we're inside that navigation action and now we need to pass the parameter so we're going to select the parameter to pass and it auto recognizes the parameter that we set up on the receiving page but that's not all we need to click into here and we see the parameter that's correct but we need to set it in here so what do we want to set it to we want to set it to the merch document now once again if we highlight over here flutter flow is telling us hey you're getting this merch document from this column query right here and that's exactly what we want we want this merch document and what do you want in here these are the available options we have for what we want to pass well let's think about this what do we want to pass well if we wanted to just pass the colors well then we could do that but what we actually want to do is pass a reference to the whole document because maybe we want to reference other things so we want a reference to this document boom great so we've set up our sender action with its parameters and our receiver those parameters on that page now we have to go over to that page because here in our individual item we've passed it the page has this reference but it's not doing anything with it okay so first up let's just bind our text our title of our page right here to our merch item our merch document with its title you know so like mug or something like that whatever we clicked on so how would we do that well you might think that we just come over and we like set it from variable because we got our document id here from our parameters right we've got a document reference so shouldn't we be able to just bind this well let's see what happens so we set it from variable we see these colors received this icon right here means it's coming from our parameters that we've received so this should be like pretty easy so let's just like click on there that seems good and con firm no that doesn't work because remember what we've gotten in the page through the parameters is a document reference like an id so we actually have to take that id and get our document we just have like a reference it's like the dewey decimal system at a library we've got a number but now we've gotta go get it okay so how would we do that so let's get out of here let's come into our page our scaffold right here and we're going to do a back end query and we're coming here and we want our document from reference okay yeah that makes sense right because we've got our reference through our parameters we've got this id and now we want to get our document we want our document from our reference okay great now we set which collection are we going to do a lookup on and so we're going to say merge and then we want to say well what reference do we want to use to look up in our collection like what id right so we come in here and we see ah now that parameter is value right that document reference not document from reference the document reference itself the reference to the document that's what we want so we can confirm that and now we're all ready to bind our text so let's come over here do our same thing but now we're going to see something else see this is our document reference the actual reference like the id to that thing but here is the document itself and that's what we want and now we see what we would expect we've got access to all the properties in our document and we want name okay perfect so let's just test this out right okay great we got our list of products and when we click in we can see we've got the name of our merch documents being passed correctly okay great now to the fun part so here we want to see those color options now how do we do this you know you may think uh all right let's just throw some text widgets in here and like set them to our merch document color list and i'm binding it to our colors property but i don't have any available options to set here i mean i can set the number of items and that's just going to show us like how many colors we've set for them so remember we did three and three and two i think maybe one but that's not what we want well why can't we do this well when we've bound data before it's because the property we bound to was a string and so if you think about it the name the value of the property name is a string but the value of the property that we're trying to bind here of colors is another data structure it's a list it's not a string so we need to bind this to a widget that is able to accept lists now what is that well yeah that's like anything that has multiple items in it so like column or row or list view right so let's delete our text right here and instead let's just add a simple column and inside our column we want to add a text widget okay so we're all set up so now we should be ready to go because we got a column here and we can do a bunch of text and of course when we try to do this or merge document colors list the same thing happens right well because we're just in the same situation right here we just dumped it into a column right but what we want is we want a bunch of text widgets that are based on or bound to each of the items in our list so how would we do that so let's come to our column here and you might think hey we need to do like a back end query right because we're getting data from our back end but remember we've already got that document right we've done a back-end query up on our main body our scaffold our home page right here we've already got a reference to the document in our merch collection so that is to say we've already made a connection so we don't need to make another connection that would be redundant so instead we come to our column and we need to come over here and generate dynamic children because we just want to do something else with the data that we've already got right so we come down here and first let's set a variable name okay and we're going to need this when we bind this to the text here so we're just going to call this color text and then we're going to grab it here and we can see remember once again you might think you want to bind it to this but just that's just the reference like the id that's not the document itself here is our document itself and you notice when we highlight this it shows us where that binding happened where that back end query happened and happened on our scaffold on our home so we want to come into here come into our colors list and notice this is not available right because we're generating children and we don't have children we just got one here we need multiple so we come into here and we should be good confirm and then we confirm here and once again we get a little pop-up we're going to now generate children dynamically from the specified variable that is what we just set and that's great that's exactly what we want and once again we see the gray here just to give us a little indication of what's going on so now we just need to come in and for the text widgets we need to bind that to our variable name that we set up from that dynamic children so we come in we set from a variable and we can see here color text remember that's the variable name we set up and you can see where it's getting called from and that's right it's from this call we can see that it's from this binding right here okay great so we click into there and we should be good all right once again here we go click in and we can see boom we've got orange right there if we reload or if we come into hat here we can see pink blue and yellow awesome okay so let's do one other thing let's say we want to on our home page right here display those colors here well how would we do this well we can use the same logic to do it so remember we've already got a binding here to our documents right here so same thing as before we don't want to just dump a text widget in because the value of our colors is a list so once again we need a type of widget that can accept multiple texts and so once again we have our same options so here so let's just add in a row but we've already got text widget here so let's just add in a column and then we've got a column here that contains everything with our text which is already bound and then our row so we're going to do the same logic here so let's add in a text widget right here and to our row we're going to generate dynamic children we're going to call this let's say list so we know what page we're on because i just want us to be able to see exactly where this variable is coming from list colors text okay great and then we want to set that to we've got our merch document and once again we hover it over where is this coming from this is coming from our call and our column here so our merch document and once again exactly as we expect we can bind it to our left list right here and we should be good confirm that generate dynamic children we know about this that's great and lastly so we've connect we've produced these text widgets but we haven't bound the text itself to those colors so let's just bind that up set from variable this is old news at this point that's what we want confirm and let's test it awesome and here we are using the same logic here we've been able to display the list of colors on this home page i hope this is helpful for you i know that data can be tricky when you're thinking about it and i hope this model has helped you feel free to leave any questions below and we'll try to answer them if you have any specific questions about how data works in flutter flow please leave them below and we'd be happy to make a video about it to explain it and we'll see in the next video

Channel: FlutterFlow

Views: 73,543

Keywords:

Id: hkBWVwr7yXQ

Length: 27min 19sec (1639 seconds)

Published: Fri Jul 22 2022