Build Apps with FlutterFlow & Supabase

joining us for building apps with flutterflow and Super Bass really excited to start this video start this live stream we'll give it about one more minute and we'll jump into introductions in building foreign hey everyone uh thanks for joining us we're really excited to be jumping in to a live stream tonight I'll let Pooja and Tyler introduce themselves but yeah we're really here to Showcase how to build a flutter application right utilizing flutter flow and Super Bass we'll dive into both tools tonight we'll be talking about how to actually set up a flutter Flow app how to create your Super Bass back-end storage and other things right and hooking that all up so you can walk away with a working flutter app if you follow along or decide to to build that flutter app after this video this is in collaboration with Super Bass right flutter flow and Super Bass and really to highlight the flutter hackathon which Tyler will talk about in a little bit any questions please send them in the chat we will be having a q a at the end but also we may pause in the middle of building to answer any questions that might come up to so with that said I'll quickly introduce myself and then hand it over to Puja and Tyler my name is will I'm on the growth team here at flutterflow I'm really excited to be you know having this live stream and showcasing just yet another resource for both super bass and flutter flow users to build extremely powerful mobile and web applications yeah uh I uh next hi everyone this is my first time on the live stream so I'm very excited so I'm Puja vomik I am on the developer relations team and father flow and I am here in the Philadelphia office in California streaming live talking to Tyler and will vasoolbase the flutter hackathon I'm so excited to meet all of you with like very exciting because it's my first time so yeah um Tyler do you want to introduce yourself soon yeah thanks fuja um hey everyone I'm Tyler from Super Bass and I'm on the Gabriel team um of Super Bass I mainly focus on the flutter side of things uh so I also maintain the flutter SDK for Super Bass as well and today I'm really excited and honored to be here with the flutter flow team talking about how Super Bass and flutter flow can make your uh productivity uh increase a lot um so yeah let's let's get started yeah so Tyler do you want to jump into actually what this this live stream is for right that flutter hackathon um that suitable base is hosting you can mention some of the sponsors and and other things and for people watching I will pop up a banner feel free to scan that QR code for more information as well yep thanks will so yeah the purpose of this um live stream is to uh let you know that there is a flutter hackathon going on right now so this flutter hackathon uh is sponsored by Super Bass flutterflow and invertise and there are five categories that you can win prizes of and one of them is a best flutter flow project you'll win awesome limited edition swags as well as some um Pro credits for flutter for a project uh so uh for sure to uh you know remember to build something um it can be anything uh it's just the only requirement is that you use flutter and Super Bass to some extent uh so be sure to build something awesome using fluttering Super Bass and don't forget to submit your project this hackathon is going on until end of end of the day Sunday Pacific time so if you're in the US I guess that's that's close to being Sunday but if you're anywhere from anywhere else in the world that's most likely a Monday morning or sometime in Monday so you still have one two three four you know three or four days until the deadline of the hackathon so there's plenty of time especially if you use two tools like flutter flow and Super Bass you could probably whip out that whip up an app and you know 15 minutes or so so uh yeah don't forget to create an awesome flutter app and submit it yeah yeah that's awesome we're really excited uh from the flutter flow team really excited to be a part of this um you know if you haven't used flutterflow before right it's an extremely powerful tool and I'll I'll let Puja describe flutterflow a little bit more um as well but right like flutter flow is a very powerful tool for building flutter apps right having that ability to export your code push it to GitHub use the flutterflow CLI and and add custom code really it's a very powerful visual Builder um Puja do you want to talk about flutter flow a little bit and then Tyler will pass it back to you to talk about Super Bass as well for anyone that's new to those tools awesome which it looks like you might be muted oh well there we go nice yeah there you go all right so talking about subtle flow on this Alpha Channel obviously a lot of you or if some of you must be aware of it but if you're new to flutter flow uh just to let you know it is a low code building app building platform where you could like you know drag and drop elements and uh build backend on the platform itself where this is not just focused on like just building UI we're actually building complex data in a local platform right and we were just like talking to like Tyler and bill that I think this um you know this live stream I just get over soon because supervised and flutter flow makes building applications the front-end and back-end so much faster that yeah four days is a great amount of time for you to actually build something really complex and actually build something for the public and actually publish it right from the platform again right so um we uh we do have like the sort of flow price category as well on this uh you know the super based water hackathon so there's some really great uh amazing uh you know swags that you can win and of course if you love letter flow after this and you're building because of the hackathon you and you win so you will definitely get like a three-month Pro Plan free uh which lets you you know do most of whatever whatever we offer right so I'm really excited to see more users coming in uh in this week because of this hackathon and actually realizing how easy it is to build applications uh you know with letter flow so yeah Tyler do you want to talk about Super Bass as well yeah for sure thanks uh well would you be able to pull up my screen I think it's easier to actually take a look at the supervised website so for those who don't know what Super Bass is I think this sentence right here summarizes it um pretty well so super bass is a open source Firebase alternative and five is five is being the back end that powers flutter flow as well um everybody loves Firebase including me I love Firebase I've been using Firebase for the past five six years for like every single project that I've worked on and Firebase is awesome too because it boosts the productivity as a developer you can spin up the back end just like that with a database authentication Source really everything that you need to get started with at the limit and um at Super Bass uh we love Firebase but um we also missed the SQL database side of things and so we thought you know if there's a Firebase with a SQL back end wouldn't that be awesome and that's why uh super super boost was born uh basically Super Bass is a Firebase with a postgres database so SQL database is the primary database so we offer uh pretty similar features Firebase so we have a database authentication stores and then its functions for whenever you want to build back-end code and then we also support real-time uh features it's super really so I really offer the full you know capabilities of whatever is required to build an app and I also want to highlight one thing here uh Edge functions our partner invertise who's also the sponsor of this hackathon created this tool called Dart Edge which allows dark code to be run on the edge um so back-end meaning um so that means that we can build you know flutter apps front end code using Dart of course and then we also can build back-end code using dots so we have the uh full stack um you know we can build a full stack applications both uh front end and back and using our favorite program language dot so be sure to check that out as well and there is a best Dart Edge uh category for for this hackathon as well so that's also another category that you could shoot for uh in order to win some uh price yeah excited to get uh you know excited to go deeper into what supervis can do through uh the stream today awesome yeah so uh if you're just joining us right we're going to be building a flutter flow or a flutter app utilizing flutter flow and Super Bass um so really excited you know and again this is for the flutter hackathon hosted by Super Bass again I'll pull that up one more time so everyone can see that before we actually jump right into the building right so feel free to scan that QR code check out the um hackathon details there and we're really looking forward to seeing what you put together um again this is a flutter hackathon not just for flutter flow so flutter um you know for those flutter devs out there anyone building an application right so so make sure to check that out awesome so with that said we can yeah yeah maybe we can before we jump in clarify some of the questions that we have about the hackathon specifically I see that um under asks uh yeah uh for the hackathon can I use another platform in addition to Florida flow in Super Bass uh and the answer is yes the only requirement is that you use flutter and Super Bass to some extent so you're free to use whatever net in addition to that on top of um yeah those Tech Stacks so yes yeah for sure and then I think Gene asked yeah are we allowed to submit personal projects or only hackathon specific project so you are allowed to submit um personal projects uh the only requirement is that the project uh was created after the hackathon started which is was like uh almost a week ago at this point so you cannot really bring up on you know old you know two-year-old project or something that's that you've been working on for entire you know career or something it just has to be built within the duration of the hackathon but you're for sure welcome to submit a personal project yeah and these are great questions keep keep sending them in the chat again we'll have a q a at the end uh as well for any any questions you've saved but yes we'll we'll try to stop as well and answer any of those so yeah Tyler take it away yeah awesome awesome so yeah today again we are building a application using floating flow in Super Bass and I think how we can get started with is we can get started with uh setting up the Super Bass back-end so here we've already kind of uh set up a created a super based project that's an empty project but if you don't have a project yet you can go to superus.com and your supervised.com and click this start your prospect button right there and uh spinning up a project is a matter of a minute or two so uh as I said uh earlier Super Bass uses SQL database postgres databases it's a primary database and we can view the database from this table editor and I think we can get started with um adding a table um adding some tables that we might use for this application so today puza what application are we building right again yeah so we are building uh notes storing application kind of so we will have a login uh sign up and sign in kind of a thing and then users can add their notes so you know how the day was or diaries stuff like that so basically we will be storing notes listing them and creating new ones viewing the last you know the notes that we've already stored so yeah that's what you're building today awesome awesome so it sounds like we can create a notes table then so let me start up by uh giving it a name so I think we can call it notes table description I guess we can leave the blank now enable row level security this is a security feature um uh that secures your database provided by Super Bass actually it's provided by postgres database and we just make it easy to access but um I think we can come back to this later and have it disabled for now we'll come back to this and properly add proper security but for now we just want to get started um so let's just uh disable that and then we look at the other columns that we can add to this table so we have a primary key ID column I think we can leave the created that as is and then we can add a title so our notes can have a title and this can be type text and then we can also have a no so the actual content part of the notes this can also be text and let's see what else can we have um we can add an image as well with the notes Right image URL so this can also be type text yeah and I think another thing we might need is the user ID so uh you know whenever a user creates a new note will know that you know if you created the note and this is going to be type uuid so Super Bass by default uh creates a unique uh unique user ID of type uuid whenever a new user signs up uh to their super based authentication server so we can reference that uuid right here and actually we can add a foreign key constraint uh so we can reference the author users table and reference the ID column so what I'm doing right here is I'm adding I'm referencing I'm telling Super Bass that hey this user ID column actually is referencing the auth.user.id column which is the the table that super bass provides to you to handle Authentication so it's just all it's telling you is that you know this user ID belongs to a certain supervised user within the system nice now yeah I think that'll be it uh and another trick that we can use is um here in the default value column we can give this user ID column a auth.uid function what this does is you know by default this column will will be automatically populated with the what whoever is trying to insert this new uh row so we'll take a look at uh you know how this plays out later uh but this is a handy trick whenever you create a supervised database containing the user ID column so I think we can save this one yeah and this is going to create a new table within Super Bass now while that's spinning up cruise guys there any other tables that we need might need for this um app I think we will need the users table right right nice let's also create that okay so there you go we have a notes table uh obviously it doesn't have any rows yet but we'll be populating it with uh more rows later let's create a user stable so we have a users table just like the notes table we're going to disable the row level security we'll we're going to be taking care of that later on and then this users table I think we can keep it simple and maybe just have the name would that be okay yeah name an email I think is fine I guess yeah I mean we're just trying to show that that's it yep let's do that name and email so both text field um and then I guess no default values whatsoever I think it looks good let's hit save and create the tables see all right wow it's creating the tables um I think after this we can go on to the Authentication settings okay so yeah as you can see a new users table is created you can go back and forth between node stable and use this table um let's also set up authentication so we can go to the authentication tab of Super Bass and this is where all the authenticated users will be shown obviously we don't have any uses yet but we can set up uh providers and you can see that by default email login is already uh enabled and what I've uh done here is I've turned off confirmation email so by default Super Bass will uh send a confirmation email to whoever signs up to Super Bass but um today we just want to get something up and running so um I kind of got rid of that um yeah you know step in the step in between and disable confirmation email I think that looks good authentication setting looks fantastic fantastic I think we will take care of security later but let's take a look at stores and so for today's app I think we'll be uploading some image files uh to storage as well and to get started with stories we need to create a bucket so this bucket I think we can also call this notes bucket uh right yeah simple yeah we nice and then we can make it uh public and I don't think we need any additional configuration we can just hit save and that will create a new bucket now creating new bucket isn't um enough to get started with stories we also need to add some policies so that random users cannot uh offer a bunch of you know random data to the bucket so we can get started with policies by hitting policies and then we can hit the new policy button on the notes table notes bucket and then we can get started quickly let's take a look at what kind of templates that we have and give access to the file okay so as you can see we have some templates for you to get started with uh storage row level security if you're not so familiar with rollover security or SQL we give you some you know out of the box solutions for typical use cases um but today I think we want to create something from scratch so we're gonna go full customization and we want to give a policy name so let's see a user can insert a new item or new yeah item should be fine and this is going to be an insert policy uh that will allow users to upload uh items to buckets and one thing I want to do is in a bucket typically um typically what I do is we have different folders within a bucket right and what I'd like to do is I like to have the root folder be the user ID of the user so in that case what we can do here is that using row level security we can limit uh you can make sure that the first folder the root folder within the bucket uh is the username or user ID of the user so we can add something like bucket ID equals no so this is all done in SQL and it's pretty intuitive and simple and we can do something like I'm just to I'm just going to copy and paste from my here but what this is doing is that so it's comparing the first item within the bucket and comparing that with the auth.user ID again after user ID is a super based provided function that retrieves whoever is trying to insert this new data so by adding a policy like this we can ensure that the first root folder of the bucket is always the user ID we'll be taking a look at how that plays out later but I think we can for now review the policy everything looks good save the policy except I probably have an extra parentheses somewhere let's see oh boy what I'm just going to copy and paste the entire thing I do want to like add one thing here um sometimes like basically these SQL commands I also like get you know have problems with I realize that super bass also has a super bass AI thing where you could just write a command and it will tell you the entire the RS RLS policy to you so if people have problems usually you can use the AI as well like that that totally is pretty helpful yeah thanks for pointing out that yeah supervis has a tool where you know you can ask Super Bass AI whatever you want to ask about Super Bass so you know if you're unsure about role of a security right there just like I was uh you can ask Super Bass Ai and it'll basically tell you uh in you know playing uh English or we recently uh added support for other languages as well so you know whatever language you prefer to use we we got you covered but yeah we created a policy for the notes stable I think we are ready to get started with uh stories so we've yeah we done the database settings authentication settings storage settings I think we are ready to jump into some flutter flow um stuff yep yep before we jump into that some quick uh super based questions at least in regards to setting up the tables um for example one quick question uh from Andrew I'll pull that up so so you can read that so why do you have a users table if you're going to use auth as well wouldn't it be okay to only use the auth table and have a foreign key connected to the notes table yeah yeah uh for sure for sure and this depends on uh the full nature of the uh app itself but I think today's app we're gonna have like a small like profile section so a user's table within the uh aside from the users table provided by Super Bass uh is Handy whenever you want to store additional profile related information about the user like for example we're sewing the username um within the table or email or you know uh you know profile description handle whatever yeah there's no items you might have uh you typically want to create a separate table for that and have a following key constraint uh uh go to the um the author uses table and I I noticed that uh I made a mistake here uh with the users table so yeah the this ID column should be a foreign key to the auth I users table so you know what I'm going to delete this table right now and redo the redo the thing so let's see let's see let's quickly do that but yeah thanks for awesome question awesome okay users disable row level security ID will be Hue ID default value will be auth.uid and it'll be a point we'll add a phone key constraint so public no not public ah Dot very serious DD column anything that's good you've created ID we can add a name type text will have a oops email also type text okay nice right I think all fixed awesome so yeah Puja we'll turn it over to you I think we're done officially for now with the Super Bass back-end setup just review if you're just joining us so far again we're building a flutter app live for the Super Bass uh flutter hackathon right um so you know if you're just joining us you can find the the flutter hackathon information here by scanning the QR code again these are for flutter applications utilizing Super Bass right and one of the ways you do that is with flutter flow so we just set up the Super Bass back end and now we're going to jump into actually building a flutter app with flutterflow so Puja I'll pull up your screen and we will go from there all right so so basically just to give everyone an idea we are going to be trying to like you know create the login and sign up page and have the notes list page so you know we have a list of notes and we also like create a new node so we have that setup as well um just as disclaimer I know the live streams are mostly like you know design heavy and all that the great design I'm not so good with it so I'm gonna mostly focus on the connection of the base part and if the design is not good just forgive me for it so yeah all right so we have this uh already a starter project where we have some pages like we don't have a login page and I'm sure like if you know you're you're building for the hackathon you want to build things quickly right so I'm gonna like create a new page but I will actually take a template from uh you know the template Pages itself maybe this one looks fine I'll just use my own theme you know so call this probably uh login home page or something whatever so here we have it in our um you know uh theme okay so it's like a blue theme we're not going to do any social login right now so I'm gonna remove this all right so we do have a sign up and sign in and there is some theme issue I guess so I'm going to just make sure that we just change it so let's see is this the selected color okay no sorry so I am going to go to the top bar again and see the unselected color right so let's just make this a sign and sign up and all and uh yeah we have a login page ready for you already so you can change the UI required change the logo of that just um you know figure out what you want uh you want to change the button color to something different it's it's like you know you can go ahead and build your UI but what I'm going to focus on more is actually the authentication part first so before we even get into the connecting to Super Bass stuff uh we have to let flutterflow know that what authentication we are going to be using so we do on the settings page if you see in the last one here we do have authentication here and you have to enable it what what it does is basically first ask you that do you want to work with five ways of supervised so that's the two native Integrations that we have today and we are gonna work with Super Bass of course so we have supervised here and um it it's gonna ask me okay what's the entry page so basically the login page before you log in is the entry page and once you have logged uh in you will have another home or landing page right so we do have the login home page and when we are logged in maybe we could do the list page right all right so now it says the city has not been set up yet yeah I know so we have super bass integration here and let's enable this all right so here is where you will need your Super Bass project you know setup and everything and you will need your API URL and um Allen key so I'm just going to set that up as well uh I'm just gonna hide your your desktop as you fill in those credentials of course we'll be removing that project go um but just as a precaution as you fill that out right awesome I mean anyway the and like flutter flow is will if you have you only open it up like if you're showing it to people it will keep it nice you know okay yeah awesome I wanted to make sure you didn't have to switch tabs or anything there perfect no no I mean but that's it right so sorry the API key is open but that's it but then everything else is actually I think he's actually meant to be a public key as well so what we've copied over here is the Super Bass URL on supervised Anon key and typically these two uh sets of keys is um what you need to get started with Super Bass uh no matter what you're using you know web flutter python whatever it is and uh serious URL and subers and key are just uh some public keys that are meant to be more of a project reference type of thing so you know to let Super Bass know that which project is uh linked with this particular front-end code is is all there's to it nice nice cool so um like like basically when for the other people where did I even get this key from so I can just you know show that once as well so you know you have the home page and that's where you will find the project URL and everything so yeah and once you are done with that you just get the schema and this is where all the schema that Tyler had built the users the nodes it's exactly image URL user ID it's all like fetched from your supervised project so pretty cool uh so we do have the schema ready for our father flow project and I think we can go ahead and start authenticating our users so the first thing would be like you have the sign up so kind of creating the user uh you know the user Row in the users table so here since everything is done this is an email ID this is a password I will add name and confirm password as well so here we I'm gonna just duplicate this and here I'm gonna make sure that this is name so we have uh for a name and then we have the email address then we have password and now I'm going to duplicate that for confirm password suppose so here we have confirm password all right so we have now four uh text Fields so one here instead of enter your email we will be doing name and enter your name all right so this if you see on the right hand side this is where you you know edit your widgets you know this is the properties of your widgets that uh you know the text style the values and stuff like that on the left hand side if you see this is the tree structure of your entire screen so if you see we have the container here we have the logo on here so the entire widget tree is actually on the left side and also the pages here if you see on the top that's the pages so um once you click on a certain suppose the column the properties will open on the right so that way I am you know changing stuff so I'm going I'm clicking on the name and I've changed the you know the hint text email is fine password is fine for the confirm password I'm gonna change the hint text again so the label is confirmed password and again the index is confirmed password not being creative on you so uh yeah now comes the button right so for the button uh if you see here this is where the properties of the button are button is but if you see the second one which is where we actually add the actions so here uh if you see that when you actually imported this template the action was also created for you by default and since it realized that this was super based authentication it automatically created the supervised uh uh action for you authentication action for you I'm still going to open it and see everything is fine so in case you're doing it from scratch I'm just gonna make you make sure that you know so if you search for auth you see Super Bass authentication we have login create account log out reset password and this would be creative car so we have email so that's okay so this is the auth providers which is like okay are we gonna do an email password uh author writer so now we have the email field which is not name it is the email address create okay we are creating it with just the email and password and then we have the password create and a confirm password field is this okay so now definitely read this part which says that just creating this action of auth does not create a user Row in the Super Bass table uh users table so you will have to create specifically a user's uh as as we mentioned earlier that you know that we might be saving more information right the profile picture or some you know specific user information so we have to add that Row in the table for doing that we added another action and if I just search for super nice again if you see there's something called an insert row okay so here it is asking you which table do you want to add this row to which is gonna be users and we can add the field so the fields that we currently have is the ID the created art the name and the email so talking about suppose like let's talk about name first which is the easiest of course so we have the value which is going to be from the text field the name right okay so now again from the email we have from the text fields we have the email address create right now comes the created art okay so this would be current time I'm guessing right so here we are going to find this Global properties you know and there there is something called a current time so now we can set the current time when we create this row talking about the ID how are you going to find the ID well once you get authenticated there is flutter flow will create an authenticated user uh object for you and from there you can get the user ID that was created when that authentication was performed so that way now we have the user ID and time and name and even and that's it I I'm guessing this is going to work but I'm gonna first do the sign in as well and then we are going to test it with the super based database so again simple thing open it email email address password yeah I think everything is perfectly fine so [Music] I think we can run it uh wait let me have some errors which is because they need Max lines so I'm gonna add the max lines here so I love that flutter flow just tells you you know whenever there's air that's it's it's so intuitive helpful uh you know debug the debug the apps yeah it saves a lot of time finding the errors ourselves yeah so that it actually also takes you to that place where that error must have offered so that's pretty cool yeah it's pretty magical yeah so we're gonna wait a minute uh but meanwhile let's just see if we have any questions that we can answer maybe yeah yeah we have a we have a ton well would you wanna this is an interesting one I noticed um in the action and maybe this is something that's in the works for flutter flow or a specific maybe custom action or function you need to write but this is a great question it's a great question I can probably take this one so currently supervis only supports deleting user from the back end there's no way to delete a user from the front end so you will need to build some kind of custom backing code uh to enable this um you know specifically you you can use Subarus Edge functions and you can combine it with a DOT is uh to delete a user but yeah you will need some kind of a backing code for this nice nice great question or maybe [Music] should not me actually let me just check if I did the opposite in the Authentication it's login home page and nodeless page so it should not be um I guess this is what live coding is right I will actually I know it could be something related to the cash probably so I'm gonna add a log out here you know so the power of a hot reload right the test mode you can just quickly refresh the test mode and get the login button to work yeah nice let's hope it works fingers crossed awesome uh this is a good question while that's loading as well as flutter flow using material too is a good question um I think we have moved the material 3 yet so yeah yeah and I know our Android head of design is working on um building some different material three components and different things like that so you'll be able to use those in your in your project nice sweet I think we have yeah I I do have a doubt that this loading thing is not going to be good for us but uh I'll just go ahead and thank you yeah let's just go with the flow so I'm going to be confirming the password of the same thing create a new account so all right yeah Tyler can you see uh if it's working let's see so I've opened the authentication page if you could bring up my screen and as you can see there is a flutter flow user created the table editor use this table hopefully there is a well yeah there it is awesome one step closer to submitting your flutter app for the uh awesome all right so at this point we have done with the authentication if you also like log out you're gonna log in again instead of sign up so we're not gonna do that demonstration here uh but we I showed you how we can do it in photo flow now the question is that we do have a notes table so we are going to be storing some notes so as you see this is going to be an empty stuff but we're going to have a list of uh notes here so let's just build the UI so we can show some notes yeah so we have all nodes here I'm gonna just create like a list View um and inside that we are going to create one items UI and then that will be populated each time for each item kind of so here I think we can have one container and I really like the white color at all so I'm just gonna maybe do the secondary color which again is not the best but uh yeah I think that works so yeah yeah so we are probably going to add I'm just going to make sure that you know the width is taking the entire screen space but the height we are gonna decide by the you know the children's height so at this point we're gonna add a text which is going to be the title I think because I think we can just show the titles in each for the note list and once you open it you can see the entire thing so you have the title here um we do have the created ad um field right yes so we can add the date time then so in so let me just wrap this with a column and we can add the another text so this will probably be the you know the date time so I'm gonna just increase this and just make it 20 suppose and make sure that everything is on the left side um add a little bit of cutting okay and so we're gonna knock both of them um so here I see if I can add more padding to it yeah all right I'm just also gonna do rounded borders all right so it looks better right yeah it looks beautiful nice nice so see how fast that was like somebody who cannot do design try this okay all right in Puja for sake of time do you want to start with the title on the message and then if we have time to add the image or the Earth and things like that we can add that as well just to showcase yeah absolutely I'm gonna first show The create page first because we can we are not going to have any notes here to Showcase anything so the create page is currently going to the create so the create button is kind of going to navigating to the create node page right so here um let's see what the create note thing is so here we have the title and we have the node and we have the create button now that's where the Super Bass blue creation is going to be so again we're gonna do insert row so we're gonna do an insert Row in Super Bass and again the table is going to be in this case notes we see the fields that would be yeah that's we are not going to do the image URL for now um Tyler I think the user ID is going to be populated by itself I'm guessing yeah that's correct yep and create it as well as well oh okay cool we might remove is then title is gonna be coming from the widget state which is title and node is gonna come from the widget State again which is write a note all right I think everything else is going to be populated by superbeets itself so let's see um just to make sure that once we've run it we have everything in the notes let's list page I'm going to show how the nodes are going to be you know fetched from Super Bass and shown so we do have the list view here and we have something called The backend query which is basically you know it's saying that do you want to query the you know Firebase API super B's algolia stuff like that so in this case we're gonna query Super Bass and again it's going to ask me the table which is notes and I want all the list of rows right so in this case I don't have a limit but you can add one you can add filters you can order them as well uh maybe order them by time or anything so then we confirm it and it says that now all your children is going to be populated based on this uh result which is what I want so confirming and if you see it creates something of that sort and yeah now we have to just add the text which is suppose the notes row uh it will be having the title and then we have the text which is going through the date time so now this is going to be very interesting so we have created that as a field but that won't be readable right so what flutter flow can do for you is that it can actually format it for you which is so cool so what format do you want Tyler wow this is so nice this is so nice uh I'm based in Japan by the way and we do the year month day uh so yeah oh where is that yeah come first uh oh I don't think I don't see that here but oh yeah okay we can go with the American version then yeah month date year yeah yeah for now let's do that but that's something that we are gonna fix for sure all right so this is a default variable name I think it's Gonna Write Time confirm and that's it we can just add one last thing before we run this which is that make sure that these go to uh oh actually we can no sorry I I remember basically on create we need to make sure that we go back to all notes right so once we do create node once the creation has happened uh we want to make sure that we go back to navigate to um notes this page you know so I think that should be good and we can run this yeah you just have the same test mode that's awesome right nice awesome okay so we have a create okay this is a supervised live stream out uh this is going amazing yeah okay who are creates oh my God yay we got something yes it's working [Music] um nice nice and I can see that in our super based dashboard that we have a data into as well so you can show that I mean is this coming from the dash this is coming from the database itself this list so yeah I know it's working yeah awesome nice nice do we have like okay do you want to quickly show uh go back to flutterflow you want to quickly show how all this is flutter code right just for anybody watching who isn't familiar with flutterflow right all of this is being generated as flutter code so you know with the simple drag and drop changes we made um you can see all of the the flutter code right and you'd be able to export your entire project so at the end of the day right this is a flutter flutter application right which is awesome which is what do you need yeah nice yeah look at that that's like 700 lines of code just like that yeah cool well it's amazing nice job pujo Tyler we got a working uh you know flutter app built within really probably 40 minutes by the time we got started which is awesome um so yeah again this is for the flutter hackathon I'll showcase that QR code one more time at the end but we can jump into some questions with the last kind of four to five minutes we have left um which is which is really exciting so I'll scroll up to the top I know there were a couple questions um let's see let's see here trying to go oh here's a interesting question this is more for like a how-to question uh how would I make an access code like a user purchases a code puts in the code superbay base oughts it uh no one else will be able to read that code the one of you want to answer that otherwise I don't mind um taking that question as well yeah if you want to give it a thought well do you want to take it yeah from my understanding right um for example a user purchase code right you'd probably have to store that within Super Bass somewhere uh and then essentially in a flutter app right I'll speak generically here in a flutter app um whenever you want to query that purchase code to ensure it exists in the database you could do that maybe with like a continue button and only show that button if the document is found within the database that could be one example um that I could think of granted I don't know if you'd be able to do any like auth around that specifically but yeah I'll hand it over to Tyler and Puja yeah I feel like there there could be uh there could be multiple routes that can that can be done I think one way to do this is um you could have two tables maybe one for purchase codes and then one for um or I guess I I guess you could have a purchase go table and then you could have a user ID column that's nullable and then once someone claims that purchase code you can insert that user's user ID in that row and then that purchase code is no longer you know available publicly it's it's only dedicated dedicated to that person so that's that's one way you could probably do it that's awesome another question any plans or estimated time frame to have super bass real-time support I'm assuming this is a flutter flow based question right um to be honest with you I don't know if this is this might potentially be in the backlog but I don't have a specific time frame or timeline um but something we are launching soon from the flutter Flow side is a new community Forum where you'll be able to vote on new features new Integrations things like that so this is definitely something when that launches we'd recommend you you put on there so everyone can vote on it um and we'll really be able to see you know what you're you're looking for in terms of features nice yep that's dance fun guys yes uh Fuji you want to take this one uh when do you plan to integrate super B's Google authentication with butterflow again I think that's a question on like you know the engineering team kind of like with their uh bandwidth and of course we are gonna do that uh uh in the future for sure like we just launched the email and password like few weeks back so you know that this is on the line for sure but this is probably a timeline question at this point so we don't have that answer right now uh but definitely I'm pretty sure it should be on the line yeah awesome here's another question maybe for more like super bass um infrastructure and how you'd set up your your database if I have uh if I populate a drop down from supervised how would I get the ID ah the selected item if I populate a drop down from Super Bass and this is aware of a butterfly question yeah maybe it could maybe be a good answer and flutter too Puja if you want to tackle both yeah I think it's basically you know the concept of drop downs it's basically taking the list from some place so it either could be like if you're doing a flutter application you could have like a static list of data or if you're fetching from a database then you basically fetch from Super Pace first store it to in a variable and then the drop down is populated with that variable kind of a thing um I I do not have experience of drop down in flutter flow right now but pretty sure it also takes data from some place so it could be from the super based it object it could be your own data types it could be um you know any in any place where you basically store a list right so it's not really super based related question but yeah that that's the source probably but it could be that maybe in our job down it's maybe not possible or something I don't know I do not have experience on the drop down part yeah now you can assign drop down variables specific values so you might be able to to add that document um or in this case yeah but I think we're asking for a little list of data so if it's like specific then it might be if they can add an entire list like we do for column row Or List views I think that's what they want so got it nice that was a great question um I'm sure there might be some information on the Florida flow Community Forum as well um you might be able to ask that or or find some answers there um yeah great questions uh we really appreciate it you know you can definitely tag us on Twitter with any more questions you can find Puja Tyler and I um as well as of course super Basin flutter flow so you know please keep those questions coming again this is the flutter hackathon Tyler you know you want to end us off here with a another brief overview of the flutter hackathon and I'll pull up that graphic so anyone here can can scan and get more information yeah for sure yeah so there is a flutter hackathon going on right now sponsored by flutter flow invitation Super Bass and there's five different categories where you can win limited edition uh swags as well as some flood of flow Pro membership if you win the Florida flow this Florida flow project category but basically uh the hackathon is going on until the end of the day Sunday Pacific time we there should be more than three uh days until the deadline so there's plenty of time if you especially use tools like flutter flow and Super Bass now the only requirement is that you build something using flutter and uh Super Bass and um that that's it all you have to do is build beautiful flutter apps using Super Bass and you can win limited edition swags and possibly some uh flutter floor credits awesome oh yeah Puja Tyler um you know thanks again this is fantastic glad we got a successful flutter App working by the end of a an hour live stream and again you can build this yourself um you know a full flutter app that you could export add whatever code you want to um so yeah any any last comments you want to add regarding flutter flow or super bass or the hackathon as well yeah uh it was it was unfortunate that we couldn't get to the storage spot but uh you know uh it's it's really really simple just a few clicks and you'll be able to have your user upload images um to your supervisory storage from your flutter Flow app so definitely check out the docs and uh yeah we will be waiting for your hackathon submissions yeah totally very excited to see the flutter flow based uh projects that are gonna come with super B so uh I think it's 21st to me right yeah so that's the difference just to let you know that I'm also going to be one of the judges for the sort of flow price categories so yeah I'm totally looking forward to like some really amazing uh you know projects to come so um uh go ahead and submit because we are looking forward to it awesome yeah thank you again uh both of you and again feel free to ask any questions on social media we'll be there to answer uh and yeah be sure to check out the flutter hackathon we're super excited to see what you put together and thanks again for joining the stream tonight

Channel: FlutterFlow

Views: 13,514

Keywords:

Id: Sj9t--WNimE

Length: 64min 28sec (3868 seconds)

Published: Fri May 19 2023