Build a Quiz App in FlutterFlow with Will & Andrew

so yeah well some exciting new things to talk about showcase today um definitely some exciting features that we probably can't share we probably yeah can't share about flutter flow but also some exciting past what few past weeks oh yeah right yeah yeah um pretty good pretty exciting stuff yeah we missed last week um because of the big launch and we got all sorts of things I worked hard I worked hard on a CRM design system and then somebody goes is this it and I was like man all I had to uh within my strength I had to do everything with my strength to not let loose on that person yeah customer service yeah yeah I had to be like oh oh I'll improve the template don't worry yeah yeah exactly like it's not like we don't have 147 templates you can use in the flutter in flutter flow that you can build like dude just take that and put it put all of those in a project that's branded and you have a design system you know so I mean like maybe I should just do that I should just bring all of those in and then just let somebody use them have a page where they can just choose and copy and paste yeah yeah I mean I may do that I may I may just do that so we'll see yeah thank you guys sorry I had a little bit of a of a mental lapse there where I had to vent a little bit on live on live YouTube anyways um we will show a few new features possibly I think something we have some really cool stuff coming up um I don't even know how to use half the stuff that's coming up like dude that Loop action stuff what uh I'm doing the email right now so it's gonna be it's gonna be launched soon yeah I'm trying to figure out it's kind of weird I think I'm at the stage in flutterfly where I've had to improvise or like think outside the box for so many things yeah when the for loops the for Loops came out right I was like I don't know what to build with this yeah like I didn't have any use cases just because I guess I'm so used to not using any uh yeah so I'm excited to see what the community comes up with yeah so um in the marketing email we we mention something around like a for Loop would be if you want to if you want to do the same action multiple times so like you know how you can create multiple like documents in a collection right and you would basically have to do that a number of times well the for Loop the way it's written in the marketing email so far is you can do one action so if you wanted to like let's say you wanted to create a quiz and you want to create a certain amount of questions like six at once you could say you know create document question right and then for loop I think you could do it six times I don't know that's that's how it's phrased in the marketing email so I need to dive in and see it's interesting yeah that's that's pretty tricky I didn't know you could only add one action to a for loop I thought it was like a full action thing it could be periodic it could be yeah it could be yeah exactly and then you have to like differentiate between periodic and and for Loop so true um yeah so thank you all for joining so far yeah that's a good ask the is flutter flow considering adding a Trigger action animation on scroll hey you keep asking for it and showvik or winkai will build it I read that wrong actually I was thinking it was like on a website um I can't remember what they're called when you add a class or an ID yeah a section and you can scroll through that and then you can scroll to it yeah that would be really cool because we have the Scroll 2 in the list view but it's just beginning of list or end of list and so it's like I sort of want some some anchors you know and HTML that's what it is anchors yes yeah yeah so Eli uh yeah we've we've we've talked about this um we're not a website building tool so like this is you know you say like every platform supports it you're right but most of those are they are web design tools right we're not a web design tool we are an app building tool which is different definitely different so um yeah but we have talked about it which is great like we've they've literally mentioned it um away a work around if you want to implement that use a page view and you can basically do um every time a page view is loaded you will animate everything within that page view so you know like the old Apple websites that are um they're basically page views you know you just sort of they're like what do you call that um implied scrolling or something yeah so you don't have a free yeah you don't have a free scroll but you you scroll down and you go to the next page view you can animate stuff in that way um we did that on the wrapped on on flutter flow wrapped so that was all within a page view everything animated in so super cool um there's a lot of good questions already woke up ready to go this is great yeah this is awesome well we've been super busy I've been yeah we're just super busy product stuff we have some really cool stuff coming um feature stuff also some school stuff coming in and Partnerships Community yeah so talk about the community well yeah some people have asked yeah perks I just sent that icon to Kathy so we should be able to watch that soon nice yeah the new community we're working on it uh it has taken a little bit longer than we hoped but ideally for good reason because we hope the new community that we've we're working on will have a lot better search capabilities and formatting and searching and allow you to you know if you're a power flutter flow user you can actually build out a robust profile and kind of advertise yourself within the Forum right um there's just going to be a ton of different new functionality right a list um yeah just all sorts of different things so we're super excited we're still working on that we'll have more news relatively soon for that but that's something you can look forward to the community and there's a lot of you too that have been asking uh or if you see questions on Twitter please answer on our behalf a lot of people have been claiming that they can't join the current Community from my understanding we're actually switching out the way the invitation is sent out because I think it's ending up in spam for some users um just through the platform we use so it might be just a general invitation link so to access the current Community if you want to sign up for it or you see people on social media like asking how you can actually just go to the resources Tab and flutterflow click the flutterflow community tab or box and that should take you there to sign up cool cool Sorry I'm just doing like two other things here no that's good so yeah yeah Andrew definitely outdid himself today with the uh the project that you know we're going to be showcasing a lot of this is going to Showcase a lot of functionality that users consistently ask for right so yeah Roofing in or dynamic record creation uh for example in this case for quizzes right you want to add a limited number of questions you can do that with different question Styles and and saving answers that's another thing like how do you save answers yeah the infinite list right uh so we're going to show you how to do all that today um we're gonna do that I'm just setting up I'm trying to make this a little more responsive so we're gonna do that the new flutterfield community uh will this be built in flutter flow no it it a a CMS or not a CMS like a community yeah a CMS Community Management uh platform system that is like a startup within itself right that like people are raising millions of dollars to to build a CMS so we did not build our own although like you very much could in flutter flow it wouldn't be a problem it's just we're focusing on the flutter flow product right so we're gonna we're gonna utilize other platforms for that so it's not built in flutter flow I can't speak for whether it's built in flutter because I don't know the the other company that well but yeah yeah so um I had two questions come in this week that were pertaining to almost the same thing it was just like a quiz like how do you how do you show progress of quiz how do you um like do something nicer looking than just like a check box um and so let me switch my videos over here and my screen over here so I'm actually looking at the camera when I'm when I'm showcasing this um and I'll share my screen oh I'll show you that one too I guess well first let's go ahead all right before we get into that I want to showcase this because look I spent some time this week trying to create just a a demo like a responsive web app right this was sort of available before um as a as a sample app but it wasn't it wasn't as completed as as it is now this is a a CRM website or an admin panel just think of it as an admin panel um I find myself building this stuff all the time so like when I build a mobile app I'm going to build a web app that can manage the users and and the projects and maybe some of the other collections here um so we have all of these screens in here everything's set up we have chat even um I'm I'm that I sort of built that custom we're gonna be Inc we're gonna be updating our um our chat our in in-app chat to um Dash chat two and so we're updating that this these are all mobile screens actually right these are these are just mobile screens these open it like this screen will open in a modal on desktop um but we have a few you know components in here um we have all the theme widgets okay so I went through so somebody was like oh this is it homie you try to do every single theme widget and you know create buttons for that's awesome 12 buttons in here yeah this is this is very helpful so I'm sorry I'm a little perturbed I hate it when my when I work hard at something and somebody's like what that's it I'm like call me don't play don't play with me um I apologize guys that yeah I have some issues there all right I want my my work to be recognized it's really nice starting point right like you wouldn't even if you didn't want to just stick with the like see or the the admin panel you can add on to this very easily because that whole design system is built out and that's like a powerful thing of this too totally and you could yeah you could add on to this I haven't um I haven't even implemented like Firebase really um Beyond authentication in here but like dude I was I'm and what I'm gonna do is I'm actually going to compare so this app works actually really well like performance wise this is all published to the web dude it's fast like it's really fast in all honesty there's no Firebase hookup so what I'm going to do is I'm going to compare it without Firebase and with Firebase and like Dynamic data and see what the differences are there and see how we can improve sort of our web app stuff so guys uh but yeah this is like it it's sort of impressive um the speed at which this stuff is and then I also like for um Enterprise clients also like without Firebase I was able to translate everything to Showcase like you know all of this translation that's awesome and like left to right I mean this is again I have this little uh this little toggle here you know like I mean I don't know this is this is a component within everybody can use this it's already a template within flutter flow so you guys can just search light dark and you guys should get this just so you know um but yeah trying to trying to make this like intuitive on mobile this opens on a new page right the profile does same thing with contracts like this opens in a new page and now I have it in a modal or a dialogue on the on the right um I love align dialogues I'm like a big fan of aligned dialogues but this is actually just a custom dialogue so nice super cool is this uh using canvas kit or no um so I developed it in canvas kit I don't know if it's actually using canvas kit because um Alex is still working out some of the uh deployment things but I think all that stuff is going live so awesome very cool yeah and then quick follow-up question that somebody had uh especially as you showcase this because you said this isn't hooked up to Firebase so their question was uh you know where's the data sword if it's not hooked up the Firebase so yeah uh two there's probably two answers to that but I'll let you uh you dive into that yeah this is all static data here um but yeah you can store stuff in app state if you wanted to um I don't know how like you you asked that question in in slack right like how how robust is App State you know like yeah everybody um and it turns out you can right it's dependent on your device size that's why I didn't know that so like I was worried that for example I'm storing my use case was like What if I want to store a list of strings within a user document but I don't want that user document I don't want to keep having to write to that user document and like there's no I don't need to do that what if I could Store It app Statewide but I was like What if I have a list of strings that's 500 long right like is that going to take up a lot of data am I gonna have an issue there so it turns out technically you could do up to your device storage and an app save which is actually a lot in all yeah that could be they're called gigabytes so totally especially if it's like uh strings right strings are not that much data so it's like it's not heavy so nice cool um so I was working yeah so I had multiple people ask questions about essentially how to do a quiz right like how to sort of progress through a quiz um and also how to do custom and so I'm going to share my screen again so I'll show you guys the finished version um of this I would I quickly went through and made this responsive last night so it's not perfect um but it works for now so we have this um quiz my results page for some reason I'm getting blank um yeah we have quizzes here we have questions um you can create a new question so does this work on live you do a subscription or say yes it does you can add that and then uh it doesn't you can add that you can even select the right one right so I'm selecting the correct answer here so instead of just like a survey where you give options people select the options you store all the options we're going to store a correct and an incorrect answer so and as you can see right we're changing the style of these things this is a very common pattern in like onboarding when you give them options right nobody wants to use a drop down like it's ugly to user drop down to select options right um and you want it more engaging user experience well guess what this can be done in flutter flow I figured it out and it's fine it's like so fun you can do anything so I'm going to show you how to do this I'm doing all this with a page State like all of it and I mean even do this dynamically right so these are Dynamic um so let's go ahead and we'll add this question boom boom and then we're updating our our question count as well so we have four questions here we can take the quiz right so we'll just take the quiz another question this is great I hate this we'll do that great I get 100 points wow that looks so good I love the The Innovation there too yeah yeah you can do all that conditionally hiding that on the page and I have an on-page load animation for that element right and it's just going to animate in no matter so and I'll show you guys how to do this as you can see like my score will increase wow 100 points boom 200. we didn't get our fourth question but we'll figure that out 200 out of possible 300 go back home so yeah we can do this quite easily in flutter flow and I didn't do somebody had asked like to use the progress bar um in the kanban board example we use a custom function to basically calculate between two values and you can do that here as well we could we could use a progress bar up top um essentially what we're doing Mike the way my collection is built um I have I have users obviously I have quizzes this quizzes has like this is where we're storing all of the questions right we have a sub collection of questions here so we have a question a description the correct answer right so we're just feeding a string to that correct answer then we have options which is a data right this is a data type and the data type is just like a string an index and something else and then we have an index for the question as well um so we have quizzes here created you know you can add so list questions right we have a list of questions associated with this quiz which is where we're getting a number from we have total points which I'm using a custom function just to like multiply the number of questions by a hundred and then that's your total points so we have that um quiz name yeah description let's go ahead and look at that data type uh I got this from will so we'll have built a very robust an extreme way more robust uh quiz app than this okay this is a simplified version I mean with his quiz you can choose question types like you know a slider multiple choice short description long description storybook you know all these things it's really cool he'll show it off at some point but yeah super sick um so yeah we're doing question right and I have I have some options here I think really all you need is this name um uh no the correct option as well yeah perfect okay um and then sorry I'm going through this fast I hope it works and makes sense I'm gonna share this as an example like I'm gonna I'm gonna fix a few things there's just a few things I need fixed um and then I'll share this as a example because why should you build this from scratch it took me around three and a half hours four hours um I probably got 90 of the way in two and then you know I I also loomed myself building so if you guys want to see that and see all my mistakes you can do that um I literally had no clue how to build this when I started so I knew how to do the uh the question so like I knew how to do sort of the toggle on off um question but like I didn't know how to do it dynamically like what I've done before in the past I've done like static options like for an onboarding right I'm uh admin or I'm a um you know a shop you know I'm a shopper or something right giving them two options and then basically just selecting between the two options and feeding that as a string to your user collection but I didn't know how to do it on a dynamic form right like you have all these options how do you do that and so it came up with a solution utilizing page State um so we have this so this is my create question page right um essentially what we're doing is we're typing in an option here and we're adding it to a list of options and this is actually not creating anything all right all this is doing is adding this option to this page state so we have question options data type and then options and I'm just adding them to this list okay so every time I add here I'm adding that to the page state so if we go to our action here we're validating the form we're updating the widget we're adding that created option to the list and then what that does is it gives us the list okay because we haven't created the question yet when we create the question or add the question to the quiz we then you know we give our options we're setting the value setting the value of our options right and we're just setting it from that page state so nice this was like I don't know dude I was like this is this is cool I didn't know how to do this before so this is like me being I was it was a revolution for me or a revelation Revelation not Revolution I'm not going to raise the capital um but yeah Revelation to me I was like oh cool this is option um it also provided me with the ability so I have this correct answer right so I'm also doing that correct answer as a page state so here correct answer is a string and so when I click on one of these I'm just I'm making that the correct answer and what I'm doing is I'm feeding that string to the page state so I'm saying set this option name as correct answer when correct answer is selected option item equals right so option item name equals correct answer which is that page State then I'll have the purple border around it you could also do like you know if I wanted to I have a row here so let's go ahead and duplicate that text we'll make it right aligned and we'll just make this like a further you know clarification that this is our you know correct answer so we'll do purple and we'll say correct answer and then we will conditionally visible we'll make that conditionally visible based off this condition nice so we'll do that option name we want a return type a different return type we want a Boolean let's do that cool and then we'll just make that false cool that's it so when we select one of these we'll just mark it as the correct answer and it will be added right and then so we create these questions we add them to the list um oh this is I'm working on this sorry that's in progress this is my actual quiz page and I'm doing a few things here um because okay there's two ways to do this just so you guys know right everybody complains about I don't want to use Firebase all this stuff like all you know like I I wanna you wanna build something that's sustainable okay the probably the best way to build this entire app is just query doc query collections on every single page right so before you saw that we took the quiz right and we only did three questions we really needed to do four questions the reason why we didn't do that is because I don't query the document on that quiz Details page I just pass it as a reference so I'm not I'm not getting another read right what I should do is I should query the document on that page because that's going to update the number of questions right within my list and that's what I'm basing my take quiz on my final questions so we get that final page because when the number of questions which is four it's a number of of the lists equals the question index which is right here if you look at this I'm doing page I'm doing some page dates here in order to help with that helps help sort of reduce the headache and I'm just increasing that index every question so when they equal one another we get transferred to the completed state so anyway sorry that's a lot of work around um I'm sure many people hopefully people will re-watch this but as well I will post this so you don't have to recreate this but if you want to recreate something like this dude yeah do it I mean this is I think this is so beneficial um you could do surveys like this you could do quizzes you could do any type of education app like this you know where you know just hey these are these are these are your quizzes you have to learn right you have to do these things in order to pass um and then the quiz results are what I haven't got working yet I don't know why we'll figure it out but yeah okay or what do you mean oh yeah I'm just I I think I'm I'm not querying them correctly it's probably an easy fix that I just haven't had time I'm gonna refresh I guess because I get this look at this as we're doing the live stream we get to update our app we're not even in beta this is app I mean this is like what our users get so okay I wonder what the new feature is let's see yeah features oh I still get this maybe I need to like refresh refresh yeah um we'll see I'm trying to think of what new features well it's probably the could be the for Loop right it could be the four loopback ah for Loops are now officially live on I think so so um dude look at this and also Okay small thing small thing but look at the the canvas nice drop shadow rounded Corners up here I mean it's looking sharp looking sharp okay so uh so yeah where were we we were over here on the question uh details here all right so we're doing a couple things here um and again best way is to just query the document on this page okay but the problem with that is if you have a 20 question quiz you get 20 reads right oh actually not defined oh right wrong oh that's me that's me that's me sorry oh okay you're trying this four action Loop stuff really fast yeah that's a good one that's a good page to mess around on because I haven't done anything all good my guy all good all right so hey let's show us how quick and and the collaborative flutter flow is right yeah yeah all right so um so yeah probably the best way to do this is just query the questions or query the quiz um doc or collection document on this page and then just get the question matches the index you know um I'm not doing that what I'm doing is I am well I I sort of am doing that I guess I have this back-end query for questions but I'm I'm taking the index and the score from um a page State a page parameter really and then I'm just increasing it every question and passing it to the next page so we have a few things here okay um we have these correct and incorrect right feedbacks um we're showing them based off of a page date we have the selected answer right we have an answer correct answer wrong and we did that because there's three states really instead of two it's not just answer correct or answer incorrect it's answer it's no answer answer correct answer incorrect so that's what we're doing here we're basically showing these on these two booleans and then the selected answer right we're feeding that selected answer we're setting that when we when we do the page load okay so we have selected answer equals none um and then when we select here we're setting the selected answer option name option item equals option name and then if it yeah and then we're basically running that query so whatever selected answer it gets purple when we do our next right you could change your answer when we're doing our next we have this condition if selected answer answer equals correct answer which is from our backend query then if it's true we're going to set this to true the correct answer if it's false we'll set it to false we'll update the document and the score we're going to wait a second you know 1.2 seconds right we're going to let you see that correct answer or incorrect answer and then we're going to navigate you to that next page and then what we're also doing is we're updating so I was saying that let's see score current question yeah we're doing that uh-huh it's down here so index equals number of items and lists right if we have four questions and we're in question four we're gonna navigate to the completed summary if we have four questions and we're on question one two or three we're gonna navigate to this page again we're just reloading this page and what we're doing is we're chain we're increasing the index via a custom function I had some problems with uh expressions Math Expressions here sorry yeah we're just doing current question increased by one moving to the next page same thing with score we're doing we have this um score associated with our quiz result so it's stored in Firebase it just wasn't updating because again I'm just passing a document or I'm passing a reference through these pages I'm not I'm not querying a new one every single time so this is really good for Firebase reads if you have a bunch of users again that probably doesn't matter you have to get to millions of views millions of reads before you get charged but for those that have millions of users on your apps uh this is going to be very beneficial so um which I hope you do I mean that's amazing right so we're increasing we're moving to the next page um and we're storing that as as a page date throughout and we're also passing it to this um quiz complete summary as well and that's what we're showing here um but we are storing that within Firebase so after this right you go home um the goal is to come back over here and then when you have your results you have your scores for each quiz that you took right so this is this is the goal to get to this results page right now it's it's bugging out on me um trying to get to the bottom of it it's just some null value I can't figure out what null value it is so good stuff fun stuff um but yeah that's how you sort of build and there's there's two different ways right so what we could do here is we could add that progress bar as well on the question Details page so here I have the index versus number list right we have this little guy and we're basically just we're increasing that every time so when we progress through this oh I'm struggling us sharing the proper screen um as we progress through this take quiz we're going to increase on desktop I haven't I haven't made this responsive yet or like I have this in the app bar which makes it all the way over here but you can see one of three right and as we progress through it increases two of three and then we increase our score same thing over there right boom 200 that's awesome 303 so we're gonna progress to the finished State oh no and we get a possible 200 out of out of 200 so again yeah infer the animation at the end there what did you use for that uh check mark a Lottie yep nice again that was so that completed screen is a template okay I just added a few things to it so this is a template you just use this it's like success page or something right and I just added this little box it already has its lawdy animation loaded um it already has this this this and this I just sort of added a completed you know box with some total points so again I mean I think the power of using flutter flow as a developer is you'd all of these pre-built templates template pages and also templates um maybe people don't know about them we've tried to show them off I try to I mean I work hard on building them so I want people to use them I think they cover uh a good amount of use cases um if you guys have other use cases that you want please let me know but yeah so we'll do one final thing here we have about 25 minutes it probably won't even take that long so we can field some questions but uh one of our users or one of the people that had the question also wanted a progress bar right they wanted to showcase the progress bar increasing every time you came you know you got a new question so let's try to do that um first we're going to add a progress bar here uh we'll add it right there that's cool we do not want um we're just gonna we actually have a theme style for Progress bar Boom come on we're just going to utilize that that's awesome yeah lots and padding here um I wish that our progress bar could just be yeah um yeah I wish it was better yeah I wish it was yeah I wish you could expand it um you just can't I've tried to talk to the guys um you know and you can't even set it by um a variable which is a little annoying but we use the products bar on mobile it'll look good so no problem there and what we need to do is we need a custom function to decipher the um the difference between these two numbers essentially right we have an integer here we have a double here yeah we need to convert these to doubles essentially and then do the thing in between so let's come over here to our custom functions um and let's I think I have a team function oh oh stop it stop it we have a yep we have one right here so we're gonna return a value we have a progress bar values we'll just add that I'll add one I think that's an Enterprise only feature guys it's a team code group or Library um so don't get too I'm too excited about that um but super cool so we have our progress BAR value right um we're gonna feed it two numbers our total number and our completed number and then we're going to return a double because a progress bar needs to have a double in order to like display it correctly um so this is great all we did was I wrote this with code Copilot so it was great we can do like total number six and we'll give completed number four and then we'll run it and it should give us like 0.66 or something right like it should be yeah right there boom that's all we need um so all we need to do now you need to check our our code for errors probably and we're just going to hook that up so again you guys can I'll probably try to detach this when I share this so you guys can have this progress BAR value um it I wrote it with code copilot so it doesn't take any skill you just have to say you know decipher the difference between uh two numbers and give me a return a value of a double you know something like that it's awesome freaking love it like I'm no longer I'm a coder without being a coder uh and then we're just going to do this progress value so let's go ahead and do that we're going to set it from our custom function progress BAR value our total number is going to be the number of list items so we have that from our quiz get property document property uh yeah list questions number of items and as you can see like I have a few different things that I'm working on in my collection there I have like a number of items lists and I'm like maybe that's a better way to do than just like the total numbers of a list of stuff but anyways completed number so this will be our index from our page because we're increasing that and so this should update as we go through that quiz so let's go ahead we'll do a little test mode we'll answer some questions and uh hopefully hopefully there's some questions but do you have the index starting at one yes index starting now I want to make sure you aren't going to divide by zero with the custom function oh yeah yeah so here when I when let's see quiz details so when I take the quiz right this is my entrance into um sorry oh I really messed up this page oh man I really messed up this page because I wanted to do something anyways sorry um I'll do a snapshot and yeah are here um when you're using an index if you're not aware index does start at zero so yeah if you're using you know index and a list or index and a page state so for example in this case right when when Andrew's showcasing the number of the quiz question note that he's either gonna have to start at uh one you know for the first question and then increment it or you could have a custom formula as well yeah yep and so when I take that quiz um I have this so we have the quiz right the quiz is sort of the parent okay the quiz is what like we create the quiz has a name description and then it has a list of questions right those questions are shared associated with that quiz we want multiple people to take that quiz though so we can't store any value with that quiz like we're not going to store The Collection like with that quiz right so we need to create another collection tied to that user so that's what I'm doing here this quiz result we're creating a quiz result which allows us to tie the user to that quiz result tie a score right I set it as zero when you start same thing with current question the current question is one I'm passing that to the next page and then a quiz ref so again I'm tying this quiz result to this quiz so that and that's what I'm doing on this set of page I want to show the quiz results associated with that quiz all the users so I'm in the process of that but um yeah and then we're navigating that that page I'm passing all of this stuff um a quiz quiz resolve the index and the score which is just going to be zero so passing it there and then yeah when we and you also have to set so like for this sorry I have so many tabs open I'm gonna close out some two cool and then quick question while you're you're doing that um so what else where do you actually share these examples right you want to answer that Angela I do share them on Twitter um I basically tweet them um I'll add this one to the marketplace as well so that's another place we add the CRM I'll add to the marketplace um but but I'm sort of waiting for like version two So currently um there is like that CRM on the marketplace with a totally different theme it's like a blue and gray theme um and it has like 3 000 downloads but when I update it it removes the downloads so it gets less ranking which is a little annoying so I'm talking with the developers trying to change that so that we can actually update stuff and not lose our ranking um so but I will update that I duplicated the project so I can make a new one um and share that in the marketplace so yeah some really cool stuff happening in the marketplace too we're contacting creators to build out some some stuff so it's coming now right our development team's working on a multitude of new things like really awesome things so things take time we still move fast I mean I don't get it when people complain about like oh this wasn't launched I'm like oh boy like there are things being launched I just I'm not a big fan of like misappreciation like not appreciating people's hard work like I want to experience I want to appreciate people's hard work our development team works extremely hard on launching really cool features um really are industry changing you know like in my opinion they're industry changing like yeah it's really fun stuff so test mode is running we're gonna try to get this up and see how this progress bar works um but yeah I'll tweet this and I'll add it to the marketplace you guys can and then I'll tweet the marketplace link um we'll probably need to check this so that we have no errors in our test mode oh no this is snapshot I was going to come to our quiz details this is what I was gonna do just copy that over for right now okay I'm going to save this version saving on live stream please revert to version two all right I'm going to remove this guy here and add this guy back perfect we'll just do our custom functions here and then our test mode is still sort of working on it hopefully I didn't bust anything doing this yeah sometimes through your test mode if it does take a little bit longer definitely recommend just doing a refresh of the page I know sometimes it like I think a lot of people don't realize that we're like truly compiling the application for the test mode right so sometimes just like small issues could happen and things like that so just give it a nice refresh yep cool there have been some some good questions as well um you know one of those uh there was a lot of questions or someone kept asking a question about local search you could actually just do that via action uh we'll show that in a minute but take away Andrew yeah totally totally we'll do that user collection so yeah this is what I get with results um unexpected null value that's great thank you it's like not helpful anyways um so let's go here we have our oh we need to reload this so we can actually see our list of questions which is which should be there um so let's reload and then what we're going to test is that progress BAR value so let's go ahead and do that down here maybe I'll I'll change this to like yeah we'll do that increase okay I'm gonna take this quiz whoop whoop look at there progress bar one of three right I love it not too bad not too bad we'll do that and then we won't get the third one oh we will oh nice oh come on I mean this I'm just going to send this to the guy who asked me uh the question because this is just this is too superb you know so 100 points boom 300 out of 200 so yeah what I need to do is um come back here and republish this quiz so I uh I basically have the total points being associated with the number of questions times 100 but I don't have the I need to do like a periodic action or something so it's constantly checking how many how many and I didn't do that I just had an implicit action so I will see but hey that was pretty cool um yeah and again it's great yeah this is um I'm trying to what I'm going to do is add a grid view here for desktop um and probably like a web navigation for desktop as well um on mobile this all looks great um in what a day oh like four hours yeah like four hours yeah it started at zero um new project everything I used you know template screens obviously like utilizing there's been a lot more um yeah on the public screens so definitely check those out I know Andrew has been working very hard with some responsive is that correct we do have some responsive yes um and I'm working on more responsive we're we're also working on so this is like we you know you guys see some of the customer stuff right like new template screens and stuff like that like and then I'm also working on the user experience of how we add those things and then also like how we how we do this how we connect data so we have some really cool things coming um and also like just a better ability to add template screens find template screens sort them search them uh see like responsive screens or mobile screens only stuff like that um so yeah there's a lot of new things coming we're working on that surf in the in the background but we see that as sort of a core competency of flutter flow we have all these really cool things and you can build responsive apps um that look beautiful and function well and like I said like dude I was really amazed at the just the the quickness of that app without Firebase I'm looking forward to to comparing the two with Firebase and without Firebase and see uh you know how they perform and stuff but I've been impressed with the web app performance that I've had in some dashboards that I've created and and deployed so yeah yeah definitely definitely speeding up and I think canvas kit will help uh obviously still on beta but yeah I would recommend everybody to to try that out that's definitely yeah and we're pushing canvas kid I think to be our default for the Builder which is going to really increase the performance of the Builder so I built this whole app in canvas kit um like the Builder canvas kit and it was really Snappy like really really Snappy I loved it uh nice that's awesome yeah so again you know in this sort of live stream we went over how to set this up we didn't build this in the live stream um but we we showed you how it's set up and how you can you know create a new question you can add options here you know and we're doing this all with page state and then you can you know add them to your page and then you can publish the quiz and you can you know let's go back here we can take the quiz and we have this progress bar that shows one of four points I mean man I'm I'm happy with this like this looks awesome I did this and I was like yeah this is this is it you know so yeah 100 points like boom 300 out of possible 400 like this is cool I think I think you can really do a lot with this so I might be publish this on the App Store as an example flutter Flow app yeah yeah I think you're right I want I want to do some some yeah I want to do some more right because right now you can create them and then you can take them but really I want to like send them or publish them and then like share a link and you know you could have like you know some research around that and then you could see results from that yeah yeah totally you could exactly I mean you could basically build that with your with your options right you have like right now this is just like single select right no short description you can build different question types literally will with this amazing like 16 grid uh 16 item grid like question types it's pretty impressive so that all just comes from data types you can explore that I'd recommend you people checking that out um yeah but yeah that's a great question Andrew you want to answer this one yeah so Joel uh the benefit of canvas kit is it renders everything quicker as like um as pixels I guess not as like Java like you know right now we're rendering it from my understanding please don't quote me on this I'm not a developer I don't speak developer really but from my understanding uh right now we're compiling everything as JavaScript and then try and translate into HTML and CSS and then like showing it on the you know on our screens and with canvas kit it just produces everything as pixels like it's just like boom it's there it's basically just drawing everything or yeah drawing everything that's I've heard that so it basically renders everything quicker everything's sharper so we actually have a um an option so on this screen you probably won't be able to see the difference uh via live stream but for me I see something super sharp between app and then canvas okay well do you just want to showcase that option in the web publishing as well yes yeah people know where to find it yep and and basically this will make your web apps more efficient like it'll be more yeah so like here's it in canvas kit um for me it's like it's it's just clear I don't know what it is dude like it's just everything's sharper the the lines like everything's thinner as well so like our line icons are thinner uh but the text is a lot sharper for me um and just everything's rendered and it's way quicker so if we come over here to our settings um in web publishing will give you the ability to use canvas kit as well so yep for web publishing if you're deploying your app on mobile keep in mind like that's the power of flutter flow so it's natively being compiled in uh or for iOS for Android right so don't like canvas kit would be for web only don't confuse that with you know trying to change your IOS app to Canvas yeah exactly I mean dude I I have not been mad with the performance of my my deployed flutter applications like I think they they're great you know even with a bunch of images a bunch of list views like I think they just they work really well right like you know but yeah this is mostly for web which which increases your performance which is great that's like the one caveat right with fluttering it's like SEO not as great with flutter and then performance is not as great but you know what in all honesty that's how it was with angular that's how it was with react that's how it was with all of these languages when they began so yeah you know they have longer time of being deployed to web they've they've improved flutter's the same way it's improving constantly the team behind is awesome um they you know like the performance that we get in our web applications now is due to their fixes not even flutter floss fixes flutter flow went through and they optimized some stuff and Shout Out Anton um you did an amazing job job of of putting in some optimizations for our web apps when you deploy from flutter flow um but then the flutter team has also improved um how flutter is rendered on the web which makes it better performing so it's super cool um yeah if you guys can't if you guys can yeah yeah if you guys um can try canvas kit please do I think it's awesome we're gonna move um we're gonna move um all of flutter flow I think to Canvas kit um or at least give everybody the option to um because it's just it's better performing so yeah we can answer more questions um I think we covered a lot in this I hope this was helpful um I hope you guys see the power of I love this power we could probably add another option which just gives you like the ability to create a survey which doesn't have you know correct answers it just has you know selected answers and then you can sort of see everybody's answer so yeah this this example is very um rudimentary it's a four hour project right like spend another four hours you can get so much more power out of it spend a day and you can get more you know so um yeah it's gonna be cool I'm excited yeah here's a quick question I have for the people actually viewing the live stream so someone just made a comment which is actually pretty awesome the performance difference between well maybe it's not awesome the performance difference between the web app version and Mac OS version is massive I've heard that from Andrew Andrew you've said that the Mac OS apps are like sappy responsive great personally I have never been successful in using or publishing a Mac OS app whenever I use it I always get an issue during login using auth yeah no matter what auth I've used I've always had an issue has anyone in the live stream faced an issue there um with auth and uh Mac OS apps I love obviously like we'll go on to answer any questions but if anyone has an experience with that I'm looking to to figure that out myself so not a fun flow related issue it seems to be like a personal computer issue or something because Andrew has no issue is publishing and yeah well I've ran into that issue before so it's not that I've never experienced it um I do experience it sometimes and I don't know what it is yeah I don't know if it's Firebase issue or what um but yeah so yeah Carol Carol asked the question he tweeted out something earlier this week about you know future requests or something definitely leave feedback here um our team checks this we're in the process of updating this form I already have it developed so it's going to look a lot better but yeah submit your feedback there it comes into a slack Channel we all look at that um you know get your friends to submit the same questions so there are team sees there's a bunch of them um that would be great um but yeah that's the best way um you know don't don't just tweet it will and I A lot of people do that and uh we you know we're on Twitter but like dude we're not customer support we're not the dev team we're growth and design you know I mean we produce so it's like security issues there too we're also pretty limited um so everybody knows that like we take security and and support I know a lot like people sometimes complain about our support but we do take security and support and compliance very seriously so oftentimes like there's nothing that Andrew and I can do to resolve your issue right like we don't have access to anything on your side uh yeah so just yet another reason to contact support in situations like that yeah yep support or feature request um and also I think this guy Mike St said like oh the performance between the Mac App and the web is massive well yes it's meant to be massive like it it is like the the web the Mac App for flutter flow is a lot better and if you can download it um do it yeah I mean it's gonna it's a little behind I don't build in it because it's a little behind on the features right we don't we don't update it quite as often um and there's a whole process there um but if you're looking for performance do the Mac App um it's awesome and yes then we have this plethora of things Windows Windows Windows Windows um there's some complications with the point to win Windows um so that's why we haven't done it yet but yes um that's going to be most beneficial canvas kit will really help you so those of you on Windows machines that experience performance issues with flutter flow again this is not just the flutter flow issue dude this is any web app I'm sorry like figma after effects like any anything right like you most likely will face issues if you have 50 tabs open if you utilize it for a long period of time without reloading or restarting your Chrome browser or without restarting your computer like there's a bunch of issues um flutter flow is a tool that builds apps okay it's going to be a heavy tool period like there's no light light way to do that right um almost any tool that you that I've used I don't know about y'all maybe you guys maybe there's a secret weapon that I'm not not you know familiar with but like when I build in webflow when I build in um any video to any video editing tool Canvas OR like canva like any web-based design tool figma on the browsers you know like when I'm building for a long period of time things get slower so you know it's just uh yeah it's it's gonna happen um we're we're doing our best to combat that and this canvas kit will help improve that performance so for sure yep yep cool awesome guys thank you so much for joining I hope this was beneficial um sorry we didn't really live build but hopefully I think this was we tried to get into the logic and App State and how to use well really page date and how to use page state to your advantage um and I found I found this really powerful like again like I said I built this app not even knowing how to build it like I didn't know how to build this Dynamic selection of options um and feed it to a list of you know things and then get feedback um from that like literally no clue um so I like film myself via Loom and dude it's like all over the place I'm like oh I guess that didn't work all right we'll try this you know and okay well we're not passing that you know I had like problems with incrementing numbers I was like well we're not incrementing the numbers okay so let's do a page day all right so it's a bunch of failures but I feel like the failures allow for beautiful finished product and it allows you to know what to do better next time so we're all learning we're all having fun nobody's perfect and uh I hope this helps and you can get some powerful ideas from this so cool thank you guys thanks everybody yeah yeah thank you guys all right we're gonna go offline now

Channel: FlutterFlow

Views: 14,815

Keywords:

Id: VdLE8bbur5s

Length: 62min 8sec (3728 seconds)

Published: Fri Jul 14 2023