How To Make a Quiz App using FlutterFlow!

we are super lucky to have Andrew here today he is the X head of design at flutter flow if you've seen him before you know that content that he creates is great he's a wealth of knowledge and we're really lucky to have him here for this presentation so I'll hand it over to him let him do his thing and yeah let's go ahead and get started cool yes yeah my name is Andrew Daniels I was the head of design for flutter flow I was founding designer however you want to say it I've designed the platform since day Zero For Better or For Worse all the UI and ux or not all the ux most and I'll say like 80% of the UI because we have some developers that sort of just implemented stuff based off our design system but a majority of the stuff is my fault again for better for worse I've really enjoyed the evolution of the product itself for those that maybe haven't joined my live streams in the past because I had hosted a flutter FL live stream I will give an overview of what flutter flow is a little bit of background for me so yeah I was on the flutter flow team since day Zero so before they launched a YC I designed the interface worked with Abel and Alex as they grew the team I yeah so I was number three I left number when they had 50 employees and I just left about a month actually three weeks ago so I've been journeying onto a a path to do more of this teaching and engaging Builder flutter flow developers designers I want to empower everybody to build production ready applications in flutter flow I think it's an amazing tool to visually develop and produce applications as a designer I feel there's so many times where I felt incapable of launching products because I was not empowered was not empowered to actually turn my ideas into an actual application and there's been Tools around I mean web flow right no code tool for websites landing pages all sorts of fun stuff framer I've been a user of framer since their prototyping days back when they were a totally different product so I'm a no coder from the day one but there was nothing really there for Native applications for those of you that do not know what flutter flow is I will just do the small intro of a landing page the typical yeah just showcase this actually is so flutter flow is a visual development platform it's not necessarily a no code platform it's not even really a low code platform it's visual development by that we mean that everything you drag on the canvas turns into code you have the ability to download your code if you have a Pro Plan obviously at any time you can extend your apps to the extent that you could encode okay now there's pros and cons right why don't just do it in code not everybody knows how to code there's very few incredibly talented developers that's why it's so expensive to build applications before I worked at flutter flow I was an agency owner I own an agency called C design right that's how flutter flow found me that's how most of our clients found me is because we design applications we've worked for Babylon Health torches teachable as centure orcan mounts design stuff for chilies Dunkin' Donuts all all sorts of really cool Brands we have a team of 10 now and I help out my design or now I'm coming back to my design agency but the goal would be to like I said build out more tutorials and instructions on how to build flutter flow applications so my agency just acquired this no code UI and we are building a education platform in flutter flow that we will deploy to iOS Android web tablet and allow people to go through actual course content I'm going to give you a brief overview of flutter flow for those that have never seen it in action I know I was just talking to somebody who had never even opened the editor so I think it'll be enlightening to see what you can actually accomplish so many people well they when I say they missed the opportunity or they miss the vision it's because sputter flow doesn't do a very good job of explaining everything you can do flutter flow I'm allowed to say that because I designed the website and all that stuff so it was on me um and the team that we just didn't focus on those things so this is me telling everybody what you can do so no code u.io there's a lot of information on here there's also registration for a small little boot camp really it's just a course and it's a learning platform that you can get access to we will eventually do a boot camp where we launch curriculum assignments tests tutorials everything that's required for you to actually hone your skills on building and flutter flow but not just building and flutter flow becoming a designer developer it's mostly angled towards Freelancers agencies entrepreneurs would definitely benefit from it builders on teams that are utilizing flutter flow for me I see the product development cycle as broken this is a personal belief right I see the product development cycle is broken right and that's a larger that's a larger conversation not really tutorial based so I will I will share I think that flutter flow helps solve that Brokenness right so when you dive into flutter flow this is the desktop application of flutter flow so you can design on the web right you can build stuff on the web or you can build stuff in the desktop application or you can build on iPad I prefer the web app and I've building a lot in the web app because there's a neat little feature called local run which I will show off later hopefully but what flutter flow allows you to do is build applications for iOS Android tablets so I say tablets it's like Android tablets iPads Mac OS apps Windows apps I think windows and beta and then also the web so you can build responsive applications I'll showcase the the platform that I'm building actually so we have login page right this is going to be a responsive application so these things are really simple but as we get into a few more detailed screens right like this home screen you can see how it performs on different devices just like most applications you can switch through device screen sizes up here we have light and dark mode integrated into the Builder we also have multiple languages if you guys are following web flow and framer I follow them on Twitter all the time I love those platforms but like they're implementing multilingual localization and it's great we had it about a year before either of them so I just want to give kudos to the flutter flow team they did ahead of their time but I would say ahead of their time on multiple facets because being able to develop a product and launch it not only to the web right not only as a web app but as an IOS app and an Android app is something that's extremely hard and is only possible by the power of flutter so all of this is built let's see code we'll view code and as we said right everything you build is also turns out to be code so you're not just building an abstraction of code you're not building an abstraction of your design right this is not drawing vectors we're not working in figma everything we drag on the canvas is code you can pass this off I work with a developer on the Cleo team they help extend our UI and the functionality that I can build in flutter flow they extend that with code we have an app that we built it allows you to have a custom audio player right works just like Spotify not possible in flutter flow but with a little bit of extra code custom code on top of that the GitHub integration within flutter flow it's very simple so I just wanted to Showcase like what is possible and highlight some of these things I know some of you guys have joined from the live from my own live stream but maybe we have new Builders here and I want to showcase the power of what flutter flow does so let's go ahead and create a new project we're going to keep it short maybe 20 minutes we're going to have at the end of this 20 minutes we're going to have a working authenticated or or application that allows you to authenticate yourself and maybe create a record maybe a social post something like that so it's extremely simple we can just name it no code live stream there are some sample apps here they're just for like simple use cases I would say like if you're into a meal planner you can use AI here also we have a thread social or like a Instagram clone essentially I don't know if I'm allowed to say that but yeah it's a social application we're just going to create a blank application and then we are going to skip here and we're going to start building two things that we need to do in order to get started so we need to copy and paste a letterf flow Firebase ID and so I'm going to do that real quick just from another project so we can do that you can also create a project on Firebase all within here the desktop is having some bugs right now so this will actually time out on us but we can do that via the web but it's very benefit let me grab this icon also as far as like databases go right in flutter flow so you always have to connect to a database right that's the whole point of applications there are three options in flutter flow and then there's innumerable options through apis so I don't want to skip over that like what's possible what's not possible in other no code platforms you have a built-in backend right and therefore you can build stuff quicker right everything's connected everything communicates but we don't do that and it's on purpose we want you to have an extensible backend that is production ready and not just limited to flutter flow right flutter flow allows you to when you have an external database you can export your code from flutter flow and continue building you're not limited to just always building on flutter flow always paying $70 a month now I hope that you do right because like it's beneficial but but I'm going just quickly copy my thing I'm going to stop sharing my screen so that I can paste it in here we're going to connect our Firebase real quick and then I'm going to autogenerate some config files yeso okay just so I don't don't want to make those make that Firebase public currently but we're connecting config files essentially it's just creating our apps in Firebase so now we have a a Bare Bones right Mobile screen very empty what do you do from here well there's a few things you can do you can come over here and you can drag almost anything onto the canvas right drag a container an image all this stuff it's drag and drop the number one rule I would say if you're a beginner right if you're a beginner and you don't know how to build in flutter flow the number one concept you have to grasp is it is a structured layout system so so it's not like figma or like bubble where you can just drag things on the canvas and arrange them how you want everything is structured it's essentially like working in Auto layout in figma but way easier if you think about that construct this is actually a little easier because it's structure so columns will stack things vertically rows will stack things horizontally and then Stacks will allow you to do that free form stuff but those are three layout widgets within flutter that just allow you to create your designs so if you think about that or if you understand that concept I think it's a lot easier to understand I was lost until I figured that out so once I understood that I was like okay cool now I can build anything that I want another thing that I would say is key and I'll do these two things we have this create collection okay so this is where your manage your back end right we have data types and schema we have local State Storage so this allows you to create logic based off of states in your application and not just from the back end we have API calls as we mentioned you have project media so you can upload like logos you can upload any images that you want stored here we have custom code so you can extend stuff here when you create custom functions you can use AI to write those functions same with Cloud functions tests doesn't really matter theming is my favorite because it allows you just create robust themes and I won't spend too much time on this we we have some videos and other live streams where I talk about how to arrange this stuff correctly because we build out we have a bunch of templates and template screens and blows which I'm going to show next and all of those are based off of a similar theming model okay and I'll show I'll showcase that but for now we can explore different themes you can just see what's happening on the left here I'm going to do this other one this purple tones because I'm a big purple tones guy and there you go now our theme is updated and we can click this little green button which allows us to you you can create pages right we can create blank pages if I'm creating something from figma maybe I want to clone it in here just like in front end development you can build everything and you could make it Pixel Perfect okay as a designer this is very free um but we have a bunch of template screens I think over 160 template screens you can choose from we also have components which are just like little blocks right you have cards you have inputs you have list views you have tables you have product elements all of these things just help you build faster so we can say use my theme here we'll say card mine and now this adapts to our theme so if we had a totally different theme then it would adapt to that theme as well we had blue as our color right then this template this component template would adapt to that now those components are great my favorite feature and I was talk talking to Art before this is called flows flows are pre-built connections pre-built modules of multiple screens and logic that are hooked up into one so we have this like profile creation flow and we can just add that to our project by adding this we're going to add six pages here a component a collection of users and we're going to we're going to turn on Firebase authentication okay pretty cool so we no longer have to build that from scratch right we no longer have to say hey let's build each of these screens let's connect them let's hook up the logic and all that fun stuff we do get some little well what we need to do is we need to Define our user collection and we'll just turn that on and select users you will get some bugs there but once you do that it will turn off and then project has authentication but enter page is not specified all good again we can just come over here to our uh app details and we can say our entry screen should be that authentication one our logged in page should be homepage let's say and now we have zero bugs right very simple this flow gives us this sign up or login page right and so we're going to actually do that and fun fact I have this simulator which I will showcase I'll share my entire screen so you guys can see this but with the desktop application where we are able to do something called local run so we're able to actually test test our application on our simulators on our computer or you if you have your your iPhone connected you could test it on your iPhone there is some Dev environment set up that you have to go through it pretty much walks you through it in flutter flow I was a I'm a very Noob developer I hate setting up Dev environments when I was able to do it so I know I'm maybe super talented in design and flutter flow but as soon as I have to open up a terminal I'm like a little kid that does not know anything I'd rather just go play Legos but I was able to do it and troubleshoot it so we're g to do that we're going to and I'll share my entire screen now so you guys can see that so we should have that set up we do need to deploy our fire store rules right because we need the ability to create and edit users all that good stuff I will set these to user collection so these are rules this is how you make your application secure which is wonderful you would do this on any other application it's not just no code applications or low code applications it's in every application so that's why we say it's a visual development platform it gives you the ability to do anything you would just like in a traditional development environment you don't have to go through a traditional development environment is you go through a phase of design figma or sketch or adobe XD whatever you whatever your tool is those designs only produce Vector images right it maybe some code maybe you have some Dev mode you can copy and paste certain code Snippets but those code Snippets only turn into static code elements right static code elements what do you well when you copy something from figma it says here's the style and maybe here's some defining characteristics like font um and font size and family and then it has a drop shadow and a border radius right background color Etc well that's a defined code snippet but it's not a widget a predefined flutter widget right this is actually a flutter widget it's called a button widget so with that button widget I actually have the capabilities of submitting things of hooking up actions of having a hover State and a disabled State and all these things out of the box the button is probably the simplest example of that a text field or a drop down is a very complex one when you try to copy and paste code from figma into whatever Builder you are it's just going to copy and paste the style of a static code element it's not going to say oh this is a text field so with that text field I'm G to have a label and initial value or a hit text I'm going to be able to bring up a keyboard and and I then I have keyboard options right in flutter flow you're able to do that because everything you drag on the canvas is live flutter widget so let's see we have this now right I'm going to just I'm going to reup this because I don't know if I deployed my rules um while we built this we also have some things like top bar widgets animations that you're able to do in flutter flow man I think this is amazing so here I'll just I'll create or I'll create a new little see Andro two and clo design to okay so we're going to create an account see if this lets us in boom it did so now we are interacting with our backend we're interacting with Firebase right then and there we didn't have to build anything we utilized the flow so I can showcase building but pretty cool within 15 minutes we already have an application that you me art Andrew Bruce in the comments rubben you guys can all go and create an account if I deployed this you could update your photos let's see allow access yeah I'll just do this photo and we'll say Andrew D my role is iron founder I really love building live but I hate Spelling live yes true facts okay cool we automatically have our information here so Andrew D we're gather Gathering that we have light and dark mode we have our account settings what we don't have is the ability to navigate away from this page because we haven't set it up so let's go ahead and set up an actual application we have that flow which helped us overcome that initial process but let's go ahead and add on to that right so we can go ahead and show this page on the Navar right a nav bar is just that little element at the bottom of your mobile apps that allow you to navigate between screens it's what's what is recommended by both Apple and Android now so we have this we can show it on napar okay it's currently off in app settings so let's go to app settings over here we can say nafar na bar go ahead and turn this little guy on and then it requires at least two pages to have show on Naf bar set so perfect we have one let's go to our homepage and let's add another one okay sweet both of those go away and if we reload our little application we should get a bottom and halfar that shows up here so we're able to test this live it didn't work ah here maybe we'll save and we will reload and restart the application but it should show up but all of this stuff is connected to our Firebase back end we're able to adjust things right there it is here it is perfect we're able to test on our simulator you can also test stuff in like Chrome and then Andrew petalis we'll I'll try to answer questions after this yeah we'll go ahead and build something what homepage should we build let's say maybe we want just a traditional homepage that has a welcome message and the ability to possibly create a social post let's do that let's do a social feed and I'll do this I'll try to do this real quick I'm going to go really fast so it's not necessarily a tutorial but maybe a Showcase in mobile application building right two common elements that are awesome are the app bar which is up here and the nav bar which is down here both of them you have access to in flutter flow and again if you're just copy and pting from figma you won't get those two two things you'll get just static code so welcome we have a column here which means we can stack things vertically let's go ahead and drag a container over here and on this container we can then set some padding in the right side panel we can set the width to infinity or we can give a border radius of alternate and b or a border colors of alternate or radius 12 we can apply some box Shadow right automatically we already have this sort of cool card here and it could say we could have another column in here and in this column we can Center Line and we can cross access start so that'll make everything go to the left and we can again add some paddings I also teach design and so all of my live streams talk about both they talk about design and they talk about best practices and how to do stuff in flutter flow so when I design even something as simple as this right I want to utilize proper spacing and in flutter there's no such thing as margin it's just padding so and padding really is margin okay don't get me started if you think if you come from web development right padding's on the inside margins on the outside flutter just has padding and it's just on the outside who knows I don't know came up with those name structures but you get over it you learn if you come from figma so I'm designer like I said I come from figma when you utilize Auto layout you have the ability to set padding and spacing we also have that ability so we can add just traditional spacing here between elements very nice and I would say in accordance with best practices we also have some of those we had I I showed you colors right we also have the ability to set up text styles for now we just say we have 16 Styles so over here in our theme typography and icons we have 16 Styles you can addit them however you want the way that our like on this we could set up we get access to basically all Google fonts out of the box they're not really all Google fonts because it's a flutter package and that flutter package hasn't been updated to the latest but most flutter fonts you get access to or most Google fonts you get access to which is really nice and then yeah we could just say no code devs Workshop quiz okay I'm going to just create a little quiz here that allows you to rate me on how well I can communicated flutter flow okay so we're going to do this we're going to remove the height of this container yeah I totally switched up I said social app and then I was like you know this one sounds way funner and maybe a little more interactive so I'm gonna say take quiz sweet now in order for this to happen let Andrew know how he did explain power of flutter flow now you could I'm going to do a rating bar whenever we do this so five is going to be mandatory it can't be lower than five but we'll I just want it to be unbiased so you guys put whenever you want but you'll only be able to actually submit five in order to do that right in order to create a quiz or a social post or activity we need to create another collection so here we have users we also can update this and we can create collection and it's just going to say quiz or maybe quizzes however you want to name it and we can create schema so obviously Firebase is a nosql uh fire database system so it's relational database not table based I don't know don't ask me to explain that stuff please I'm not very good at it but anyways it's relational so instead of like nesting things underneath and just saying this table links to this table links to this table links to this table it's relational so everything can be top level and it can all relate to another one so you just basically point to users so in this quizz is one we're going to do a couple things first we're going to generate our schema with AI because it's my favorite thing in the world and it works really well typically I need a collection with a user reference name rating I don't know about name maybe uh message rating Time created and let's see what else toate have fun fact for the heck of it and we can just create that it's going to generate the schema for us and looky there we have our field names over here and we have our data types over here so this rating is a double that's great because that'll be an integer will allow us to capture oh this user ID though it's not what we need and delete that I'm going to say user reference or user ref and I'm going to reference that user's collection here so this is that relational part let's relate it back to this other collection and I'm doing it as a top level because I want to view it as an admin I don't just want the user to view their quiz results I want as an admin I want to be able to view that so go back now and let's Create a quiz page that we can link this up to all right so I'm going to press command K which brings up our Command pallet and that allows us to do a bunch of things in half but I'm going to just add a page and let's see if we have a good template that we can use oh my gosh looky there we do so we can utilize maybe this quiz and I'm going to do use my theme which is Page okay cool yeah incredible great good okay really bad nice but instead of how your day was let's go ahead and say how was Andrew's presentation awesome and we're also going we're going to remove this P it's way too much let's do that question one or two maybe yeah two we don't need this let's remove that I'm just going to add a text field in here so again this is a it's a flutter widget so it allows us to have access to flutter styling and flutter capabilities it's not just a container with a text field in it so we get things like input type right decoration type instead of underline maybe an outline uh maybe we can do a filled State here right we get access to the Border color the focus border color the arrow border color we can add a fill here which is really nice um we can also do my thing which is uh we can apply we have all these additional properties and the textual widget is definitely like the most robust bust RDG widget just but you can also do this update Pon Focus change and with that we can set this fill color from a conditional value if then else statement so just like in code if this then do this else do this so that's what we're going to set up and we're going to say if this widget has Focus okay we're going to set an accent color we're going to set the background to Accent color one which is our primary at 30% opacity and then if not we're going to say secondary background okay which is our white okay perfect can adjust this guy toet also progress bars I know Sal Caroline here did you know that if you remove the width of a progress bar it'll just automatically anyway it's it's a long story but okay progress bars are the most annoying widget I think for dynamic widget in flutter flow but only because the width had to be set implicitly but if you remove the width it'll just adapt to whatever width right boom look at there cool all right so a few other things we can do with the text field before we set up the navigation and create we're going to to set the max lines to four we can set the M lines to two so it just looks like this we can also align the label with hit text right here and we can say leave a message or Andrew Bo all right so there's that and maybe I do want maybe you guys can leave long messages so I'll do four here awesome and we're just going to do a one question quiz so instead of Na navigate to we're going to say create fir store document quizzes and then we get to set the field so right now what we're doing is we're creating a backend document okay so like we're reading Firebase and we're saying hey when a user takes this action I want to create a new record in my database so let's go ahead and do we set these fields and we don't need the fun fact but we can do the rest so user ra we automatically have access to the authenticated user reference so we can do that here user reference we're going to add that we can also do Time created we have a global property called current time so we can just grab that and then this is where the fun part begins so we have a rating oh my gosh this rating is a double and we have a check checkbox group oh suck we actually need that slider B so although this checkbox group is cool we can remove it and what we'll do is we'll do two things we're going to add a slider here there you go and we'll add some Patty around it for spacing we will set okay yeah you have zero to 10 that you can do the initial value will be five and then and we will also do a little Showcase of that number and we're going to grab everything you have on the canvas you like that that contains a widget state so things like sliders and text Fields sliders text Fields even tab bars I think have widget State I could be wrong about text bars but they have a widget state which means we can grab that so Choice chips stuff like that we can grab that widget State and we can showcase it on the screen or we can add it to our collection which we're going to do as well I'm going to say headline medium a line in the middle and we're going to set this text dynamically from this slider value so set anytime you see an orange little connection thing in letter flow that means you can set it from a variable we have widget state right here so we're just going to do slider value and we'll set it to zero to begin with okay cool yeah we can just give this a little bit padding and we can remove the width maybe no let's wrap it in a row awesome okay I wrapped in a row since the row is a layout element this container doesn't need an implicit width it will just grow with whatever is inside let's go ahead we need to finish this so we have rating set this from variable and we'll just select off the canvas this slider and then our message as well so we'll just do this perfect okay so that's not the first thing well that's not the only thing we have the create document but we also need to like navigate back right so we're just going to navigate back here we can also show a snack bar so these are very common actions that maybe as a designer you would do right I I designed many of these that say you have completed the quiz perfect okay and this is let's do info text here we'll set it for 3,000 which is 3 seconds so what it's going to do is it's going to create a document it's then going to navigate back to the homepage and it's going to show a small little snack bar that comes up and says you have completed the quiz okay let's do that we're going to have to deploy our rules again because they're out of date see fir star rules out of date everybody can create and everybody can read and then Andre I think you asked this earlier if fir was for rules for users we have specific rules for users collection so we can just do that here all right 45 minutes in we have an app that you can authenticate yourself at and oh you know what we have not we need the ability to navigate to that take quiz page let's go ahead and do that just navigate quiz page we can have different transition types so let's go ahead and do slide up and I'll make the duration of 300 all right let's see see if this works I ran into an issue by by my log so quiz page widget linear percent indicator isn't defined for the class the name okay so I bet you the error we we are running into is this quiz page this slider value so I bet you if we hid this we wouldn't have to worry about it oh yeah that's what we'll do we will this is great this is amazing so page State we'll just go ahead and set a page State this gives you the ability to access some State variable Within and just the page level so we'll say rating we'll make it a double we'll this do Z or 0 five as the initial value and we'll confirm that reason being we're going to set this initial value from that page state so sometimes with widgets they need to actually be set from a state rather than just just a regular thing so this will give us that ability and then we can also set that so as a update P page State this is just like a a little thing I'll just set value again to that 050 like a clarifier but this should fix that error I'm hoping and yeah it should we'll see okay linear percent indicator quiz page widget all right maybe not I wonder if we just read this then oh what if we format okay I'm going to try to do this from the page St instead of yeah no formatting z z okay this is all stuff you run into in development but hopefully these little hiccups will allow you and again they're just they're things that you run into they'll matter where you develop or how you developed okay nope still okay quiz page well let's see maybe we'll just remove this other guy I'm hoping that's the case or maybe that maybe that's little guy let's see linear progress oh looky there it did work hey and see oh we need to rebuild this I think because on our homepage navigate to nice okay I think it should work so let's go ahead let's see next Quiz create document oh you know what let's go ahead and restart the App instead of just hot reload oh s dude yes okay cool we got it we can also just this navigate back so we can update this like here we can set this little action to navigate back and then we can also just do that but let's go ahead and see if we can set this oh we're not updating that so do rounde value show value we need to actually set an action as well obviously on selected so update page State rating double set value to this same thing but before we do that I'm going to I'm going to just go ahead and submit one hey man I think this all works and we'll just boom you completed the quiz awesome all right cool 53 minutes in we do have something that works but I will do two things I'm G redo that and I'm going to turn on my platform or enableing web here right you have different Windows Mac OS but this allows us to deploy so we can deploy to the App Store and also deploy to the web so no code devs at flf flow. we'll reserve the subdomain we publish it and I'm the share awesome I took the quiz on the web while you're were talking it worked beautifully so look we even update now this number update which I don't think the the deployed version maybe not but pretty cool they can update it on the web so yeah pretty cool stop sharing awesome well make sure you take the quiz tayor linked it up again in the chat can't say thank you enough this was awesome I learned a ton you are an expert of course and it was really cool to see what you can build in 30 minutes or so thanks for sharing all this you have any questions can reach out to Andrew you can reach out to the at devs we'll pass it along whatever works but yeah thank you so much this was super cool glad to finally have a live stream webinar here on butterflow so hopefully this brings a lot of value I'm sure yeah I hope it so thanks for hosting I really appreciate it yeah thanks for all the great questions everyone all right we'll see yall see yeah thank you [Music]

Channel: NoCodeDevs

Views: 2,535

Keywords: flutterflow tutorial, low code, no code, flutterflow tutorial 2024, flutterflow tutorial ai, flutterflow tutorial web app, no code website builder, flutterflow tutorial 2023, flutterflow tutorial for beginners 2023, flutterflow tutorial firebase, flutterflow tutorial mobile app, flutterflow tutorial for beginners, flutterflow tutorial app, quiz app, Build a Quiz App in FlutterFlow, low code no code platforms, low code platform, low code no code

Id: jfrgbEA2bkw

Length: 42min 52sec (2572 seconds)

Published: Fri Apr 26 2024