How to display dynamic values from Firebase in your Flutterflow app

hey what's up my name is Leo this is the fifth video of VD series I called building a software while I'll be showing you how to build a software app using flut flow and Firebase in the last video I showed you how to set up or kind of how to build your login page using flutter flow and in the previous videos I showed you how to connect your back end in Firebase to the flutter Flow app and in this video I will be showing you more on how to actually leverage all the data stored in Firebase about your users um to show kind of dynamic values for example if a user press kind of add an event then the app should create a new event in the database and display that in our app so I'll be showing you kind of how to do that using flutter flow so you can see here H and by the way let's get right to it so here we have our login page we created in the last video and as I said before I'm not a designer so don't take any design tips from me I'm just kind of I work as a developer so I'm more into kind of how to connect things um on the technical side but here we have the login page let's now create a new page you can create a new page by going up here to your left corner new page and press add then create blank then we can name these two and by the way now we're creating um kind of um the event page or the main page so this will be kind of the feed page where people can add new events to the feed and see other people's um events that's great so we can just say event feed feed sorry okay create page great and then once we did before we can just remove um the navigation bar because I thought this will be just a single page app to where you can just create event and see other people's event and you join events so that will be um so or maybe also a page for kind of the specific events I will see um how many videos this series becomes this the fifth video so we'll see how many videos more um we can make about this series or how to create software but let's get right to it so the first thing we need to do is just create some so we have a column here so the first thing I'll do is just create some basic and kind of a feed that kind of goes over all events created by all users and then just shows them in the kind of order on created date so we can just do that by am creating a new column inside of this column so this will be kind of the main column for the page so we can just create a new column in here then to Loop through all the events we can actually just go up here to the right corner up here on the back end query and here we can set up kind of um the back end query is just kind of you can set up so this widget this column grabs values from our Firebase database and kind of uses is uses them in this module so if I press add back back in query what type one I want to query I want to query a a collection I want to query the entire collection of the of events and then collection we can just press event and then user reference so optional here we can set kind of from variable if we want to only grab event from this user but in a feed on for example social media you don't only see your own post do you you only see you see all of the posts from everyone so okay and only people who follow but in my app since I'm not expecting to have millions of users and I will only I will kind of be showing all users events in order so here we can just set event and then query all sub collections so now I will query kind of all events from all users so if I have 10 users with two events each it will show M20 events so list of documents query type great simle time query no and no and no okay great now we've actually created our query so this will when I press confirm here confirm now this column will create kind of it will Loop through all of the events that I qu for on the back end and just and display them now currently we aren displaying them in anyway since we are we haven't set up they kind of we we ourselves haven't bu built the layout for how to display an event but that is what we'll be doing now so now um if I create so now in here in this column I can actually just create how I want to display one event and the column we just kind of um copy that template for all events it Loops over so for one event I want to kind of just show my container and we can also go to this me this main container and you set this to or this container and you set this to be in the middle of the page great then can also set kind of 100 on top there so there's some padding okay let's now create the card for this column now we've actually created kind of the here so here's the column that Loops over each event and here here we have the container that is kind of one M event card so and you can see actually here we can see the other four cards but those are kind of mushed together so we don't really see them but if I do this if I set a padding under my container here to be maybe 30 pixels you can see that we got these carard so this is just kind of an flop flow shows us kind of an example how it would look like if we had four events that was displayed so inside this container for an event container I want the card to be maybe 400 by 400 um okay we can actually set that to a little bit wider we can actually set that to maybe 800 and the car maybe to be 300 pixels okay great so now we have the kind of an event card or it doesn't look that good yet but let's add that so first inside of our M container we can add a column H and then we can just set some padding here to maybe 30 and inside here we can just set a title H and we can also set that to the upper corner there okay but I don't want to say some the same title for each event I want to say maybe um kind of the name of the event user so set the name of the event user we can actually do this so you can see there's kind of an orange sign above our text or this this sign is kind of very regular so you can see those signs are almost everywhere in our design tool and that's just basically saying that um we can use some Dynamic value and from a variable for this value instead of ourselves kind of hard coding that value in here so for text I want to display whatever event we have so for example this event I want to be showing kind of the user that created this event name um up here in the title so to do that and I will just quickly create a bigger title there and then we can press these lines here so now to create or use the users's name we can press on event document and you see here that we have kind of um parent reference so the user kind of the parents reference and this doesn't do anything but we can actually use this reference to grab the user from our database and then use its attributes so we can actually just right click on this text and wrap this widget inside of a container and for this container we can actually do this we can actually do a backend query that and document from reference then we want to grab a user and the reference is the document for this specific event and we are going to grab the parent reference so what I'm basically doing now is I'm saying for this event card this specific event grab its reference and grab the user from their database that this reference represent and just store kind of all that users attributes in this uh container here and this just enables us so if I just go down here and just uh I just going to remove the WID and the height for the container so it adapts to the text now if I go into the text here and go to H where is it these dots again you can see that I actually got the user document so this user is actually the user that created this event so now I can press this and just use display name so now actually uses the name for the user so now we can set some more data so we can set inside of this column we can actually set some U some new text here that's also on the side and I just going to set some also some there and normally and for Norm map we will set maybe you know kind of the name for oh it was nothing by the way I will just show you how to do this forget what I said so let's just do this so let's just now add and new text and I want to display um what display and the time so when the event is so then we can just do this press here then we can just search for text so here combine text so this will just enable us to kind of set um very Dynamic generated text combined with normal text and that's just because I want to write time Dot and then um kind of a space and then just the kind of the specific time dynamically pulled for this specific event so I can just write time Dot and then you say add event and then you say here we can just say the time for this event so we can just say event then you say time and here we can change kind of um the format so the format of the could be what should we pick uh we could pick uh okay here here we a good run so yes month day time great this perfect so perfect great and so it's actually display if you zoom in here on this um page you can see that we actually display time and then the time value am I actually going to set the space here just to make it look better you can actually do this for the duration and for max number of user and publicity I will quickly do that and but you don't need to see this so this video doesn't get super long but uh let's see after that how it looks there now I've added some more H specifications about each event in the card so you can see I actually add the type the time place duration and publicity and also a add button but I haven't actually created the logic because I wanted to share that with you so and also one thing before we do that um so we don't actually want to show this place attribute for allent we all only want to show this Place M kind of attribute if the type here is equal to real because we don't want to show a place for online events because then we won't show a link but so for this place to actually hide it whenever this is not real we can just press on it then scroll up here to um visibility and check this button here conditional so here we can set the condition on when it should be seen and that's when um when um the event start Ty is equal to real so to do that we can just press here on conditional single condition the first value should be um the event type equal to real confirm great so now this place will only be seen uh when the type is equal to real so um if it's not real it will look like this it will just disappear so let's now add the functionality for this add button to add users to this event because if we remember um in video three and when I created this schema for the event I added this um joined users attributes and that's just a LIF of document reference for each user that joined so let's now add the user that clicks this button to this uh list here so we can just open the actions as we' done many times before now so now before but before we add them to the we want to check some conditionals because we don't want to add all users we only want to add user if there's a spot left in event so kind of if the number of joined users is less than and the max number of members for this event and also and if the person trying to join has the right permissions because for example if um the user that um tries to join um or the the event has the publicity of friends we want to check if the person that tries to join and is a friend of the person who created this event and and if it's a kind of if the publicity is just public you can join whatever so let's just add a a conditional action and in here we can set multiple oh no no no this one sorry we will send conditions and then combine because we want to check both if there's spot left and also if it has the right permissions so let's start with spots left single condition first value will be and the event max number of members so the max number of members should be greater than and greater than the number of joined users which is um joined users number of items so the number of uh joined users so the maximum maximum members for event should be larger than how many have joined if the person wants to join so there and the second thing should be should be met if the publicity is private and the user that tries to join his friend with the person who created event or if um the publicity is public so let's just add a a multiple commissions conditions again so combined so the first thing should just be if um the type so if the type here of the event oh no no no type the publicity and the publicity great is equal to public that's right public great um or not and so or so we want to be able to join if um the publicity is public or that um then here we need more conditions again so here we need an and condition so the and condition should be if the um the event publicity is equal to private or friends we can actually just say friends so it should be equal to friends and that the current user that tries to own which is the authenticated users so the authenticated user reference should be in the um user document with the user document you just the documents for the user that created events friends list so we can just say user document M friends and then we can just say list contain item and then you say the authenticated users user reference I know this was a bit complicated but um we actually set everything up now so you can just think it like this that what we set up here is that we want to join the event only if the max number of spots is not met and and so with what we have here and the other condition is and the other condition is that the publicity should either be public or that if the publicity is friends and it should be all friends all and also the trying and the user trying to join should be a friend of that user so those kind of what we set up here so now we can just press confirm and inside here now so if this is true we are we are kind of granted to join and if not we can just say yeah we don't have to do anything so if we can join we can just now press action and then in here we can just say um back in database fire store and then just update document because we want to update the current event and add the user to the joined users list so here we can just say um the current event reference so because we won't update the current event that we kind of are clicking inside and for the field we want to change the field of the join the users and here we can just click add to set and what do you want to add to this join users we want to add the user that clicked which was the off authenticated user or whatever users is kind of authenticated in the app currently so user reference so this I know this was a bit complicated but this is actually a great way to create functionality to app so now with only these two kind of actions this conditional action and this normal action we've actually managed to create a functionality that's kind of um let's just let a users join the event so um this video is getting pretty long so I will end that video here but you can actually see that we actually got a decent app now um okay not a decent but we actually got the starting point for kind of H joining events and displaying events we haven't actually created any events in our database yet but now we actually have a way to display them in the next video I will be showing you how we can actually um let users create new events inside of our page because currently we can only create events in our database and then just display them but I want users to both be able to join events but also create their own events so in the next video I'll be showing you how we could create some simple page or popup or whatever for users to be able to create their own events and then we will test the page and see the magic happen so see you then

Channel: Leo McMillion

Views: 2,291

Keywords:

Id: 7hHDfNQUb_o

Length: 18min 10sec (1090 seconds)

Published: Thu Nov 02 2023