FlutterFlow for Beginners 2024 | How to Build Your App from Scratch

hello and welcome everyone today we're going to be looking at flutter flow and this is for the complete beginner we're going to be showing you how to create an application from scratch and all the brand new stuff that has been released in 2024 I have a whole guide that you can get down below and we're going to go step by step in creating your own application if you're watching this on replay do hash replay or if you're watching live let me know in the comment section what you're trying to build what questions do you have so let's get right into it again the document that we're going to be using is the flutter flow for beginners but you can follow along and write notes on your Google doc and all of those kind of things so we're going to break it down we're going to break down the three key features of building your application we'll talk about the key features of 2024 that you should be building with all the new things that they've added and then also how to choose the right flutter flow templates the intro to designing database backend we'll be talking about all of that so so let's get right into it if you're new to flutter flow this is a platform where you can build applications super fast and really the there's so many different aspects of this it's important to look at the features and look at what your what you need to build out your your application or your project so if you go to features for flutter flow you can drop down this is for flutter flow 4.0 and we can see there are tons of things that you can be doing with this the biggest thing that I would say is probably the AI generator so will help you build faster but you're going to be able to work with teams better you can go into automated testing screenshot generator so that will help you when you're submitting it to the App Store you can deploy Cloud functions so have even more functionality for your application and we also have some of the tried andrue functionality that we had before so you can add animation to your application you can have push notifications you can add light or dark mode and you can have chat and group chat and they have a brand new feature that allows you to do it even faster now like I mentioned you can collaborate a lot with a team you can share different project links it's just amazing and also too you can export clean codes so if you're worried about being locked into one platform you can take your code with you as well so those are some of the basics right there from FL flow 4.0 what we want to mention later on though is AI gen now this will allow you to move faster by going from text to generating whatever you would like now there are a few different ways that you can do this you can go from text to generate code you can have different style guides for your application and you can even ask it or from text build out different database structure so if you're having trouble with it it can do all of those things for you so the AI gen uh page gen that will allow you to build out the format so the front end and these are some examples of what it would look like you can generate the backend in just a few minutes by explaining what kind of backend that you need so that is how the application is smart how does it hold data all of those different things and then you can break down by having color scheme and if you need a co-pilot with coding I would say that's more advanced but you can do that as well with AI G all right now that we have the basics of what we're going to do at flutter flow we want to First go through a couple housekeeping to kind of break down if you're just building your application here are a few things that you need to consider before you just jump in and start a project with flutter flow number one you should ask yourselfself what type of app are you building let me know in the comment section down below or for yourself write it down why now this is really important because when you build with using any kind of platform flutter flow Glide a doll doesn't matter you still need to have a key feature that you're going to be building out so what is the main feature of your application can you describe the actions needed for the main feature that's really important because a lot of people will try to just say like I want to create the next Tik Tok okay that's great but think about all the functionality and all the things Tik Tok is doing what do you want to emulate why do you want to do that what is the first functionality that you want that main feature that's really important because if you look at some of the bigger applications out there Uber GrubHub um class pass all these things there are functional there are different parts of functionality that you can bring into flutter flow but it's important that you write down what you need let's break it down a little bit more so if we're going to be building out our application the first thing that we have to do is we have to plan we have to build out the workflow now how can you do this this well you can do this with a lot of different tools but you need something where you can build out the workflows of what you need and you can do this with either Lucid chart I use Market plan you can do this with Sketch really depends on what you like to use you can use figma as well uh but really building out the workflow how your application's going to work for example when a user first goes to the first page what will they press what will the button allow them to do building out all of those things are going to be really imperative when you're building out your flutter flow project or any application in general so you have to write that down okay so the first thing is building out the workflow of your application now let's break down the three key features that we're going to be talking about today and then the key features of 2024 that's going to make this a little bit easier okay so if you're new this is for complete beginners remember so if you're just getting started building out applications there are three main things that you're going to have to know about number one the front end what the app looks like that is one section of the application then you have the backend and that allows you to have the application to be smart it's going to store data so you have to structure it just like having a bucket it's going to hold different information you've got to structure it what data you want to hold or what you want to store and what do you not want to have Mohamed no problem glad to be here and uh glad I can share this with you let me know if you have any questions in the comment section down below the third is functionality now this is what the application will do this can be a few things this can be actually navigating to different portions of the application or it can be more advanced things maybe it's several different steps or it's calculations or all these things but these are the three main Concepts that you need to have when you're building out your application if you don't have those or if you're still having trouble let me know in the comment section down below but we're going to go step by step of these three concepts found in flutter flow now before we go in and start building there are a few key features in differences in 2024 with flutter flow that will help you move even faster one of the factors we already mentioned which is AI gen this is going to allow you to build your app quicker with AI with your side I will say it is an assistant it will help you but you're still going to have to have key Concepts mastered or know where you want to go to make sure that this works so you're going to be able to use a AI gen for the front end backend and all different parts of your application the second thing that is awesome with flutter flow going into 2024 the concise Firebase integration before you would have to spend about 15 10 to 15 minutes setting it up you can do it in just a few minutes and a just a few click of the buttons really when we're setting up Firebase thank goodness so we're going to talk about that also we're going to mention workflows and talk about that when we get there and then the increase of templates from the marketplace so we're going to be premiering or talking about a few templates that we use with our clients and students and some things that you might want to consider so let's get right into it let's get started with building something okay so if you're at flut flutter flow.io you're going to be there to be able to start for free or just sign in once you sign in this will allow you to create a project now let's just get familiar with a couple things here on the main page this will be allowing you to navigate to the different projects on the leftand side you can navigate to The Marketplace so if you're going to be adding different templates some are free some are paid or different components that you want to add into your application you can do this as well so you can just see if some are paid some are free it will tell you but you can add that into your account you'll be able to access the resources which are the documentation The Help Center all of those things and you'll be able also to reach out to the community everyone in the flutter flow Community is super helpful make sure that you engage but also not just ask questions but bring energy even if you don't know how a have a question support others you know make sure that you congratulate people on their project be active in the project in the community don't just be a vampire so once we're here we're in flutter flow we're going to go to projects let's create a brand new project on the right hand side I'm going to click create new and this is going to allow me to either create from blank and depending of what kind of uh what program you have or what plan you have there might be some templates that will be only for the pro so we're going to just start from the blank canvas or the blank app to get started I'm going to say um 2024 Beta app 717 okay so we're going to create app right here oh let's see project start oh it needs to start with a letter all right we'll just do beta app and I'll do do 2024 at the end okay so now this allows me to create the project now to begin with the project name and definitely the project but the package name has to be unique so we're going to scroll over and it says right here it says this is the package name for your app it is used to uniquely identify your app on the Play Store and must be unique across all apps in the Play Store the Play Store will return an error if your package name is already in use when you're trying to make your application or bring it to the App Store you don't want to have that stress so just make sure that you have a very unique name I add um just a few unique numbers that in a sequence that we use on all of our projects just to make sure I don't get held up by that so I have that I'm going to select a theme I'm just going to say purple tones and I'm going to enable web it says this will enable the web platform support for your subject for excuse me for your project later you can make any modifications to the platform you want to support in the settings page that's fine I'm going to enable web I'm going to say set up Firebase now in the past you would have to go into permissions and do all these things as we get started just make sure that you just log into to firebase.com and it will take care of the rest and I'll show you in a moment so log in with your Gmail account make sure this Gmail account is the same Gmail account as the Gmail account that you have with flutter flow that way it won't get confused when it's trying to make uh the files you won't have any problems so either use a different profile you know in Chrome or whatever you're going to do but make sure they match I just have too many Gmail accounts I've had trouble in the past just make sure that they they are the same okay so we say that we say next step here and then it's going to allow us to set up Firebase I can say create project I'm going to have a unique name I've already done it but just confirming okay we have that says Firebase project region this is going to allow us to have basically where it's going to be stored in the cloud and we want it close to either where we are or where our main Market is going to be that way the responses are going to be quicker I'm going to pick the region to be the United States and then I'm going to sign in then I'm going to sign into my Gmail account that syncs and then then it's going to say right here creating project we are creating your Firebase project this should take 3 to five minutes you can navigate away from your screen in the meantime that's wonderful so we just created our backend or the structure for our Firebase to build out our backend we don't have to go into Google Cloud platform it does all of those things right here all right that's awesome okay that's one of the major features I love it okay so that's the first thing so we set up the back back end next what we're going to be doing is looking at the front end what are we going to do remember this is for complete beginner so we need to have orientation of what's going on here so on the left hand side we have all of the build section this just means if we're going to build something visually we have all of the pieces right here for example if we're going to use common commonly used elements like text columns rows we can drag them the elements into to the column and start building it visually if we click click the widget tree this is going to allow us to understand the structure of our application from top down so this will allow us to see where it says homepage right there Then column it is highlighting different sections of our application also if we click storyboard if we have multiple Pages we're going to be able to see how the application is built all of the different pages that we built out all of those different things right here so the build section on the left hand side of the screen allows us to build out visually if we go into the next section of the app of the canvas or the section that we're looking at on the left side we have build on this section we have the commonly commonly used elements I'm going to switch over to the widget tree I'm going to highlight text and if you notice when I'm highlighting the text on the widget tree now I see the text here in the middle so this in the middle section is the visual of our page that we're building out you see how it says page title right here I selected it from the widget Tree on the right hand side now I see page title I'm going to say main page right so in the middle it's displaying what I'm seeing from the application what view it is and then on the right hand side now I have all of the different properties and the ways I can customize the text or whatever I'm hovering on or whatever I'm trying to manipulate right so you always go from left to right when you're navigating on in flutter flow left to right left will give you the overall section of where you're going to be in the application as you go across the screen it's going to allow you to add more things and be more detailed and all the way to the right this is where we can have a detailed view of what we can control for example we have Main page I can change that to say I like pi and then I can scroll down and change a lot about that right for example I can change the font weight I can change it to 200 and you see how I like Pi changes okay so we can have that we can have text align we can change a little bit of where it's aligned to and that gives us more details or customization excuse me so we have that okay also to note not only do we have the properties over here but we also have actions actions will allow us when things are clicked or pressed we can have an action to be triggered keep that in mind later on then we have where we can add the backend query that just means how are we going to have the front end interact with the backend do we need to display data does it need to go different places all those different things we can also change out the animation of the different types of elements and then also we can have documentation this allows us to document maybe you know if if we're working on this application over years maybe we forget of like what do we do for this button or like maybe I have to remember certain things about this you can have all of those different things right there with the documentation Okay so we've gone through the build section so the visuals of flutter flow comment section down below let me know if you have questions on the build section as we progress Mohamad saying I learned about the application two months ago and I was excited then I left it for a few days and every day I see uh and every day I said I will start again you excited me to start again good times glad that you're back on it and uh glad to see you here so yeah keep it going man keep it going okay so let's go into the next section which is the connect section the connect section is going to be the the back end right how you're going to be structuring your your your data how you're going to be structuring everything that you want to save so connect right here will allow us to see if we're going to create a collection so just imagine if you have used a uh like a Google sheet and you're trying to build out the rows and columns this is creating a collection to store the data we have a whole breakdown of um database design for complete beginners where breaks down the database the explanation examples and also to how we break it down um we have all that available there's a link and then also too um we give you examples if you are using like Google like uh Google Sheets and things like that okay so bottom line it's going to be like a Excel spreadsheet or Google sheet that we're going to structure to whole data now this is where it's going to be stored if I click the this is where we're going to be able to do Firebase schema validation which is good we'll come back to that a little bit later also too we're going to have data types here if we scroll over the uh data schema it will say Define your own custom data types uh that can be used throughout your app such as App State fir store custom code and more that's I would say these sections are definitely more advanced we'll kind of touch upon them but if you're doing more advanced things or after you get past the basic functionality of your app this is where you're going to be going here uh and then also like app state where you can set up your elements that you want to keep stored in your local device okay so next we have the Define API call if you're unfamiliar with API calls this is just where two systems are talking to each other and to get more documentation you can click this button and understand more about apis and we have a whole um we have a whole other notion doc about like apis for complete beginners but basically you're talking to another system and you're going to be able to get data from that other system if you've ever used Google that's what you're doing you're searching and you're asking for something and then it's going to be pulling in that information to bring in the API calls you can just create an API call or if you have multiple different API calls you can have create an API Group and that will be more detailed but you can do an API call or a group here Panther saying thank you for doing this I'm still new to flutter flow switching away from Bubble welcome thank you so much for being here appreciate it if you have any questions let me know next when we look at the next part of this we have the media assets so if we're going to upload media we can have this available for our our application we can have this where it has custom code here as well this is really important if you're working with someone that is a developer or if you're doing very custom functionality that you might need to do custom code you can have this available as well you can have a section where it's a FL a cloud functions this is really important if you're going to have a lot of advanced functionality as well we'll touch upon that a little bit later a test section so this will allow you to test your project for errors or bugs and then you'll have the theme settings here this will allow you to change the look and feel of your application we have Design Systems the colors typography and icons and theme widgets if we look at typography we can change out a bunch we can add fonts here we can have custom icons if we look at the Design Systems it will allow us to again have a lot more control over the holistic the overview of the application as well and colors again if we're going to generate with AI maybe we have a very specific brand or something that we're going for it can allow us to have a color palette for our application if we want that as well we also have theme W widgets here says create your theme widget styles for your project when you update the theme widget all instances of your widgets that use this theme will be updated to the new styling this is really important especially to keep like consistency throughout your application something to consider then you have settings here you have the app details here the app assets so the splash page launcher this is important especially when you're going to be applying to put it on the App Store you have the nav bar and app bar you can decide to show the app the app bar to show the nav bar to navigate throughout the the application you have collab section here now where it says project setup Firebase remember we've been working on this we just enabled Firebase it just created the Firebase for us now we just have to do just a few more things to have our Firebase all set up for our project now if you look at it we have the project issues right here it says Firebase setup project uses Firebase performance monitoring but Firebase config files are not uploaded so let's do this we're going to go step by step number one we're going to before I do that I'm going to enable off on Firebase that just allows us to have authentication if we want this later I'm going to do this right now I click on that it's going to take me into Firebase where it says authentication I'm going to say get started from there we're going to be able to pick email password phone Anonymous we can also have different providers as well I'm just going to do email and password I'm going to enable it save no must no fuss done with that and then I'm going to enable storage on Firebase as well I have that I'm going to say get started now this will allow us to decide if we're going to do a production mode or a test mode so a test mode uh it says your data is open by default to enable quick setup however you must update your security rules within 30 days to enable long-term client read write access let's just do start with produ mode I'm going to do it it already has my storage uh area location where I already set it up earlier today just a few minutes ago we're creating a default bucket and as it's thinking about its life you might be asking how much is Firebase well we're on the spark plan so it is zero doar it is no cost when would we need to switch would we ever need to switch that depends on the functionality of your application that you're trying to build for example if you want push notifications or things like that that is where we're going to have to switch now we can say upgrade right here but you notice blazes pay as you go so if you're not having a lot of people use your application it's going to be cheap it's going to be as you scale right so make sure that you're looking at that and you're going to be choosing a plan accordingly if you're not using push notifications and you're just getting started you might stay on spark maybe if you're about to go to the App Store and you want push notifications and things like that um then I would consider switching but depends on your needs and remember goes back to what type of application that you're building let's see um can you build an app that includes offline mode so users can still do some things without the internet um then sync the database you can I would also just look at the functionality um the exact functionality you're looking for but you could do offline mode um you can have a yeah so simple answer is yes depends on the exact functionality but it is possible um I need to know more details but in general yes great question um okay so we looked at that for the settings we set up that oh we need to do autogenerate config files right so we're going to do this going to generate files it's going to think about its live for a moment all right all right no problem and there's also too there's tons of different agencies with flutter flow um and also too like um experts or like uh cohorts that also if you need help with just let me know there are tons of experts we work with flywheel Studio they're awesome we use their templates all the time but any you know very specific question I'll always direct you to them they're awesome um okay so we just generated the config file now if you look at this now our bugs we don't have any so it says no errors detected so we set it up correctly and our backend is totally good we have everything deployed the way it needs to be and we're ready to go also a few other things with the app settings we can see the authentication here the push notifications there's documentation that allows you to know more the mobile deployment this is quite a process but all of the details are here web publishing and honestly to me there are tons of different reasons why but I would go web publishing first before I just do mobile deployment to make sure everything looks right everything I want and I don't have to deal with the fees if people are doing inapp payments that's another thing if you're on the App Store they will take a large amount uh app uh what is it Apple Store taking 30% from developers at the time time Google what Google Play is but um yeah 30% is 30% so right here that's inapp purchases if you go on the App Store so the inapp purchases and subscriptions you can use stripe brain tree Revenue cat or razor play uh razor pay look at the documentation which one would be best for you Revenue cat can do multiple ones some people just want to use Revenue cat but find ones that work for you next up Integrations if you're using super base uh we just saw Panther in the chat talk about super base a lot of people like to use it so you can always integrate and use that as well you can have GitHub especially if you're going to be doing more custom things and you need to push it to GitHub and then push it back into the app you can do that as well uh Google analytics Al how I always forget how to say this Al goola goolia got to sound it out we have Google Maps here we have admob if you're going to be adding more you know ads into your application um M live stream and then one signal if you're going to be doing uh push notifications that's another popular way as well Okay so we've gone through the sides the different things that we can be doing we went through the build section right what you can do visually let's take a look at the backend again we set up the back end by enabling everything but say for instance we want to create a collection we want to start building out the back end well you can do it a couple different ways if we click the plus sign or we say create collection we can create a collection right here maybe we have user uncore names right we create that says it looks like you're trying to create a user collection would you like us to pre-populate it with default user Fields so you can decide to do that when it's try when you're trying to do basic things it will try to help you I love it I'm going to say yeah yes so here they have structured out me getting the information or collecting the information from users so I have email here display name photo URL unique ID here U ID create created time phone number now along with that I can add more things if I want to I can create a new name like uh Pi type maybe I'm collecting all the different types of pies that they want um and then I can decide what kind of what kind of data type it is right so I can do a string I can do integer I can do double Bolen Bolen just means like on and off switch like onoff video path audio path you can decide what you want right here um and if you do not know the different data types you can look at the documentation I'm just going to do string here and I'm going to say yes so now we have that and we can manage the content so if we click this here it will allow ow us to see what has been collected and take a look at all of these things here let's go a little bit deeper so we have the usernames here we can upload a CSV so maybe we have data from a Google sheet and we want to import it we can do that or we can add a document so we can add a record into this right here so if I want to add a name all of these things it will appear into the document let's just go through this real quick let's go with uh doc. brandfactory Inc gmail.com let's say display name I want it to be Doc I'm going to give it a photo URL here let's go here I'm going to add in a photo here uh unique ID I'm not going to do anything right now with it I'm going to say p type I'm going to say apple apple Pi okay so I'm G to add this okay add document see if I did everything correctly or do I need to add everything let's take a look create a time let's do create a time okay okay okay let's do two three five six 8888 let's see if it does that add okay app here go there then we're going to see adding document am by doing something wrong could be let me make sure now right there I could be seeing if maybe they're going to do a unique ID that it's going to automatically populate and I shouldn't have been doing that see what it does I usually do a CSV um upload so I don't usually do this way let's just see this is important to just check it out see what's going on see I'm going to leave that blank this time add that okay okay put apple add document and see so I'm having an error right there we'll take a look at what's going on but you can add documents here it could be um some of the things the settings I would have to look at how it auto created and see what's going on from there could be the image path as well so there's things to consider now when we're also doing right here upload a CSV you can upload a CSV right here to make sure you have all of the right columns and rows and what you need to have there's documentation how you're going to be uploading the CSV as well so we have that okay so we have that done we talked about the back end functionality okay we talked about the key features concise Firebase setup workflows okay so let's go back here to the front and let's go a little bit deeper in some of the things that we can create create visually okay so number one in the build section on the left hand side the top we're here we see our elements here but we can also have components where it's basically if you're trying to design something over and over again you can turn it into a component to be able to use it throughout your entire app so you're not remaking it from scratch every time right also too you can look at templates or you could use the um we could actually just use the icon where it allows us to do an AI gen of that as well so if we're trying to make a very specific page it can do that as well now one second it's thinking about its life I have way too many pages open it's going to wait okay it's telling me to shut some things down let me close some of my millions of tabs you know how it is okay we've all been there don't shame me okay let's go back here you see how it says says the AI gen so we can enter a prompt to generate a page so say for instance you can say like um I want to create a Marketplace homepage okay so we can do this now we see we have five of five out of five page Generations left right now in the Alpha version we can only do five pages a day at this time so I'm going to click this for a moment it's going to think about its life and then it's generating me a page so I want to create a Marketplace homepage it's thinking about it and it's going to provide me a structure of what it could look like and then I can also change the color structure so the themes and everything like that this takes about a minute or so we're doing this live so you know this happens but as we go through this let me know in the comments section down below are you planning to use AI gen to create a backend front end or maybe your color schemes or something like that let me know in the comment section so you see right here it's made the marketplace homepage for me so it's decided on hey if you're going to do uh light mode or dark mode right I can switch over here I can change out the color palette if I want to it'll allow me to choose and then we'll change it based on what I'm looking for I can also view the code if I want to of the page it's going to take a moment to generate but it will then we can refresh right here and I can say if I like it I kind of like it or it's not great I'm going to say I like it okay it's recording what I said and I'm going to insert the page now I'm going to name this I'm going to say homepage Marketplace and it's going to create the page it's thinking about its life it's coming over and now I have the homepage so let's go to the widget tree and see what it created for me oh nice okay so let's go to the widget tree so here it's structured how it's going to structure the application for me so we have a column we have the stack here we have a container we have a section for a text field right here so we could replace it for search later on we have featured products I think this actually looks pretty good for how much detail I gave it let me know in the comment section if you think this is good and you can be honest if you say it no that's fine now I we will talk about this later when you you want to populate this information with more information in the back end you're going to need to tie this information to something so it's going to need to pass through the information it's going to need to be able to see all of your data in the back end but for what we need right now it's structured what we want so I'm happy with it if we look at it let's let's look at basic actions so we looked at this for a second we've done front end back and let's talk about the functionality what you want the app to do so say for instance you want like the homepage here and well let's say we want another this is a homepage and we want it to go to something else right so let's say we wanted a um them to log in and create an account before they go to this homepage right so what we can do here is we can navigate here we can let's go to the build section let's navigate to templates for a moment n no no no we'll go to templates in a moment hold on one second it's going to think about it and then it's going to give me an error and then I'll go on hey J JSA thanks for your videos Doc hey thank you for being here I appreciate you okay so one second it's going to think about it life and then it will allow us to see it okay so okay great thank you okay let's go and add something real quick okay so this will allow us to add a new page then this will allow us to have new components which those are the different things that we might use over and over again like a select list or a card that we might want or an image and text and it just already looks so great and we just want to import it into our project we can do that but we can also use something called flows now flows are amazing they'll allow you to have not only the pages that you need but the functionality already built in what do I mean by that well here you could go here and have account and profile creation chat and group threads uh group and chat and group with bubbles oh that's interesting uh chat GPT compounded let's see um navig uh notifications open AI Vision API so you can decide what you want to bring into your project and you don't have to build it from scratch so for here let's scroll up we'll just bring in the account and profile creation we'll have that there before they you know get to go throughout the rest of the application so we if we click add project add to project this is going to allow us to see hey confirming adding account and profile creation so it's going to be adding one two three four five six six pages one component it's going to add a collection so a new section to save very specifically for users and it's going to have Firebase enabled again this is really helpful if you're using Firebase right it's going to do a lot of these things if you're using superbase which is totally fine you're just going to have to you know structure it the way that you want it but if you're just getting started and you feel overwhelmed and you want to see the functionality or reverse engineer what happens I suggest this and then go and use superbase second or if I'm going to use xano or something like that that's just me but if you have more experience with databases you're bringing it over you can already read the documentation you know how that works you know use superbase whatever you'd like so we're going to add to project um I'm going to say let's see flow name I'm going to say just just kep keep it account profile creation I'm going to say create flow got a question could I ask a quite interesting yet personal question sure I mean if I I don't feel like it all I won't answer but sure answer ask the questions away okay so now we have the build section here we go to the widget section and now if you look at it under the widget widget section we have all of we have a brand new folder here and it has all of the things right here right so now it's all set up now not only that if you look at it and you click the button for button that you're going to do actions right we click open it will already tell you what it's doing in the back end right it's doing off create an account then it's navigating to the next page so this really helps you with the workflow especially when you're getting started maybe for that first section um that's something to consider you don't have to do it but this really helps you especially if you're having you know people create an account have all their information all those things let's see let's go through these questions from your experience can you live uh from only developing apps with flutter flow as a freelancer that's a really good question um yes you can yes you can um we just had Eric from fly wheel Studio on he's built his entire agency off of that um it depends on the projects that you take all of those things but you can definitely do this um for fulltime it also depends on your skill level and it's people skills too right so it it depends on do you have any clients right now are you starting from scratch but it is very possible he's built up his agency using a dollo and now flutter flow in we web but he's definitely done that the primary the primary platform he uses is flutter flow I believe but you can definitely do that and now they've expanded to building templates and all those things yeah so it's very much possible say how much do you want to make reverse engineer that portion but it's very attainable but I would always say start small and then then go from there question sometimes I get the AI generated as expected but most of the time I like to customize it so I spend more time customizing the AI rather than doing it from scratch or a template yeah it really depends when you're and this is a this is also too when you decide to use the prompts depends how detailed you are I know some flowflow developers they'll even say like how many containers they want on the page and like how they want it structured sometimes it's a little bit faster for them or what they're looking for um but and also too you cannot use 400 characters it says 400 it will start maxing out so just keep that in mind but yeah sometimes when you're going that way it's easier just using a template or building it from scratch I think it's really useful for ones that feel overwhelmed and they don't know where to start then or they're trying to get a concept of what it was going to be then I would use AI gen but for the most part I'm just using templates or components yeah I'm right there with you no problem no problem uh there's also too we just did a video uh talking about how people build out their agencies and really build out their online business using flutter flow and other no code tools so it's very possible but I would always say you know depends on how proficient you are getting your skills up and then and then going from there okay so we have generated a page we have created the the account profile creation the one thing I will say is once you create something like this make sure that you're customizing it the way that you want for example if if you have continue with Google and continue with apple you're still going to then have to go into the back end of Firebase to enable this and go through the process of doing that so if either learn how to do it or for right now I would just delete it it's up to you but really understand just because the buttons right here doesn't mean everything's going to work as intended right now there are still things you have to do on the back end that Mak sure all the functionality if you're doing things like continue with Google and things like that if you have uh create an account right here you can open it up you can see all the actions you can add more actions if you want but for the most part it's going to allow you to do the basics to get you through all of your creation of a profile and those things now that is how you're going to be creating Pages going through that we talked about the functionality oh someone asked about API calls okay so all right let's talk about API calls real quick API calls have to do when you're talking to two systems right if you are not familiar with like API documentation that is another skill in itself because you have to make sure that you're doing the calls correctly you could be getting errors and you're like I have no idea where to go there are tons of videos about apis for beginners we have that that's included with our uh flutter flow for beginners but just realize it it does take some time and it does have a learning curve to understand how uh a AP work we're going to go through a very basic one just so we understand the concept and there's a flutter flow for beginners guide if anyone wants it but again you don't have to keep watching for free and all these things they're all free for you okay so you don't have to get the Guide um all the things I reference are all free go into the flutter flow documentation but the guide allows all of the time and energy of what we built for our clients or for our students or just ourselves it's all of the nice the nice to have things that we have our notes and stuff like that so let's talk about apis okay so we said apis are two systems talking to each other let's look at the Star Wars API okay so the Star Wars API allows you to be able to get information from the movies right so this is a simpler API there's tons of other ones you can do a strike stripe you can just Google open API documentation and you'll find whatever you'd like what we're going to do is look at the API documentation just the very beginning so you can get started right so the documentation allows you to understand the introduction how you're doing a call doing HTTP requests similar to how you're using Google if we have the base URL right here it says the base URL is the root URL for all of the apis if you ever want to make a request okay so we're going to grab the base URL right here we're going to put it in to our flutter flow project you see where it says right here API calls we're going to just do one call create an API call here now you see right here it's asking us what do we want to do now the basics of this is like the methods or the types of apis you can do there are a couple different ones but let's talk about the basics get is a get call so you're just grabbing the information get you're grabbing the information post you're putting information somewhere so you're posting information back to record in delete you're deleting information you're deleting something right so we'll just go there we're going to do just a get call the simple call that we're just grabbing something okay so we're going to name the API call we're going to say Star Wars uh profile or Star Wars we'll just name it there okay it says get method it says API URL we're going to put in the um API that we got over here because it says the base URL okay and we're going to uh test the call right well let's add the call let's now test it we're going to say test API call and look we got a status 200 success so we grabbed the information we get we grabbed it right so here in flutter flow we can decide on the Json path and we can add different Json paths bottom line because we don't want to just have all of this information just displaying all the time where we have the you know the body Json the raw body all that stuff we can say what do we want to get from that information we can say people planets films Vehicles Starship so say for instance we're just trying to grab the people grab Luke Skywalker or information about him we can do add Json path and then we're going to name it Star Wars um let's see characters all right so we have that and it's a string uh we can we have it there we can preview it if we want to if not we can have it over here then we can also do planets we're going to say Ad Json we're just going to say Star Wars planets okay so we have that we're going to save it we're going to save it right there okay so we just did our first get call in in flutter flow right so we just grabbed it grabbed the API did all those things in later videos if people want to see how to put it into your project and things like that we can but the basics is that's how we're going to do the response that's how we can look at it if you want to see more documentation about API calls and what you can do there are that it is found in the flutter flow documentation excuse me okay so now that we have that let's take a look at our doc doent and see what we were able to do okay so we able to build out the workflow we did that with our concept and we could do that using Market plan or sketch um we also looked at the key Concepts the front end the back end we and functionality which is the functionality that we can do with apis or with just actions with different buttons pressed all of those different things and then we were talking about building visually from left to to write of what you're going to be doing in your application now if you have more questions on intro to designing we have a video that we'll link out to if you want to know more about database design there's another video down below and if you want to create a project let me know let me know what kind of project you're looking for now the last thing that we want to do is we're going to be talking about templates and this is important because you can move a lot quicker if you use a template depending on what you're trying to create again I would always like to say depending on what you're trying to create so say for instance if I go to the marketplace I go to the marketplace and I want to have a template that is a podcast I can go there and we can see a couple different examples now well one example right now we'll look at the flywheel Studio One okay so here we can do a live view of what it looks like before you buy but it can also allow you to see okay what different pages it will contain all of those things now when you have those pages it can save you tons of time it can save you hundreds of hours if you are you know if you if you're not a good designer or if also too you're just not experienced with this you could have a template like this and now you can focus on the back end bringing in your data thinking about your business versus all of these intricatum in your application so let's spin this up to take a look at it for a second and we're going to go to live mode for a second but this really helps you to move faster so finding a template might be a great Advantage for you also too what I like about how uh flywheel Studio does it they also have different pages already marked in different uh sub folders right so onboarding they have all the pages made out forming um then also too I can see like the component section the sub Pages what will it look like all of those things I need water hold on okay so we're generating the we're generating the application right now preparing the testing session and all those things and this is going to allow us to navigate and kind of try out the application to see what we like what we don't like and this really allows us to speed up when we're using templates again some templates cost money others don't and if you're just getting started I would just use one that is free to get started okay so we have this right here let's see right here oh okay let's talk about this and I'll answer questions so here we can test out the different buttons if we want to we can take a look at what it does we can see the functionality we can click on some of the screens to see okay this is what it would look like then I get an idea of if I want to add a player there or where I would add it there's also a favoring icon right there this really allows to think about the structure of your application and what you're going to be doing let me know in the comments section if that makes sense okay one of the questions how is it when I use the open AI API I use post to get to get some responses from GPT but as you said get is to get the data but I'm using post which is supposed to post data which is supposed to post data okay so to look at that I look at the open AI open AI documentation also to I would have to look at the documentation if the exact thing that you're looking at it could be you're posting your request over there then you're getting the response back I'd have to look at the documentation honestly um also too I think there is are you doing it through the API calls or you doing it through the open aai integration I think there's an integration with open AI now I'd have to check that but yeah are you doing it just through the API calls great question but bottom line is I would have to look at the documentation but in general those rules would apply if it's a post there would have to be I'd have to just look at it great question though yeah let me know I thought there was an integration I would have to check though let's see let me check I thought that there was could be wrong though could be wrong great okay so again let's take a look we've gone through front end backend functionality gone through that how it's changed with the connecting Firebase to 2024 now full build process oh full build process is just talking about if we're doing it we want to have a plan of what we're doing we want to have a workflow we' again use the workflow like using sketch or Market plan we' do the front end so we'd have the basic Pages then we would look at the actions how we would navigate from one page to another then we would build out the backend totally then we would have the logic then we would look at debugging the application then we would test and then reeval so that allows us to again progress as we're building out our um our application our crap app this is something we're going to be premiering soon but it's like a crud app but better so a crud app is when you're doing a application that has a create uh a create read update and delete we have a crap app which is create read actions and profit because we really focus on even before you start building when you're in the plan stage when you're in the planning stage looking at how viable this is and looking to pre-order for people to pay you even before you start building out your apps we do this all the time with our students with success we're we're really focused on this you can learn flutter flow if it's a passion project but we're always like if you're going to build your application and spend hundreds of hours to do this potentially we want it to be profitable for you so uh we talk about that in the last live stream we we broke that down also too we have the seven steps to build a profitable digital product uh we have the app project that we did and other videos in and earlier this year and this is how you get started with flutter flow in 2024 if you have questions if you want follow-up videos on specific types of applications if you have very specific questions about using flutter flow or if you're using build ship and you want different experts to show up on the show or the channel let me know we're always looking to add more things for this Channel and for you if you have questions remember in the comment section down below let me know and continue to build work hard and I'll be back with more tutorials and videos again thank you so much for the time we'll see you in the next video

Channel: Doc Williams

Views: 11,198

Keywords:

Id: D05ugfpcqH0

Length: 59min 11sec (3551 seconds)

Published: Thu Dec 28 2023