Flutterflow Beginners tutorial 2024 ( for non-technical founders)

hello welcome to another tutorial so this is a flood of FL tutorial for non-technical Founders so if you are a non-technical Founder you've never ever designed anything in your life before but you have that idea in in your head and you say okay I'm going to build an application or I'm going to build my idea I'm going to bring you to life then this tutorial is for you this tutorial is going to be really basic know it's going to be really basic I'm going to explain everything you need to know about building with flut flow uh first we're going to work through bringing the thought your head to a mirror board and secondly we're going I'm going to help you find design Inspirations I'm going to help you think your database you know there's this thing called database this is where all the data in your application is going to leave I'm going to show you how that how that works and then I'm going to show you how to fast trct your design using template widgets and flows in FL flow and we're going to talk about collecting payments and then I'm going to show you how to connect to a standard tools because um if you're first time found out there's a very chance that you wouldn't want to do things yourself lots of things yourself you would want to connect to all standard tools right so I'm going to show you how to do that and I'm going to show you how to prepare for your launch right and then I'll show you how to launch so don't worry don't worry if you've never done anything in flo oflow before it's fine I'm going to introduce it to the entire platform again and again and again and we're just going to you know keep sailing all the way that's what we're going to do so let's get get started I'm going to tell you what flut oflow is briefly why use flut of flow and what flut oflow can do so flut flow itself is a no code two or is a low low Cod to because flut flow is not entirely a no code to because you can really um build on top of flutter flow using Cod right if you're a developer you can use flutter flow but since this is for n technical founder I'm going to make this you know super basic FL flow is a tool that would enable you to build mobile application or web applications or applications for your desktop it might be you know Mac OS or Windows desktop you can even use it to build plugins right you can use it to build um Google Google Chrome plugins or Microsoft Edge plugins depending on what you want to use it for and you can do so using this Dr drag and drop interface right so this is a drag and drop interface you can you see the where this particular video all the you know the video right here it's moving that's the way you're going to be dragging and dropping stuff on the screen so mostly you're just going to be just think of it like you have a convas and you're going to be able to draw whatever you want all right you'll be able to color whatever you want you be able to draw whatever you want with that particular canas that's what flood of flow is right and um you can build virtually like it says here you can connect so the way flut of flow does things is that you build bu a container or you build a skeleton and then you add an action it's like um building a cal or like so building a statue and then you add an action like move to that particular statue uh it's like um you know building a yeah just building a statue and then you're able to add actions to that particular statue and the stat statue to raise the hand move turn around you know go sideways turn left turn right that's basically the way uh FL of works and also you can build responsively so that means you can build once you can build once and it will be very responsive for mobile for tablet for desktop and for most of the devices that you're going to be using right and a good thing about flutter flow is that as you begin to learn flutter flow you'll be able to build very complex uh um very very complex applications and also you'll be able to build very very simple applications say for example you want to build the usual Todo application you can do so withlow within a few hours you want to build Todo applications you want to build Inventory management applications you want to build um work management application you can do all of those stuff within hours right so that's basically what flut of flow does and also don't forget to check out the pricing so you don't get shocked after building your mobile application further flow is one of those tool that is very cost effective because you can you pay only for the Builder you don't really pay for the data base you can decide on the database that you're going to use but for the Builder you would have to pay uh I'm in Nigeria right now and I'm I'm paying $28 for the for the2 but if you are somewhere in the west if you're somewhere in the west you're going to be paying 70 usd $70 if you're somewhere in the west and also you can start this tutorial with a free plan right with a free plan you can begin and then you can keep you can keep optimizing you can keep optimizing but if you're going to be launching on the Play Store right if you're going to be launching on the Play store then you will have to go to the standard plan because with the standard plan you'll be able to download your APK file and then that APK file you'll be able to put it on the Play Store and watch your application and if not the play store you'll be able to put it on your own device right you'll be able to put it on your own device and just watch it uh you can use it especially if you downloading if you're especially if you're creating an internal tool yeah you can really stick with this right you can stick with this and if you're download if you're you can stick with this and if you're building something for the web right if you're building something for the web you can just publish using this particular plan and that really works for you but if you're somebody who's thinking of scaling right you're somebody who's thinking of you know scaling and you're going to be working with teams you just want to try the two out and then after then you're going to be working with teams then you would want to go for the Pro Plan or for the team plan yeah very important okay with that said let's go explore the flutter flow interface okay wait wait wait we're not going to explore the flutter FL interface first we're going to try how to you know design our thoughts using the mirror board we're going to design our thoughts using the mirror board that's what we're going to do first so just open your browser and go to mirro.com apppp so the thing is whenever you're building your application you want to be able to bring that thought in your head and put it inside somewhere first you know inside like a board first before you put it into flut flow I would say figar but figar is a very experience too so you don't want to use figar because it's a lot but for miror you'll be able to just bring the board bring anything you want to bring right there and you'll be able to um think of something for yourself so this is the way you do it you can pick from a template right you can pick from a template here uh you would see app wireframe you would see the Sprint you will see a whole lot of things here right so what we're going to choose we're just going to choose app wireframe so inside the wireframe we're going to plan all our application right and just imagine that we're going to be intend to build an event Tre management application and you know for an inventory management application people are going to be keeping records like when I mean keeping records people are going to be creating records reading records updating records and deleting record that's basically what you do in an inventory management application so we're going to preview and see if it's good for us right we're just going to preview and see how it looks like and you can go you can go about reading about this template you can say welcome you know stuff like that but what we want to do is planning right don't bother about you can pick anyone of your choice that's fine we just want to plan our application so I'm going to use this so you would basically see uh this is the way the application comes but we don't want to use any of this stuff right we don't want to use any of this stuff just going to delete it because don't really care don't want to use it okay so we will bring a test we'll bring some sticky notes right here and we're going to ask ourselves okay let's bring um we're going to bring a sticky note right here or let's bring a frame let's look for okay let's just leave a sticky note so we're going to ask ourself what kind of application is this an inventory management application uh inventry management um App application right and then we uh I'm going to bring the size down going to bring the size down right and just and this is the application that we're going to be this is what we're going to be building an inventry management application right and the next thing we want to ask ourself is what exactly makes an event Inventory management applic what exactly does it look like right not the note okay I think we should we should put the note over here so we should put it over here right I'm going to take this away so the next thing we want to ask ourself what exactly is an event M application and what are some of the features that you're going to need what are users going to be able to do in this particular application and that's basically what you want to ask yourself because if you don't know what users are going to be doing then you would not be able to build your screen resolved in Flor flow so how do we know probably because you have it in mind to build an inventory management loation you would have seen an inventory manag application before and you know exactly what kind of screens you're looking for right so we'll think who uses it you'll think probably you're building it for a small business and if you're building it for a small business it means the small business will be able to log in and sign up right so that means we're going to have something here called authentication right and what what what are they going to do right here they will be able to log in and then they will be able to sign up they'll be able to sign up they will be able to log in and then they will be able to recover password so if I come into the platform I'll be able to log in I'll be able to sign up I'll be able to recover my password if I misplace it so that's one thing now what else do you want users to be able to do on the platform so there are sometimes where you're going to be sh for ideas you'll be able to you be thinking okay what do I want what do I want and you'll be confused a good way to do it is to go to dribble or beand right go to dribble dribbble.com right go to dribble and you'll be able to find inspiration why dribble is loading another place to find inspiration is on Pinterest so we can go to pinterest.com right go to pinterest.com we'll be able to figure find inspiration right here on dribble right what's happened okay this is not loading let me find again dbo CL so what you want to search is you want to search inventry management application so the reason why you're searching like this is because you know as a as a small business you're not going to be you wouldn't have to revend the wheel so you don't want to rev the whe you don't want to do something new or something special because you don't have that budget I I was seeing an article online few minutes ago and I saw that ABNB spent $ 1.7 billion US last year on project on um research product research and I'm pretty sure you don't really have that money so you want to spy from what other big companies are doing so you can use it to build your application you know you can leverage and build your application just like so right so we're going to just click into it and see what other persons are doing we click into this one this is from drio really uh let's see this one that says manage your inventory and we can see this has a dashboard it has items in stock out of stock so if we screw down we're going to see other ones I'm going to click on this and we can see we have um we have login we have sign up we have Maps we have order tracking we have sale we have product details so a few things right but this is not so visible but really you can get the trft right and also we can also find uh um we can also just search Google so I'm showing you how to do this right off the B we can look for product pages right product pages um or let's just say app pages ideas so these are just keyword that I just put into this and you can see PR is coming design Rush Sy mobile app design examples um we can find others landing page folio app ID here but these are places where you will find some resources to use but I still love Pinterest and dribble so I'm going to come to Pinterest I'm going to just log in and I'll be able to search for something that I need right I'm going to search for um event management evry management application that's what I'm searching for and then I'm going to see this cool screen right these are very cool screens if you're very lucky you will find you know complete application but if you're not you wouldn't find all of it right here so I'm going to click on this one really caught my attention so we can see stuff like okay this is not English I'm going to go look for English I need something I need something in English eventory management mobile let's click on this one so we can see we have product you know product overview we have reports and then we have the company so that means we're going to have we're going to have let's go back to our mural we're going to have products right and those products are going to have product details right product count product details product count prod that starts when I mean starts I mean statistics and then we're going to have company so that means the owner of this particular person so a person might have more than one company more than one company on the application so it's going to we're going to have company details company details right details we're going to have company Products Company products and also we can have staffs right we can have staff but this an inventory management these are just addon right we can have St add stabs stabs all right so this will contain staff name you know a lot of it and the rest that's what we're going to have right here but this is a basic application you can always do way way more research you know a lot more research and figure out exactly what other person are doing so this is a wireframe from be there are terms and condition page you can see on in Pages you can see support pages so all these uh secondary Pages you can also have support support Pages TS temps and privacy policy right lots of it like this right you can have a whole lot of pages so now that you know what exactly you're going to be building it means that you'll be able to think your app through and if you want to do that you can always do screen right you can do screenshot and you can also look for eventory management application online right so this is just doing research I know we've not g into flatl we're just doing some research right you can do inventory management apps right there and you can check on Google Play store or you know Google Play store or apple Play Store depending on the on the on the place that you want to launch right you can check on these toools and you can basically find you can find what kind of tool you want to to use and how you intend to use this two you can find similarities between these twos and take some of those and then you will take screenshots say you like this this reporting the way this this screen is you take screenshot right copy image right and just paste the image right here right you paste the image right here and you would name it right you will name this image this image would be your your probably your product DET page your stack page and this is just to give you inspiration on how things are done when you're building your application all right so if you get that then let's go to the next task on hand so we've talked about putting your design on paper we've talked about finding design inspiration right and another place where you can find design inspiration is landing page folio so I didn't tell you that landing page folio right you can find design inspiration here especially if your product is going to a SAS right you can find this div design inspiration if your product is going to be a SAS you can find it really really a lot of it here you can find like login Pages how your login page can look like how your B page can look like you can find a lot of inspiration here depending on the kind of product you are building right so let's go let's go back right here so I think we're good so I'm going to replace the going to replace it with the check mark so I think we're good with this we're going this so let's go to flutter flow so I'll show you around and then we come back to thinking database so if you if you have an account already you just sign in if you don't have an account you sign start for free right if you don't have an account and um we're just going to go through the interface and see how things look like so if you have a whole lot of project right here you would see all your project right here but if you if you don't have one you have to create your account and then after creating your account you sync up with your database so that flow has a wizard that would just allow you so if I click on create new application and I you know create new application and I name the application I'll just give it a name inventory manual right say that's the name of my application I can pick from any of these templates right this is one of the way to build fast if you're a non-technical Founder you pick from any of these template and then you begin to take away some of this template take away some stuff add some to it take some away from it and that's how you're going to do it right so let's just create a blank start from a blank screen right so flfl gives you the chance to pick any of the them yourself so pick one of these colors that resonate with your brand right pick a color that resonate with your brand and pick a color that you know you think you like right and then you would go to the next step and Phil has this wizard which I'm not going to talk which I'm not really going to set up it's going to set up this wizard for you and you'll be able to you'll be able to set it up you'll be able to connect your project to Firebase if that's going to be your default database you're connected to Firebase and um and you'll be able to get started right so if you do not know about how to connect your application there's going to be a link below to a previous flut oflow course that you can that you can you know you can learn all of these things how to connect to fire base and set up your Authentication so with that said I'm going to go back you know I'm going to go back to a previous application so I'll just get started from there because I've you know set up the database I'm going to delete all the I'm going to you know go ahead and delete all the pages right here every single page right here and so it to be brand new CU I want to show you how to get this started from scratch okay so we back and there's nothing on this application anymore everything has been deleted right so what we want to do first of all I want to show you around flutter flow so you can divide flutter flow into three different parts and one of those it's the on the left hand side you have all the all the tools that you would need to drag and drop into your screen so on the left hand side you would see your widget pilot detail your widget pilot this is where you would take stuff and drag it into the screen just like so right this is where you would drag images you would drag buttons containers a whole lot of this into the screen right on the then you would also find pages right this is where as you add pages say we want to add another page we have we add the let's just say we have a bad page add it here you're going to see all the pages here and you'll be able to switch from one page to another right we then have this widget pilot tree right because inside the page you're going to have a lot of widget say I want to add a row inside this page I'm going to click on the plus sign and add a row inside of it so we have a row inside of it and then if I click inside the page I'm saying a row so the storyboard allows you to visualize your app screens all in one place right allows you to see all the movement of your screen so as we begin to build you'll begin to see the storyboard right you begin to understand how the storyboard works please forgive the rushar there's a rushar around my compound it just wouldn't stop shouting I don't know what to do so please forgive that noise so uh this is where the fire store this is where you're going to set up your database right this is where your entire database is going to leave so as us just get to add data to your application it's going to be visible here but this is not where your data your data is stored right your data is stored in your Firebase account because you'll be able to set up your account and this is the third party database management to that you can integrate seamlessly with Firebase and it works right this is where your data is going to be stored so I'm going to just click one of this and you would see this is your fir store database you know this is where it's going to be this is where it's going to be stored you can see notes you can see this is all this all going to be all the data in the application right and then if I click on authentic I can see all the users in the application but so flut oflow is just representing the data in a very clean way so you can understand but all this data is coming directly from all the data that's going to be stored here it's going to be stored directly in flut flow um in Firebase right and then we have data skyer right I'm not going to talk about this because this is you know a little bit Advanced we're not going to be using this okay let's let's just go through it so so there are sometimes where you want to add data types to your application like if I click on database and I click on ADD name add feed let's say I want to add I want to add an address right I want to add an address and you see address will have um lots of things an address might have phone number street name City Country but if I click on string it's not going to have that so what I can do is that I'll come back here to my data type I'll click on add data type and I'll just call it address right I'll call it address and I'll say create and then I'll add feed to the address I would say um Street number Street number and I'll just call it data I'll call it type integer or I'll just call it string that's fine and I'll then I'll call this um area area I'll call it string right then I'll call this CD string I'll call it state so you also use this if you are if you if you intend to store credit card if you tend to store the users credit card on your application so I'm going to call this country right I can call this also phone number phone number and I'll say string and then you see all of these things are different data types so I could even add all of these data type as a document as a type right as a feed feed type right on this particular data type then I'll come back to my user and now I want to add an address address to this user right I'll click data type I I'm going to see I'm going to find that data type right I'll click on data type and the type of the data type I'm going to use is the address all right and that's that's just the way it is the address is going to be a combination of all those other data type that I predefined already so if I click on this manage data button and I come back here that means I just want to add data myself I want to add free data myself and if I click on this plus sign right and I want to add users's address I'll click here and I'll will see that I can add the the the street number the area the city the state the country the phone number all as one data type right I hope you understand that's the way it is so I also have this app State you know there uh App State there are sometimes where you want um um where you want data to be stored on the mobile phone of your users right so once they install this all this the app state will be predefined on the person phone if you want it to be that way but if you don't want it to be that way you can create this app state right this will be pretty finded and then as users get to use your application this app state will be filled over and over and over and over again to create an up state is pretty straightforward I just click on add up State variable let's say the up state is um uh login time so you want to fin figure out all the times that user just log into your application I going say L time that's going to be the App State and it's going to be a date time right so every time a user every time a user log into the application I'm going to just store the time they logged in right I'm going to say persistent because I want to store it so when they close the application doesn't disappear I want to store it and it's going to be a list if it's a list it means I can add many app I can add many dat many login time inside a single login time right or maybe I want to say um open application so I want to tell if my users have opened my application for the first time or I want to say uh first time user so I want to do something if this person is a first time user and if or if this person is not a first time user I say yes or no right I say bullant which is a true or forse and I say it's not the least and I'll just create it so if this person is a first time user I'm going once they get to the to the page that I want I'm going to just update this up State and make it true but normally it's just going to be first right and so we have all the other things here we have U API core we have media assets we have um custom code we have um Cloud functions we have automated test we have teams and design you're going to be using this a bit you know once you set this up you don't have to set it up anymore and we do we have settings here right all these are some tweaks that you have to make in your application in order for things to work out very very fine but the most important settings that you want to check out you want to check out permissions right here if you're going to be using Bluetooth Biometrics camera or any of this stuff you wouldn't want to you want to you know activate them and put the right reasons why you are using them especially for the Apple Play Store right also you want to click on your permissions right you want to click on your publishing right here if you're going to be publishing for the for for the web and then you also have this mobile deployment right you're going to need some be spending some time here to set things up yourself and that's basically what you're going to be using most of the time right you're not going to be using a whole lot and then we have this flter Flow side of things you likely going to be regenera config sometimes but mostly uh um it's not you're not going to be using it a whole lot and also don't forget there is something here on the database called if you click on the setings there's something here called Firebase rules right the default is just fine right if you're building but when you're launching you want to you want to tighten up Firebase rules and make sure it works very very well right so FL flow is a whole is a whole lot to cover so I'm skipping through things so that we will be able to go we'll be able to finish it right so you don't get you don't get angry you know so will be able to finish it and take it to the end uh meanwhile there's going to be a full feature FL flow curse that's coming out uh if you want to if you if you want to access it you click on the link below this video and you'll be able to access that c so it's going to be a course bundle it's going to be a whole lot of courses it's going to be flutter flow and other no code tools and you'll be able to learn all of those and see the one that works for you right that's the right hand side the left hand side right of FL flow right here at the top here you have different screen size so we have the tablet and we have the desktop screen size and here you can tole between dark move mode and light mode right here and you can resize your display but that's not what we want to talk about right now in here you're going to be using this a whole lot right let's say for example I put in a container in here I put a container in here and this is the container in this side of the application I'll be able to expand the container you know from top to bottom I'll be able to give it a width to cover the entire screen I'll be able to give it a height you know this is where I will customize my container this is where I will C customize most of my application right there and here this is where I would add action remember when I told you that you do flutter flow is like creating a dummy or creating a figurine and then adding action to that figurine I can tell that when this thing is clicked I want something to happen so if I come if I come here and I put a button right here this is a button right and I put a button right here so it's a big button because I put it inside the container so that's why it's a big button so if I click on it you can see the you can see the size here and then there's this button here that's just the reason why it's a Buton so if I take it upwards so you see it's going to go to the top and the container is right here and the button right here uh um come on the um row alignment I'm just going to put it in the middle so if a person click on this on this button I want something else to happen so if I click on this Arrow I can add an action so an action is what do you want to happen if you click on this button if I click on it I can do so many things I can navigate to other pages I can navigate backwards and can create database I can do so many things anytime I click on this particular button so that's basically what actions are all about and here this is how you fetch data query this is how you query data from the database let's say for example right here on this on this particular um on this particular uh um app I want to query all the task so what I'll do is that I'll come back here and I will just bring I will come back here and I'll click on this button and I'll say add query and I would say which of the query query select collection which of this collection task I would say a list right so there's a difference between a single on a list a single will return just one query just the first or the last you know if I say single it can return the first it can return the last depending on how I set it up but if I say Leist it's going to return everything in the database and I'll say confirm right that's basically it it's just going to return a whole lot of buttons right but this is not the right way to display list if I want to display list I will use a list view to display a list right I'll click on plus sign and I say list View and drag the list view over here right this is the list View and inside this list view I'm just going to you know create add a lot of button inside of it so these are all the buttons inside the list View and then I'll go ahead and make that query the same query right the same query I made before of all the task I'm just going to go ahead and make it and you can see we have four buttons already because it's a list VI right remember this is a basic course I'm not diving deep into anything I'm just showing you around FL of flow so at the end of the day you'll basically understand what FL of flow is and if possible you can launch your own MVP and see how it how it behaves right so I'm going to delete all of this and then right here animations you don't have to it's okay you don't have to go through this okay so now that we know our way around the around flutter flow right then let's see how we'll think of our database let's go back to mro all over again so we can see right here that our authentication have login have sign up have recover password and in flut of flow the default in flut of flow the default uh collection that you'll find that once you launch your application is the users collection that's the default collection you find when you launch your application the users collection this is where everybody who use your application is going to is going to learn this is where their data is going to learn so once you authenticate anything it will go to a particular table so if you come back to flut oflow if you come back to Firebase you will see that all everyone who's authenticated here right in the application end up here right and you'll see the provider there are different signing methods in in Firebase um email is the is the is the easiest to use so you'll find other default like Google Facebook GitHub y Twitter you know uh single signing Anonymous Game Center they different setups that you can use to sign in into your application right so let's go back to our Furlow application so if we if we want to think about our database we think of our database as the person right if your eventory application is a person what's it going to look like so you can think as the authentication or if it's house you can think of what what's going to look like think of it as a now a now is the name of any person animal place or things you call all the major part of your application like a now so if your evry application is a now that means the person who's going to be using your application is going to be a human being and if a human being wants wants to log into your application what data do you want to collect right what kind of data do you want to collect in that particular application right so we're going to just um we're going to pull this in here and um we're going to put this in here and we're going to give it a give it a a you know a color and we would say if the person is a human being so how do you log to your application or sign up so if you want to sign up you can say they sign up using um they'll sign up sign up using what using email using password right using email and password that's how they sign up and if there are any other I'm going to put it here sign up using email and password if there any other thing that you want to collect any other Fe any other information that you want to collect from your users then you're going to collect it right here all right probably as a sign up you want to ask for your company name company name you want to ask for their address you want to have ask for the state of origin their country you want to ask for their name you want to ask for their phone number right these are things that you basically need so what you do require will depend on where you are and where you stay and if you're recovering password the only thing you need you just need your email address to recover password right and then when it comes to the product details you have to ask yourself since a a now is a name of a person animal place of things and you're thinking that this product is a person if this product is a person what's going to be their characteristic what exactly do they need to be addressed as a person so if you're saying if you say a product detail page that means you're going to have name of product right you're going to have the name of a product because you have to be able to address this product and then you're going to have product ID yeah which is very important you're going to have image of the product and you're going to have um what else again quantity or total of the product amount right you're going to have amount of the product you're going to have product description so this is what you want to think of database you want to think of all of these as characteristics right you want to think of them as characteristics of the of the now like if you think you see a goat a goat will have leg it will have hand it will have arms if it doesn't have all of these things you won't take it very seriously so also if your user cannot see some of these details then they won't take you seriously but basically to think of your database you just want to think of the things that you use mostly most of the apps you visit and see how those apps are structured and you'll be able to think of your database really really well right so that's basically it I just really want this tutorial to be as short as possible under 1 hour and we're going easily okay so let's just think of it that we were good here and here using template widget and flows so as a person who has no technical knowhow then you want to leverage on existing Tools in flow to create your application remember uh in application we ought to create our authentication right we ought to create authentication uh we didn't add on buing but let's just say we have to create just authentic just authentication so what we'll do we'll come back here we click on the plus sign and we'll see flows so flows so the fact that you're going to be using FL you're going to be using flows doesn't mean you're not a brilliant person it just means you're very smart and you want things to be done as fast as possible so these are authentication flows this is what we're looking for we're looking for authentication flows right here and you can pick from one of this you can pick from one of these flows one of these flows like this you can pick from one of the flows right if you want something very simple then you can pick this particular simple flow if you want something a bit you know with cool design you can pick up pick the phone but you see the phone art that mean this this art is this phone number but as a person who's just getting started I would definitely think you want to use the simple flow with five pages so if you click on it add to pages so it's going to out to Pages it's going to say continue and that's it just say continue the flow so if you click on it if if you see it if you go back to your database you would see that nothing changed on your users nothing changed but if you come back here you would see flut flow has automatically created uh the welcome widget and it's pretty responsive you can see it's pretty responsive even in desktop has created the uh forget password that's created the homepage that created the login welcome screen you know has created all of that so I'm going to delete all of this so I'm going to delete all of this and then I'll come back here to my settings right here and I'll come to my initial page so my initial my entry page is going to be my welcome screen and then my login page is going to be my home screen so the the meaning of Entry page is what's that page that they get into once when they don't have access to the application at all right so that's the that's that's how I want to do it and then I'm going to come back again and now that we've done with the outflow we need another flow right if we come back to our flut flow deck we we can use widget and we can use uh templates right so if you don't want to use flow and you think that okay I think flow is not really great for me you can use temp templates you can use flut oflow templates to you know get started so if you can just if you just come back here you can just type flutter flow FL flow templates and you can also start Design This template in flf flow right you can start design as template flutter flow to reuse in multiple multiple applications so you can start designs your designs in flutter flow as templates so you can use them in multiple applications so what you just have to do is to keep installing those templates so in the flfl marketplace you will find different applications you can buy this application you can see health and fitness FL ify uh responsive dashboard CRM you will find all manner of different type of templates over here that you can use some are for free and some are for some are for free some are for paid so don't really see yourself like a lazy person if you are using if you are going to be using templates right if you're using template don't see yourself as somebody who's lazy because you're using template but just see it as a way that okay I want to be very fast so that's the reason why I am using template so you want to just click on any of the two you click on any of this and if you're okay with it if you're okay with the preview you add you know you add to your project and that's basically all you want to do nothing else right so another way that we can actually do this let's say we want to create the the homepage let's just say want to create the homepage we can come back here click on the plus sign you can click on the plus sign and you know just search through anything that looks like a homepage but you might not find something really cool here so one thing that we can do is that you know we can delete this let's just delete this we can do is that we can click on this plus sign we can click here and we can use we can find widget so we won't find a lot of we will find widget that have not been designed over here but if we click right here if we click right here we can find already exist in widget that we can use in our application right card views already existing widget that we can use in our application to make sure that we are able to design really fast so let's just imagine this is going to be our product let's just imagine that this is our product right here this is a video this is our product right here let's just imagine and um let's just imagine that our product and then we have our colum we have all of this card inside of inside of this and then we we we want we want to use this card as you can see we didn't design this card we just got it from our from our widget flow and that was it so let's just click on the plus sign we can find other ones no we can find other ones and we can also search we can also search from here but let's just go find other ones and see how it's going to look like so I'm going to look for um so I'm going to look for this I'm going to put this one right pull this one I'll take it up right and then I'll click on the plus sign again click on the plus sign and I want to add more Stacks to it all right so you can see our homepage is fing right our homepage is fing so next I'm going to add a list to it I'm going to add a list to it is a list I'm going to add um so let's just say we want to add a list of companies to it right want to add a list of companies to it or a list of businesses to it so I'm going to find it so I'm going to zoom this is my list so can you see it so and and when you add L of these things to it you would see that it's already um most part of it is already um is already responsive right it's responsive already and so you don't have to you don't have to do too much because it's responsive already right and you can see the desktop you can see the you can see the mobile exper things so the thing is you want to be using reusable components you want to be using um flows and you want to be using templates to make sure that you don't s don't design so much because most of this have been done by professionals and so they basically understand design principles and understand how design works and if you use all this you would not really be making any mistake or whatsoever right so uh this is using templates so collecting payment the one of the easiest way to collect payment in F flow is for you to just use Stripe Right stripe is like one of the easiest things to use so if you come back here you click on stripe and you enable Stripe Right right you enable stripe and then you put your publishable key your SEC key your you know you just put your keys here you'll be able to create stripe um you'll be able to put stripe link here and it will run directly from tolow and you'll be able so on your stripe dashboard you're going to switch to test mode and copy your publishable key and your secret test key once you copy it you would then come back here and paste it here this is your publishable key and then your ciruit key then when you want to go live or if you desire to go if you desire to go live you would have to come back here and switch to your live mode and copy your publishable key and your secret your secret key and you come back here and paste it and then paste it you put your Merchant country code yeah for most persons is going to be USD that's going to be your code and then you put your the name of your Merchant and if you want to receive payment via Apple you would have to add your Apple ment ID right here right right in right here that's that's what you have to do and if you're looking for more information click right here you know it's very necessary to to it's very necessary for you to add your Apple mention ID in order for you for your payment to work in order for you to receive payment via Apple pay right that's basically what you have to do okay and um and the next thing you want to do is to the next thing you want to do is to come back to your app you you know create a screen that would tell people to collect payment and then you click on the reserve spot add an action and you know this an action and here the action is going to be stripe you know that's going to be the action under integration you would see stripe and then you would put the price so you put the price right here the country code is going to be it's not going to be dynamic and you put the price right here so it's going to be in this is the country code U sorry the country code is going to be yeah us that's going to be the country code which is America and then you can find country code currency code over you can find currency code on Google but uh you can find your own currency code but mostly you're going to be using either pounds great Brit um pounds great Great British pound or Euro or USD that's the most current that's most of the type of currency that um stripe accept and then you put the value this value you can pass it dynamically from the Buton and let's just say we put 5 right here as the value and then your customer email is going to be the authenticated user that means the user currently using the phone currently signed in and the name is going to be right here authenticated user display name or you can combine the first name and the last name together and then we switch on allow Google pay but if you allow Apple pay it's not going to work because you need um Apple mention ID for that to work and then you can use the light team or the default team you still with the default and then this is the output variable the payment ID that's the output variable right you can click into it to know what it is so you can basically use this ID later to check if this payment was successful or if the payment wasn't successful but you see once you add this action to it uh um FL flow is going to handle the rest it's going to bring a popup in between on the screen and when you click on that popup users will be able to make the payment you can do whatsoever you want to do right you can do whatever you want to do immediately after the payment works so if you click on this right after this payment you can put a an action and say add action redirect navigate to you know navigate to a particular screen after the payment so you can navigate to a different screen entirely after the payment and you can you know this is the screen let's go let's go to a different screen entirely let's delete this so we're going to click here and click on the plus sign we will add a suet screen to it go to content and we're just going to add look for a screen you know any any any coach screen just going to add any um you know this let's just use this so this is going to be the sucess screen that we're going to redirect to so come back here Reserve spot click here add action navigate to uh navigate to this uh screen naig go to the screen and then we can pass we can pass a string ID we can pass a payment ID in here that's going to be a string payment ID and type is going to be a string and we'll just going to say confirm and then we'll pass this string that we'll pass is going to be the payment ID that's going to be sent to us from Stripe from the output right here and then we can do anything we want to do we can store the ID we can you know do anything we want to do right here and this is not the only way to confirm payment we can use a web hook because once you connect once you've connected this stripe will keep on sending sending information to you telling you if the um um if the payment is still processing if the payment is done if the uh pment failed so once this happens and it's good you to navigate you to a different screen entirely right so we have um Cloud function yeah this is not going to deplo because you have to be on a BL plan for this to work if you're on a blit plan then it's going to deploy but if you're not on the blit plan it's not going to deploy right and so what else do want to cover right here with done payment linking with ex standard tool so one of the easiest ways to to link up with ex standard tool is to use bu ship build ship is one of those tool that allow you to build apis without you writing code or whatsoever so if you come back to build ship let's say for example that same stripe um that same stripe that we want to that we're looking to um that we want to implement in our app and we want to just catch the stripe want to you know understand when the payment happens and then um we want to understand when the payment happens maybe we are redirecting to a different screen you can actually do so from bu ship can update our database when an event happens in our application right so let's just say for example we want to update our database let's say we are redirecting our users to a different screen entirely and then we want to update our database when something happen so we're just going to say database update so I'm not going to update any database right here but I just want to show you walk you through it and show you how it happens so it's going to ask you what exactly do you want to do do you want to search a database do you want to do you want to music music generator do you want to screenshot your but we don't want to do any of this stuff or do you want this so This see this stripe check out completed so here it says a stripe workflow show how stripe webook automation works for processing right if you want to see if a checkout is completed so when this checkout is completed you can ask them to do something right so you can see this is the wook secret key this is the event that you want to catch right you want to catch when see when the section is complete that means when the payment has worked right when the payment has worked the SEC key that that it's asking for is this same key over here this one over here this is what it's asking for so I'll switch to test mode I'll copy this so this is what it's asking for over here this be shap oh no not this one so I'll come back here to my stripe copy come back here and put my key so these the keys asking for right there and this is my my um query my Firebase right this is my Firebase but I don't really want to query anything right I don't really want to query anything right there my Firebase account but I just want to show you how things work right so this is going to be my Firebase account and it's going to feature right it's going to feature it's going to I'm going to add my product ID over here I'm going to query where the email is equal to a particular a particular email and then I'm going to say if if that checkout worked very well if that checkout worked very well then um order is fulfilled but if not I want something else to you know I want something else to happen so that's just the way it works um maybe I'm not explaining this to the to the best of my knowledge but let me break it down a whole lot and show you how things are supposed to work so I'm going to create something else I'm going to create something else I'm just going to create an unknown workflow just going to create something else I'm going to say add a trigger I'm going to say U I want a rest API trigger right here I'm going to say add a trigger and this is going to be get response right get resp so now we're connecting want to connect want we want to implement an action in FL flow so that it will reflect here right so I'm going to say plus I'm just going to return something so return is just when this particular thing happen what do you want to happen so I'm going to just return something the value I'm going to say um I'm going to return the value the value is going to be um yes it worked right that's just going to be the value that's the value I'm going to return and then I'm just going to ship it so if if you ship it right right if you ship it you can test it here so the what this does is that an action can be performed in FL oflow right and then this particular tool will receive the action and then you can take the data you can take whatever this the whatever you can then create make something happen here right let's say for example when you receive an email when you receive an email right in your email account or when your user typing their email account their email when they registering their account you want to trigger an email sequence okay I think that works you want to trigger an email sequence in in your email too right this is how you do it so I'm going to copy this but I can test right here it's not expecting anything I can test right here and it should return that particular value when I test right so the way I did I just click on this test and that's basically it so it's nothing so you can see yes it worked so so now that I've clicked clicked on this ship I'm just going to copy this I'll come back to flutter flow right and let's just say when the user when the user make that payment this particular payment I want to send the user a message to tell them this payment was successful I'll come back to my I'll come back to my API call I click here create a call I'll say payment success payment success right and I would say it's a get I'll just put it here all right so I'm doing the same thing like we have here this is a get I can turn it into a post it's fine I to get so um I'm doing that and I'm not expecting I'm not giving it any input it's not expecting any input or whatsoever but I can I can add an input to it right normally you're supposed to add an email to read that's what you're supposed to add so you're just going to go and post so you see 200 success it's not expecting anything yes it worked the same thing that we got every time we run this application every time run this application we can make things happen so I'm going to say add right and then I'll come back here and click on this res spot and once the payment the payment is done I'm going to click on the plus sign and I'm going to say um I'm going to say API call right there and I'm going to say payment success right that's just basically it I'm going to say payment sucess that's this is just a name so this name doesn't really matter at all and so whenever a person clicks this payment it's going to trigger the it's going to run this and once this is done it's going to trigger out this and once this is done it's going to trigger out this right and then I'm going to come it's going to I'm going to come back here and I can add so many things to it right forget about the return I can click on the plus sign and I can say once this worked once this uh API is triggered I want you to send an email so I can send an email which send to the owner to the owner of that account like this I can send an email with weent I can put the API key of this particular service I can tell who the email is from and I can trigger an email sequence right I can add this person to a Google sheet I can add this person to a Google sheet I can add this person to anable sheet I can add this person to so many different Services I can book a call for this person depending on what I want to do so I'm pretty sure I'm going to do a red Deep dive into be CH and show you how these things worked right so that's basic how you connect up flow to ex standard services so preparing for launch so when you're launching if you think if you know you intend to launch very fast what you should do is that register for your Apple and Google account on time especially your Apple account because it might take a while for you to register it for them to approve it especially if you're not from the USA if you from Africa you're based out of Africa they're going to ask you for so many technical so many details and so many paperworks so do well to register your account before you be like maybe like two weeks before you decided to to launch and also get your graphics you know get your graphics done um FL flow has a cool way that you can you know take screenshot of your application so say for example you're clicking your your previewing your application you can take screenshot directly from the preview right right with a Snipping Tool you can snip your screen and take screenshot you know using that Snipping Tool um you can say if you turn on screenshot mode right it will enable you to change the test you can change the test that you have here you can change the name that you have here you can change all of these things if you're turning on screenshot mode and that will enable you to you know that will enable you to uh um to enable you to edit anything that you have here and also you can take send the screen take the screenshot yourself like this generate screenshot you can just click on generate screenshot it's going to generate multi screenshot for you this is it right it's going to generate multi screenshot for you for different type of application that you can impute into the Play Store right and also you would have to prepare your landing page that you're going to you know you're going to prepare your landing page that you're going to share with friends or you're going to share put on the on U for people to get more details and another thing that you want to prepare you want to prepare your uh terms and conditions you want to prepare your privacy policy whenever you're launching your application those are cool things that you want to do privacy policy terms and condition um you also want be gdpr compliant so if you are if you are out of Europe you want your data to be stored out of Europe that's what you want to do so those are some of the things that you need to do and also for stripe you if you're in Europe you would you don't you wouldn't have any issue if you're in Europe or the USA you shouldn't have any issue with stripe but if you are based out of Africa then you want to register your stripe on time or you want to ask a friend who live in the USA or in uh any of the European countries to help you with a stripe account but if you do not have um stripe you can actually use um pay stock based out of Nigeria you can use Razo pay you can use um um um lemon squeezy there are different type of payment you can use just the stripe comes out of the BS there are other payment too that you can use with FL flow that comes right out of the B like brentry Revenue cut razor pay Revenue cut is cool but I think if you Revenue cut is cool but one of the downside of Revenue card is that it's going to take from your profit but so I think stripe it's way better because you can actually implement it off the B directly you know from fireflow and so these are some of the some of the things I think you should know for launch I think uh before you start before you launch your application create a baross you know some typ of a boss if you're on Twitter tweet um you know share your tweet every day about your application tweet every day about your application tweet every day about the benefit of your application there's something called building public there's this build in public hashtag that you can use on Twitter uh um it's really really cool so you can say has buildin public uh build in public so there's this buildin public hashtag that you can use all the time so whenever you are whenever you are um you are building something you can just always use uh um you can always use this hashtag and you can you know people keep following this hashtag because they want to know what other persons are doing so those are some tips that I have um this this is something I want to give for free and thank you very much for watching if you need more information about Building Product with flow feel free to click on the link below and uh you know share do a call with me and if you want to go deeper with building with no C tools you want to go really really deep building with nood TOS um probably by the time you're watching this video the cost must be out if it's not out just keep um keep your hands crashed um we're going to be releasing some you know sets of tutorials a tutorial bundle that contains lots of no tools that you can use to learn how to build mobile applications with no code thank you very much for watching I hope you find got value from this I'll see you in a different class entirely

Channel: paul Nocode

Views: 8,869

Keywords: flutterflow, flutterflow tutorial for beginners, flutterflow tutorial, flutterflow tutorial 2023, flutterflow tutorial 2024, flutterflow app development, flutterflow app tutorial, flutterflow app tutorial for beginners, flutterflow app tutorial for soloprenuers

Id: xj4mYpV2XcI

Length: 63min 35sec (3815 seconds)

Published: Wed May 01 2024