Build a Responsive Dashboard with Firebase data in Flutterflow

welcome and happy Thursday morning I hope everybody that will be watching this uh in the future of the of the Netherlands neverlands Never Lands hope you guys enjoy this um I'm gonna be going over how to build UI and flutterflow uh and I I have this idea um I have my video or my stream over here I'm gonna try to look at the camera and and build um on my main desktop but I wanted to do one of two things and as soon as people start joining I'm going to ask the question of what people want to see um but I have I've gotten a lot of feedback from users that either have trouble building UI or have trouble connecting uh back-end stuff and we've launched some really awesome uh dashboard templates for all of our users and I wanted to Showcase essentially what that would look like um so let me I'm going to share my screen give me a second open that yeah okay and I want to do one of two things let's see Joseph Kareem Michael thank you all for joining I hope you are doing well so I wanted to open it up um give you guys some options here of what you want to see today will is planning the ffdc stuff uh it is full board lots of things going on it's in almost a month and so he has a lot of stuff to do right now um and so is not able to join us today so I'll be managing the chat and building but yeah I wanted to do one of two things so I want to this is now a template or it will be a template by the end of today it is a responsive dashboard so as you can see we have you know tasks completed we have a chart we have a table and an upcoming uh activity I don't know if we'll actually hook up the chart today uh or if we do this I don't know if we'll hook up the chart because they are sort of a pain in flutter flow and I can say that honestly I've asked the developers to sort of run me through how to do it if any of you guys know how to hook up charts correctly where you can actually have a time scale on the X and amounts of things on the Y I would appreciate it you get a spot on the live stream you can come and teach us all I would love to learn so this is one of the things I would like to do um hooking this up basically utilizing our templates and using them in an actual application or I saw this amazing design on dribble and I wanted to try it out and make it a little functional so implement it in floater flow and then this little keyboard uh we could basically try to implement and have some uh quick features right some just some abilities to add some quick values to an input which I think is pretty cool so uh yeah thank you all for joining Gavin Steven David we're they're coming on board so would you guys like to see a mobile build right UI only more or less maybe some app States or how to utilize our uh dashboard templates in an actual application by hooking up the back end to a dashboard like this you guys have like two and a half minutes I'll let you vote in the chat if that makes sense if not I'll just do the thing that I probably want to do which is this so and I'll go over how I built this because I think it's fun so in this UI that we're going to be hooking up and basically doing we have this sort of cool fun little activity list and one of the things I've I've been challenged with in the past cool Karim excellent he's only vote right now so I mean we may just do the dashboard I think it'll be beneficial but I'll show you some of the UI stuff that I did here that little hack uh but a lot of fun so um this little activity it's like typically when you have an activity stream right you have like this timeline type of view and I've always struggled with showcasing this timeline because you typically have a line that goes down the left or the right side and you can't really do it with containers uh dynamically right you couldn't you couldn't do it where you know this expanded um and this grew right I couldn't do that before well you you still it's still hard to do but I figured out a little hack just so you guys know where this can dynamically grow um and it doesn't break your system so I wrapped this Rich text in a container and then from my design days dashboard dashboard dashboard cool cool Joseph uh we'll talk about the chart I may remove it just so you know because we're going to try to hook all this stuff up with um Firebase all of it except the chart because the chart is a little difficult and if anybody again again I'll say this now more people have joined if anybody knows how to utilize charts in flutter flow and and structure your data in a way that is comprehensible in a chart I would love to know I will host you on the live stream because will is getting a lot a little busy so I'm gonna have to start hosting people um so yeah we can we can talk about that we will connect data um we have three for the for the data collection or data basically creation of this so yeah we're we're utilizing this container I'm gonna try to zoom in here hopefully you guys can see my screen all right if we select this and this also will sort of be a template as well just this activity stream so we started out right with a container which is going to be my repeating this is going to be my repeating list right just this container and then I have a column in here and in that column we have a row right where we have our Avatar our name and our time stamp and then we have a container here in this container I'm using padding on the left right to push that container over and then I'm just using this box Shadow this is a this is a trick I learned in figma just so you guys know like there's this little trick where you use Shadows so you can get a border on just one side top bottom left right so it hasn't broke yet um this works for me in every use case so hey I just go ahead and use it so shadow box Shadow I'm doing blur zero offset negative two right which is pushing it to the left um so it's on that left side and then I'm just doing that and I'm connecting it here and then I have a column within that container right that I'm using uh I'm using this there's some odd numbers in here right for padding 26 because that offset is is negative two so it's on the outside of my container so anyways instead of 24 to 26 here so it matches this one which is 12 but this is pretty cool and then you you can a column right I have Rich Text in here we'll learn how to connect both of these things uh and then I have a divider here that just provides a little bit of Separation doesn't go all the way over I do not want it to go all the way over because I want this little you know drop shadow to connect through the Avatar underneath it so and essentially what we want to do is we want to make this a functional application let's just say this is a task app for sake of you know I mean this is almost any use case it could be you're creating tickets for a management app a marketing app but anything really so I hope this is helpful a few people say it is so all right Joseph says uh hooking up custom functions to a graph um Joseph put together a loom show me how you do it and we will have you showcase it on the live stream if you want to so because I I've asked the developers they haven't got back with me uh yeah it's it's a lot of data structure so this is great Kevin I'm going to answer that question how long did it take you to build this dashboard um it's not a fair question I build a little fast or I build really fast so this took me about 25 minutes 30 minutes um I utilized some of our templates here so this is a template this is a template this is a template this is a template this I copied right so like uh I built this this took me about I don't know 15 minutes maybe to figure this out so uh yeah not necessarily a fair question but you guys can build stuff like this too I mean we I am in the process of adding more and more oh no that's not what I want sorry I'm trying to get off trying to focus here okay I'm trying to build more and more responsive templates like this and adding them to our you know template screen so if we add a page here and we search responsive we have a good amount we're just showing the mobile view um I did add another one which is like a a project view it's it's sort of cool um but yeah we're working on a better representation of this stuff in our Builder uh we'll get there but let's I'm wasting my breath sorry 10 minutes in haven't even started building um let's see antar for example yes yeah we'll talk about this um for now we will just we're gonna just hide this little guy so that nobody's confused or um you know concerned so we'll uh let's see oh yeah period perfect cool we have this I mean this will be a good amount a good amount of data here so what I have I've already hooked up this project with Firebase I've utilized a exciting feature this coming uh soon I don't know when but soon um manage Firebase all within uh this project all within flutterflow but we have two uh collections we have users right obviously we need to log in and we have activity um we will just keep the activity for now you can do this a number of ways uh you can have tasks activity I have found that maybe just doing activity and then putting a little thing in here like type right this type can just be a string and then all we have to do is we're reading a bunch of different types of activity right like maybe it's completed a task or created a new task or created a new project uh or you know any of these things they're just all go in the activity collection and then you can read those from every everywhere right you can you don't have to query tasks and then query activity and then create a task and create an activity you can just create activity you're going to sign a type and that type will be assigned you can filter by that type so that's what we're gonna do here you know like we will have different types of tasks well we'll have tasks and then we'll have like maybe comments for those tasks right so let's go ahead and first we need to create a modal where we can create tasks so let's go ahead and create a component we're going to create we're going to utilize this component create task and we're going to get rid of this we don't need it about that we're going to say create task I don't need that let's see we're going to change this to task a name description that's great we do not need a URL we do need a we need to change this so create task for now we're not going to assign anything because it requires a few more things and we'll do that at the end if we have time so we'll create this uh we need a status so let's go ahead and do a drop down here cool and I'll try to manage the chat it's over here on my right away from my purview so um if there's any crazy questions I may miss them but um cool Mr facts says he'll help with some chat with some uh with some charts okay cool let's go ahead we're going to do a status here let's just say uh pending right it's most likely gonna be pending uh in progress completed yeah those those three select options okay we're going to do that and let's go ahead get an error initially stop fine okay gotcha we don't need any selected option we're going to say please select cool let's go ahead and make that full width by doing Infinity awesome uh we probably need like a due date so let's go ahead and do a container in here and some text all right and then all we're going to do sorry guys this is a design live stream so I'm going to design this as well I'm going to say 44. I'm going to do 12 pixels I'll do a border radius alternate right this is just going to be our um actually I'm going to do 300 right we don't need you don't need these guys to be on separate lines let's go ahead and wrap this in a row and let's drag this guy up here then this is my favorite option right row spacing 16 pixels and then we can just expand both of these so that they are even and we could probably name I think this is 50. right 50 yes and then 12 pixel let's go ahead and adjust this one to be our button primary large and if you guys have seen my widget styling this is all my theme widgets here so this is I'm utilizing that CRM template that we have that's on the marketplace just like a big design system um and by that it's just like a bunch of um yeah a bunch of pre-designed theme elements that you can use so let's go ahead here let's do a date selection I say date picker oh I don't have that okay date time picker current time we don't want to allow Past Times and then we can just set this from a variable and we'll just select there boom I'm gonna do that we're going to want a date time format so let's go ahead and set that we'll do this little guy and then we'll say for default value we'll say select a date or or due date right selective due date due date that's what's going to show up when we when we open this modal so that's going to be really cool all right now we can do our action to create right we're going to create a task so let's create document firestore we're going to create activity we're gonna do all of these uh status users notified we don't have that yet we'll do that we'll do that okay cool um we're going to Andrew thanks for joining happy good morning hot morning in Texas for sure so we're gonna do owner this is going to be our authenticated user so use your ref right there we're going to do due date and we're just going to select this little guy because it's going to be the selected date which is cool date created obviously current time all right there you go cool and then we can sort the list of activity by either of these name value and we're going to select this guy description as well and I'm just selecting these from variable and then we can click on the canvas when we have one action we're able to do that which is again I think really cool I'm gonna do this uh we're going to select the status from here and then that type all right we're gonna we're gonna do a a specific value we're going to call it um task I'm just going to call it task okay that's modified we'll also do current time right we may want to we may want to filter at some point in time from by this last modified or or sorry order we may want to order by this last modified at some point so this is for editing abilities so we're going to keep that in there so we have an owner a due date a date created the name of the task description status right this is status our last modified and our type and then we want to obviously add out of this we're going to show enough show a snack bar all right and we're going to say successfully [Music] created a task congrats we're gonna do informational green and then we're going to just dismiss we will make this um we don't want to make it a bottom sheet we'll just because we have this custom dialogue we'll just make dismiss dialogue there cool like it we have light dark Perfect all right we will just do a create from here so open cut some dialogue got some dialogue select component create task we don't need a barrier color because we already have one in the task itself I'm pretty sure let's see yeah we have a container and a blur cool all right so when we do that non-blocking we can make it non-dismissable so that you actually have to create that but let's go ahead and do that and let's see our preview we're just going to see this does it bring it up yes it does cool and this should dismiss awesome it's already that's already in the template so we are just utilizing templates we're editing them in some small way you know we are doing our date picker um all that fun stuff and then we're creating our task cool this is great um let's go ahead and let's see I think what we want we have our collection with some stuff and so typically what I do in order to feed stuff into this activity feed we need a couple things right we have the name of the task which we'll put here and we have maybe I don't know what to call this really it's like uh action maybe maybe we would call it a string and we call it action right so we could say completed or started or assigned right we can name all this stuff and we could just imply this so just like we're implying the type um so in our activity we're going to imply the action Maybe action action type this will just be for like an extra explainer text for our users like right when we see this activity stream we'll just see this created a project sent an update for the name of the project assigned who knows who to name of the project you know so um I like this we can do all of this stuff from conditionals and yeah conditionals it's pretty cool let's go ahead and do that um we need to in our create task we need to do this one now so our action is created a and then we'll do type right task and then you know for project or whatever cool so we'll do that we created let's go ahead and make sure that we deploy our rules for Firebase um cool right we're going to say tagged users owner oh I guess we could we could essentially um add the owner to the users that are being notified right we can do that let's go ahead and we need two things we need to make the user collection readable to everyone this is not a private application you're going to be doing this with other people and we're gonna deploy those rules so we can actually create it let's go ahead and do a test mode run I'll I'll start the test mode and sorry I was sharing I was talking through this but I wasn't showing this so we deployed our rules here deploy these guys so now we can write right we can create stuff in Firebase yeah sorry Pokemon Latios now you do hopefully we're deploying this deploying rules okay so when we create this um we should be able to create a document in Firebase and then on our dashboard let's go ahead and do this right we're gonna do um I'm gonna set this we don't need any of the we don't need all of these guys so I'm going to really ruin this it's okay I have this in another screen and on another project so we're going to just remove all of these little guys all these unnecessaries okay perfect right um okay cool so we will do list View add backing query query collection we're going to query our activity we're going to do a list of documents um we could filter by a type right we could filter just tasks or right you could do Choice chips up there and then you could filter by the choice chips right tasks new projects whatever you would like to filter by we're not going to filter by anything right now we will order by uh date created all right and then we'll do decreasing um we'll ignore empty State we don't need an uh infinite scroll right now no problem cool we do need to uh now we should I thought we were going to have to deploy our index but maybe not all right so let's go ahead and hook this up now our thing is our our test mode is preparing let's go ahead what we need up here is our user reference our owner our creator right so let's go ahead and do a document reference or beck and call document from reference we're going to do users right we're going to make it a single time query we don't need to have this as a stream you don't need that as a stream and one one other thing that I like to do personally you know in in my actual applications I'll actually do this query caching right and then do an ID for the um the task itself so it can save you some reads save you some some loading times it'll just be cashed it could make your application a little slower but it will make it a little more responsive if you just do like 15 right we don't need to see all the activity here maybe we see this all on a new page and you see a overview here this is a dashboard so let's go ahead and do that and then we can set this stuff from variables so user document we're just going to do display name here and we're going to set this little guy from our photo URL please forgive but I'm going to have to create I'm gonna have to do a create profile page as well so we can do this stuff oh we also need to deploy firestore rules or storage rules okay cool this stuff um let's go ahead and oh sorry we're going to set this one from variable two activity document not the user document we're going to do date created and then we will do time format we're going to do relative and let's go ahead and make it abbreviated I think that'll give us what we wanted here and we don't need well we'll just do zero as a default value it's just always best practice to do some default values ghost user it can prevent you from having a busted screen or query you guys are seeing that screen okay cool now we want to hook this stuff up so let's go ahead we have our Rich text right maybe we have a few extra Rich texts just we'll just leave them empty for now but we will do action type here so action type okay and then we actually need a space here so let's go ahead and just add a space and then we will do um type what do we say created a task perfect but okay created a task let's just go ahead and add a space there and let's do the name here but let's make this our um are colored right our colored one here we'll do our task name perfect we'll do that in bold sick type and then maybe we'll actually we'll do this type awesome sweet okay and this is Rich Tech so it will wrap around right we don't have to do anything fancy it'll just wrap around if these things are too long I'm going to push this down I think it'll be really cool you you can definitely I will uh post this to the marketplace well I know I will give you a cloneable link afterwards um yes you can already download well I can't download this project but yeah I'll make sure you have this in your hands um I will continue working on this over the next week probably um so you can actually make this a functional dashboard but let's go ahead and so we have everything here we have all this stuff we're creating a task probably need to see a status here or we can see a status here um but let's go ahead and add a page and I'm going to do edit I'm going to create this profile page edit profile all right create sick so we want to wrap this in a row or well in a container sorry we're gonna wrap that in a container uh we're gonna remove the height from it and make it infinite width this is another template right you can utilize and this is just our create profile I'm going to drag this little guy here yeah I'm gonna add a little bit of padding here so it's a little easier to do if that I want to do this okay I'm just going to create this profile so I actually have some user data in here when we actually create tasks and stuff um fill out the information below okay four pixels here you will do our label medium nice we may not be showing our app bar on desktop so I'm going to copy this row hopefully and we're going to just paste it here yes perfect okay and we will make this our back which we don't actually want to show in our create flow because we don't want you to go back but yeah anyways I'll just hide this for now yeah we'll just do that create profile cool this guy should have upload image to have an action here so let's go ahead and do that upload media to Firebase camera or Gallery yes yes yes okay cool we're gonna set this from that right there and then we're going to action oh great I'm gonna just delete that for now I'm going to add a new button in here primarily large perfect make this in the center and we're going to say create profile all I'm doing here is just creating or actually updating our record give me a second let me uh reload sometimes our templates when we first drag stuff in and try to do actions it's a bug Dev team's aware they're fixing it um but yeah we are edit profile let's go ahead and bring this guy up here in our main pages cool let's I'm here again down and I'm just going to Center align this column has everything left aligned so I'm just going to align that button to the middle and I'm going to say create profile we're going to do our action update um our update document we want to update the authenticated user we're going to push the authenticator user to this screen when they uh lock when they sign when they create their account we're going to add a few of these fields and then we're going to remove the ones we don't need okay so we don't need a phone number we don't need created time because that's implied when you create an account don't need uid we do need this guy or photo we'll just do uploaded photo our display name we'll do a variable we'll do this guy right here um for URL cool I mean really that's all you need you just need display name and photo you could do roll we'll just call this one yeah we'll just say this one's a roll okay so your roll obviously is a business application so let's do that all right roll specific value or for variable there you go and then we need to navigate right obviously navigate to the home page so let's go ahead main we're gonna navigate to the main dashboard perfect last thing we need to do we need to transition the user from this authentication to that page so we have authentication hooked up and again I just utilize the template from earlier um Kevin thanks for saying so I I do appreciate I hope I really hope these things are beneficial I try to explain what I'm doing and hopefully it's beneficial so uh navigate to edit profile I just think the ability what you can do in flutterflow is impressive and I want to showcase as much as I can alright so we have authentication we're going to come to this page when we come to test mode we should see that authentication page I have enabled off for email so we should get this [Music] um should get that login page and then when we create our account we should get we should navigate to the edit profile page or create profile page and then from the create profile page we should navigate to the dashboard page on that dashboard page we don't have anything what we could do is we could set up um we set up an empty State let's go ahead and do that so we actually see something here instead of a blank list you don't want just a blank list so let's go ahead and set up a component because we have this we'll show it in the nav for now and we need a component so let's create that component I'll do command k add component we have just this guy I mean I need to update this but it works it's so nice and for the sake of this demo all I'm going to do is I'm going to adjust you know little things we won't typically I'll set this from a variable so I can utilize this component um yeah I'll set up this component where I can use in every single empty list and I can just pass parameters for icons and text for this one I'm just going to do um activity or chart just do this and we'll just make it for this empty state so no activity you need to create some tasks thank you all right so we have that in our empty list here let me select our component I'll just go ahead empty list sorry you can't see because my face but this is what it's going to look like 30 to 230 yeah that works all right so we have no activity here once we create a task we should have something here which is cool all right let's go ahead hopefully test mode will work this is always interesting um fastest oh yeah um great question so as test mode is loading um I'm gonna it has been loading so hopefully it'll work uh let's see drop down menu Kareem asked um you know do you insert all countries or stats is there a quick way to do it um I wish um I've I've pre-loaded that uh drop down with states in the United States um I think Kevin I think Andrew is trying to help out we end up putting the database making it a query versus connection to an API not perfect fastest way to do it I like it cool Carol thanks for uh thanks for joining you can always watch this in the future we are to catch everybody up that it has joined recently we are connecting we're utilizing some of our template screens in flutter flow and we're connecting them to real data I wanted to Showcase you know these aren't just pretty designs they're they're not just hey you can build this in flutter flow cool that's awesome uh it's great but connecting them to real world scenarios is like even better so I'm gonna we have this list here we are in the process of creating tasks and having them feed into this list and doing all that we also could have a query count over here right so let's go ahead and do a query count and we want a number right query collection activity we can do count we're just going to account and we're just going to confirm I don't think we need to do anything else activity two two do we need to we'll just order by date created maybe that's what we need I can't recreate this Maybe it works cool no confirm gotcha and then we'll just set this from that count and this will be number format you know once we get into the thousands millions you know we want our compact and we'll just get that number there cool we're gonna give it a default value though of zero because when we come to the dashboard we want to make sure come on now all right my test my test mode is it's been a little precarious it's not loading so I'm gonna try to do it but essentially when we create tasks right we have this button up here to create a task which leads us to a create task component which is a dialogue and we're going to once we create those we're creating a name description a status a due date and then we are implying a few things I'm sorry this is a quick summary we're implying the type the type is going to be a task and the action type is going to be whatever string you want to pre-pin the task name and stuff like that and activity flow so created a task project name Etc um yes Joseph uh test mode is taking a while this is um it is taking a while I'm in beta I don't know if that's different than what you guys are getting but it's not necessarily running for me which is not good since I want to run this and we were trying to do Dynamic stuff if it doesn't go we'll we'll figure something out it is still loading and I did this test mode like 10 minutes ago so we will okay cool Joseph earlier for those who just joined earlier I had asked anybody if you uh if you know how to utilize our charts within flutter flow and you can sort of run through quickly how to do it um I would give you guys a spot or I'll give that person a spot on the live stream because what I would like is to Showcase this chart as well I think I have it over here I have this chart I wanna I wanna filter this by days and numbers of tasks created each day or completed each day more or less um there are a few ways to do it and this is possibly one this is one of them that I found right so um I've done this in the past where I have an index for each task created or each activity created and I just uh I increased that with a custom function so you know everyone increases and I make that index the X and then like you said like you can add that stuff to a list um yeah yeah yeah there's some ways there's some hacks but really I want to do what most charts do which is Trend analysis over a time period and it's a little harder so a lot of data from multi entities William um this is a good question home expired yes test mode expired great um this is a great question so performance um anytime you load a bunch of data it's going to slow down whatever you are working on uh yeah Joseph uh sorry let me answer William's question so yeah whenever you load lots of data uh it's Gonna Hurt performance period so that is just a it's a thing so it's gonna it's gonna her performance so keeping your design clean keeping your project clean um and utilizing the the least amount of sort of decorations right like gradient text and stuff like that that always slows uh the UI renderer down so um keeping that and then hopefully catching some of that data right so it only has to load once so every time you come to the page it's not reloading um that's going to be very important and we're going to get to the point where you know hopefully we can do that with some of these things and that we're only loading right we don't need this activity as I was saying earlier to load um all 500 records or a thousand records right we just need to see uh the last 15 or the last 10 so that's going to help with that and then this one Joseph um uh create a local state yes we could do this I mean we could essentially showcase uh something in the chart I want to showcase like real data I have I've done this this is I've done this for like some prototypes and stuff where we just sort of have an X I basically have two app states with implied integers um and then I load them into the chart to make it look pretty um but I want it to uh I want it to be a little more Dynamic and feed into firestore so all right flutter flow may not be working with us this morning it's actually sort of impressive this is the first live stream where test mode has not worked so I hope I hope that's a good thing but we'll I'll continue to build stuff out so we will um we'll make this time beneficial so we have this chart we're just going to leave it here for the prettiness of it for now um but let's go ahead we want the ability this is activity right this is just an activity of everything that's been created completed etc etc your entire team and then we have these upcoming Milestones or upcoming tasks right so we could also can also feed in activity from here um and fun fact you could no no we would basically filter this this for things that are in progress so let's go ahead and do that we're gonna select this list View and we're going to do it back in query collection uh activities list of documents we're gonna order by um date created you could do you could do um due date as well that would be a very common one and then we want to filter this to statuses um equal to uh wait what is this filter by oh we don't need this equal to um hey that was that was actually good nice all right equal to in progress have that drop down in the create task model so right we have that drop down here and we're just going to filter by in progress okay just in progress and we need now we need to do Firebase indexes okay we're going to deploy that oh sick test mode is up page load filter the values based on the Firebase data and so we'll say to that okay um guy thank you sorry guys these are there's some great uh comments let me first I'm gonna show this tab it works um cool so give me a second I'm gonna respond to some comments guy we are glad to have you thank you for coming over to flutterflow and I do agree I do enjoy flutter flow I hope you can find what you need and build everything you need so um let's see possible if an if another app user is online or actively using that like team members online right now um there you could essentially set some custom functions for um last activity or last modified so you could add a last modified field to your uh user collection and then you could set a custom function right that says if last modified for user is less than 30 minutes or something uh then show a certain color and if not show a different color more or less you can do that so let's see real data Joseph this may be just a little too confusing for the last uh 12 minutes that I have so do a loom showcase it and then we can I can bring you on and we'll host you on the live stream um integrated playlist I form another level thank you so much Steve right digital Pro this guy is the man uh ambassador of the month right here he will also be joining me on the live stream I think in the future a mod is working on setting that up um see platform development API okay it's possible to have authentication with something other than Firebase like autho and flutterflow um you can use apis to set up uh authentication and you can use JWT tokens et cetera et cetera all right um sorry I don't have a second person with me on the live stream that can manage the rest of the comments I'm going to get back into we're going to try to make we're going to see if this works so we're going to create um let's see uh a user and hey we're gonna just get started here ah perfect dude we got here we want to do a gallery I'm just kind of a nice little photo here oh you know what it's not gonna work because we need to set up our Firebase storage rules so if we come over here just go ahead and copy these um and I'm going to just paste them in my storage um I'll share this so here uh there's that we're going to just publish these boom all in all that I just copied from this little guy and pasted them in there um there's there's a small little bug with new projects deploying these rules to Firebase I've brought it up to development they are working on fixing it but now that should work so if we do this again gallery uh Andrew site yeah I will just do that and we're uploading success oh my gosh that's great okay and we'll do Andrew D and then head of design where I create this and then we oh my we're here oh my gosh look at this we got it no activity zero tasks oh let's go ahead and create a task let's see if this works we're going to say uh showcase the uh uh hooking up a Firebase and flutter flow it's gonna be a long name we're gonna really push that down it says awesome cool we're gonna say this one's in progress we're gonna sign of a due date of tomorrow and then we're going to create the task [Music] oh my gosh I'm not even sharing my oh my I apologize guys we can't see the screen oh my gosh yeah you're effing totally right I just did all of that and it was so cool and impressive sorry no did it it's cool so we're gonna create we're gonna create another task all right all right let's see um and create another task another task here really cool still uh awesome we're gonna do in progress and we'll do a due date of tomorrow and then we're just gonna create this task and then I get this successfully created a task and then boom we have created a task another task here right there all right I'm so sorry I didn't showcase this um and then look test created two we're just getting that count pushing it up um now you could I haven't optimized this for like floor flow reads and Etc et cetera um we have like three different areas where we're querying this or we will have three different areas where we're querying this back end this activity stuff so um we're gonna query the last 15 here right we'd filter that um we're querying the count here which is just one read which is great I'm just getting one you know the number and this is actually working pretty dynamically which is cool I really like this actually um we also have this little guy which we have upcoming Milestones so we just now sort of hooked this up to be a back-end call and now we need to design it right so we went through this designed it it works superb um status bar color on the web Gene you're right um all right I'm gonna ask answer this one question because I think it's really good uh importing if you're importing for big money you build animations at figma or flutter flow uh I would build animations in flutter flow personally I enjoy them a lot more uh and they're they're real they're real oh my gosh I so I'm a designer first guys like I've been designing for 10 plus years uh prototyping has always been a pain in the rear okay we will do a live stream on how to prototype things successfully I just saw a LinkedIn post about how to use variables to do more engaging prototypes in figma and it sucked it sucked it was terrible it was great content it was they did awesome presenting it and they gave really good points on how to do it but the process is terrible like you get one very you get like a name in a variable right like so you can personalize the Prototype say hey Gene or hey Elizabeth thanks for doing this prototype but you don't get Dynamic data in flutter flow you could build a prototype out animate everything and send it to your user they could create an account just like I did right they could add tasks they could do all these things interactively we've done this in an hour of course it takes a little more time to set up everything else but huge fan of just building flood flow um people have asked for like figma stuff for the designs and flutter flow and I I don't have it I just don't um I just do everything in flutter flow um so again we're going to query our document from reference here so we can get our user data document for reference users single time we're gonna do activity on a ref there you go and that is how we're gonna we're gonna confirm that um we're gonna gather this uh Elizabeth Lottie files are viable in flutter flow yes they are very easy to do we can actually make a Lottie file as an empty state for this list if we wanted to um we have like five minutes so I don't know if I'll get to it but there we have done that that before in our live streams if you just search back I think it's like utilizing animations and Lottie files and flutter flow or something I have a whole project that I um go through and add Lottie files into a project okay cool we're going to do this we're going to just hook this up real quick use your document display name uh user document email we have both of those typically I would set up um default values we won't right now we're going to set up our due date here okay and we want our time format August 10th actually we have it Friday August 10th there so let's go ahead and do that uh Thursday August 10th yeah okay whatever uh and then here we will do our status right so we're going to do activity status we could also right we could also these are all going to be um in progress so we don't need to adjust this color but if we wanted to we could adjust this color from if then conditionals based off of the status if in progress orange if completed green if hasn't started red or something right we could just do all of that through conditional values we've done that before um yeah in in the live stream but that's all I'll say for now cool let's go ahead and reload test mode and see well what we've done so we have two backing calls and a count we are creating web flutter UI ux to make something visual like we see on screen um this is great awesome this is incredible yeah the the live stream is probably the best for this we there's a lot of stuff going on in flutter flow and so it's um it's hard for us to push out as much content as we need we need to push out more content we just don't have time um and so the live stream is an hour that I take every week to sort of go through this stuff how to make something visual like this um we have done little things like this I think last week we did a few um responsive layouts like this um if not last week it was a week before so go back and watch those uh this is not that hard and like I said before I think who asked it Kevin asked it earlier like how long does it take to build something like this I utilized pre-designed components in flutter flow so all of this stuff is built within flutter flow uh or or sorry all this stuff is available in flutter flow these little guys this little table this little guy this side nav I just added um I don't know probably 10 side navigations like this I'm going to add this activity and I'm going to also add this screen like it was in its initial State as a template within flutter flow so this is all good stuff Elizabeth um yes yeah this this is the benefit of flutter flow you can launch faster right you can you can really optimize that time and not just pass off a vector file to your development team you can pass off a working coded prototype coded I mean an actual application you can deploy to App Stores really cool Daniel thank you I do appreciate it um awesome so we I mean this is it this is basically we have made this dashboard now functional not for every use case within an hour right but for for some use cases we've done this by um here I have this oh you can't see it oh well um yeah we have upcoming milestones we have an activity of everything that's happened here um we have tasks completed here which is cool or actually sorry this should be this should be upcoming tasks oh well we can just filter we'll have two different right when we come over here um share this one so we will uh copy this we're gonna edit we're gonna copy this query I'm going to paste it over here um and we're gonna filter it by type oh no no not type filter it by status in relation to equal to oh um complete okay firm let's take a little bit of time we we made some updates so I think that uh yeah cool I think those updates are affecting this but we'll just set that so this one will be our activity count and we'll again do this number formatting impact sweet [Music] so this one will be completed tasks right and this one will be uh upcoming there cool this won't be task completed this one will be upcoming tasks which is two and then we'll also just like we'll filter this one by status equal to um in progress now lastly what we should probably do is the ability to update statuses we have we're one minute over well let's see therefore okay let's see appreciate it probably clone and see how you connect to them yes yes um Elizabeth so we are we are streaming our data from Firebase um so if you go back I don't know when you joined this live stream but if you go back to the beginning um we connected our Firebase we basically showcased our collections here we have activities which is what we're going to utilize for all of our tasks and then we have users right so we did that we're authenticating our users with Firebase and we have this um authentication page where we create user profiles and then we go to our edit profile page where we create our profile so we get our nice little photo and name um and then we get our main dashboard and then we're adding this stuff to Firebase so create task we get that modal we are pushing a document to Firebase and then we're showcasing those documents here here and in these two spots here so I hope that was helpful um I have this little guy I will I'll make it public um one thing that I do ask um as you guys clone this project please hook up your own Firebase if you could I will post this in the chat right now you will have like five minutes to sort of copy and paste it or to access this um I'll go ahead and do that oh no this is the marketplace item oh I hope I wasn't oh you know what okay let's see oh you know what I've been building this in beta I will need to wait for the update to share it so I'll post the link to this on my Twitter later today um or the next update that we get um with a cloneable link okay sorry I can't do it now I don't think you would have access because you'll get this alert that says you can't build in beta all this fun stuff um all right thank you guys so much for joining I'm gonna end with a few questions here so Elizabeth great one uh maximiliano um I don't want to generate a QR save it as a jpeg in the database there's a tutorial on that I do think there is actually if you go to our community right so go to our resources come over here go to resources go to community tutorials here I think there is a tutorial on this if not um join the flutter flow Community here um and find it there's posts about it um there's a bunch of stuff so yeah I would do that those are probably the two best places so there's that um and also that's something I want to do as well I want to generate QR codes I want to scan that QR code pass data to Firebase like a loyalty points app you know um okay MJ let's see besides publishing the web is there a way to give a client preview link that works similar to test mode or a demo so I don't have to give them access to my flutter flow account so you can I don't know how we tier this for the different accounts um but you can give users read-only access to a project okay so you can invite your client read only access to the project you can then uh share a run mode link right you can share a run mode link or you can do a run mode link and share that link with the user or with your clients and they can they can preview it so web publishing works for you know web apps but it doesn't always work for mobile apps you do want sort of that Mobile screen pre-defined and browsers actually don't go down to it you have to like do so many things to work around it so that is a good question um who yeah I think I think Dimitar has a tutorial on this I think you're right sick guys thank you so much for joining I'm sorry if this was hectic for calc I think it was really cool that we what we were able to do um and I'm excited I built that in the marketplace oh I apologize um sick sick all right um I'll try to publish that to the marketplace or update that link in the marketplace with our Firebase connecting now so and you guys can continue it that's the whole problem with that is we only have half of it hooked up so anyways thank you guys so much um hope you guys have a wonderful rest your week um and I'll post I'll try to post some link later today or tomorrow with a link to this file or this project that you can copy so later uh Twitter name great question I should know off the top of my head um it is it is let's see a design I'll just share my profile link how does that sound that's a thing that's the thing you can do here that's my Twitter link um yeah yeah Dimitar there are some really great tutorials Steve as well the digital Pro is launching some great tutorials Daniel and Carol I know have launched um a few tutorials for users um our community is growing and our our ambassadors are really growing and getting a lot better they're pushing out a lot better content um now so it's it's really cool so yeah thank you guys so much for joining and for staying around this is amazing um good engagement I hope this was helpful and I'll see

Channel: FlutterFlow

Views: 19,255

Keywords:

Id: rV4GmxhVtFA

Length: 67min 12sec (4032 seconds)

Published: Fri Aug 11 2023