How to Quickly CLONE Any App with FlutterFlow (WITHOUT CODE) | FLUTTERFLOW TUTORIAL FOR BEGINNERS

what's good guys in this video i'm going to show you how you can clone any app using flutter flow i'm going to show you everything that you need to do from a to z now before we get started if you like no code you want to learn no code you want to build software without writing a single line of code smash the like button subscribe to the channel and leave a comment to let me know what you think about this video or if you have any questions or concerns so the first thing that we need to do is we need to go to a site that we want to clone and we need to think about what kind of things do we want to clone now for the purpose of this tutorial we are going to be looking at airbnb and we're going to be building a prototype that works like airbnb and so to simplify things what we're gonna do is we're gonna take the data that airbnb is showing and we're gonna put it inside the app that we're building when you're building out the production app you obviously want to change the data out for the data you're gonna have in your own app now once you have the site chosen the next thing you want to do is you want to download an extension called scrape similar okay simply google for scrape similar chrome extension you're going to see it here you can open it up and you want to install this extension i already have this extension installed so i'm gonna skip this step once you have the extension installed you're gonna go to a site that you wanna clone and you're gonna look at different things that you wanna clone so right now i'm looking at airbnb and what i want to do is i want to clone the images i want to clone the location i want to clone the distance the dates and the cost per night and also we can clone the the rating as well okay so now that we have the extension installed what you guys want to do is you want to right click and you want to say scrape similar okay once you do that what you guys want to do is you want to use this information here i already have a preset here and once we have this preset and once you load this extension you're going to see that we have the city names right these are all the city names that are displayed here next you want to go to google sheets and you want to create an empty spreadsheet once you have that you can simply click on copy to clipboard you can go back here and you can paste it okay we're going to call this top column as location and you want to do the same thing for the other pieces of data that you want to incorporate into your app so i'm gonna right click on this uh distance here as well i'm gonna hit scrape similar and now we have the data here so i'm gonna do this really quickly i'm gonna copy this to clipboard i'm gonna go back here paste it i'm gonna call this distance and i'm going to do the same thing for dates as well copy the clipboard and last but not least we also want the price and here's the price copy to clipboard paste it right here and next we also want the rating okay now before we go further you want to fix up this data you want to clean it up a little bit so as you can see here it's kind of doubling here so what you want to do is you want to fix it up here really really easily you just want to have the number in here so i'm going to leave 200 i'm gonna leave this all right so as you can see now we have the prices all nicely formatted and you want to do the same thing for the distance as well okay so now it looks good we have the location we have the distance and we have the dates here as well as the price now for the rating i'm just going to keep it simple i'm just going to create random values here for instance maybe something like this all right so now we have random values as a rating from 1 to 5. now that you have this data here you wanna go into google's firebase and you wanna click on get started here and you wanna hit add a project here we're gonna call this airbnb plotter app we're gonna hit continue we're gonna say create project we're gonna hit continue next we're gonna go to firestore database we're gonna say create database and hit enable okay so now our database has been created in google's cloud firestore the next thing that we need to do is we need to import the data that we have here into the database here and for that we're going to be using a really nice tool called firefox once you download this tool you're gonna have it right here this is what it looks like now once you configure this app what you're gonna see inside this app is the data that you have here so for instance here i have a collection called accommodations and i have a document inside that collection and this document has the following fields and if you go into this app you can see that we have that collection here as well this is the collection and we have an empty document so now that we have that here what you guys want to do is you want to go back to this spreadsheet you want to go file download comma separated values and next you want to go back to the app and you want to say import documents we're going to choose the file and it's going to auto detect all the fields and it's going to match them up so make sure they're matching perfectly and they should we're going to say import all right so it looks like it imported now if you right click here and you do refresh you will see all the data here these are all the records including our empty record which we can delete essentially i'm going to go here delete document okay so now we have all of this data in our database this app has served its purpose the next thing that we need to do is we need to go into flutter flow and create an app to use this data i'm going to sign in into my flutterflow account i'm going to do create project i'm going to call this airbnb test app i'm gonna say create new i'm gonna do next step in this part we wanna configure our firebase db this is optional but obviously we're using a firebase db so this is important and so it's asking us for a firebase project id we're going to go back here click on this gear icon project settings and we're going to copy this project id here paste it here connect it needs to have access to the account we're going to do auto generate config files generate files and we're gonna do start building okay so now that we have the ui we have kind of the basic screen here what we want to do is we want to go into settings right here into database settings and we want to create that collection so that a flutter flow understands the schema and kind of the data that we're dealing with so our collection is called accommodations we're going to do create and now we need to add the fields and the fields that we have are dates distance location price rating so we're going to do dates location distance dates price and rating so now that we defined our schema you want to go into settings and you want to hit validate to make sure that it's set up properly okay it's telling us validation status is successful now that we've done this step we can start building the ui and this is the fun part okay so here you can set your app bar style i'm just gonna do this one this classic one here and now we need to build the app the first thing that we need to do is we need to build a list this is gonna be a list right because if you go back to airbnb and actually if you're using chrome you can do inspect and then you can choose this thing here this icon here at the bottom which is going to switch to a mobile view and so as you can see this is a list view essentially right we have this search bar here which we can use as well but the the main part of the app is this list view image and then a bunch of text here which is what we need to do so we're going to go back to the app and what we want to do is we want that search bar first of all so i'm going to go back here and we're going to find the search bar so here's the search bar let's see that looks really nice here's uh here's another one so i'm going to use this one right here and there you have it there you have the search bar nicely created next what we guys want to do is we want to go back here and we want to create a list view so this column here has the search bar but what we want to do is we want to add an element we're going to say list now this is going to be the list view this list view is going to be a collection of different items so if we click this plus button we can create it from scratch or we can go here and we can find something that works really really well and actually i found something that's perfect for what we are trying to do so a card house listing is perfect right and so that's kind of what we have this thing is a list view okay that means it's going to get repeated uh depending on the data that we're getting now if you click on the list view you want to go into this the backend query section and you want to say query collection you want to say accommodations and you want to say confirm okay once you do that you can see that it's repeating it's starting to repeat okay now we have two of these that means it understands that this is now a listview and this is going to repeat next thing you guys want to do is you want to configure different things here okay so if you click on this you want to set it from a variable right we're going to set it from a variable we're going to get accommodation and we're going to say well this is going to be the name i believe so if we go back here location so it's going to be location distance date price and then rating here so it's going to say location confirm we're going to go in here we're going to say price price and then we have a rating here we're going to say this is going to be a rating all right so that's kind of what we have it's not exactly kind of what we want but that's easy to fix right now what we want to do is we want to make sure it's actually legit actually we can change it here too to at least something like this now let's run this app and make sure that we're actually displaying the right data we're gonna hit run and so now when we run the app this is the results we're getting it looks pretty good you gotta admit this is the original app airbnb it says where to and we have a whole list here with different stats and this is kind of what we're seeing obviously we can change this to where to very very easily and we can add more fields so let's do that right now real quick just to show you how it can be done we can go in here and we can scroll down and we can change this where to where to question mark and now for this thing right here as you can see this is a built-in widget here okay this thing right here this is this this area here this is a built-in widget this is this house card here and we have all of these things and so what we can do is uh as you can see so we have a big column here we have a main image and then we have another row with text another row with text and then we have a container so what we can do is depending on what we want to add if you want to add something that looks like a location or something that looks like distance in fact i think it's going to be something that this that looks like distance we can simply right click and duplicate okay we can do it like this or we can add another row so depending on how you want to do it i can just go in here so i can go in here and say okay i want another row okay in fact what i want to do is i want to duplicate so i'm going to delete this here and then i can simply duplicate this row i can right click and say duplicate and now we have two fields here and we have the rating kind of like what the air b app is right we have a bunch of fields here and we have some text and then we have the rating here if you want now the next thing that we need to do is we need to create a detail page and for that we can simply go in here we have the pages we can add a new page right here and we can just say detail call it whatever you want and now we have a page here we can configure it like this and here we can drag all the elements so let's take a look at what it looks like if you click here this is kind of what it looks like right we have this main screen we have this text here we have this detail and what i suggest that you want to do is you want to go in here and you want to essentially get something that looks like something similar so we have a bunch of ui elements here we can scroll down so there we have a listing that we were using we have a main header we have an image with cta so we can start with something like this then customize it as we want very very easy and the other thing that we can do is we can essentially pass data so we can simply go here if they click on it we can have a navigation element so if you go in here uh you have this list view here you have this house card if they click on the house card we are going to have an action we're going to add an action that's going to do a navigate to navigate to detail okay and it's going to pass the parameters so maybe this is going to be an id or the document id so for instance you can pass the document reference here so you can say this is going to be docref and collection is going to be apartments we can confirm and then when we pass it when we define it we can just pass the doc ref so what we're gonna do is we're gonna say this is a record we're gonna get a record and we're gonna pass the reference okay okay so we have that and then on the next page when we go to the detail page we have parameters okay so this is our reference so that way we can uh we can get the data so we can go in here while we're building this page we can actually do it on the page level detail page level and we can say well these are the parameters we can say this is the document reference and it knows exactly what's happening right and then we can go in here and we can say well ah this is document from reference apartments source is going to be docref that's it and now we have all the data and now you can just simply come in here you can say set from variable we have a partner records from detail and then we can get the data so this is going to be the location or this is going to be distance i think it's going to be a location in this case we can hit confirm and now if we run the app once we click on it it's going to do it correctly so here's the app if we click on something it redirects it and it displays this that we set it here so if you're coming back here and you click let's say this su narrows nestor falls you see that here now all you have to do is replace the other stuff and then essentially get more widgets as separate things so all of these parts they're going to be widgets here all right guys so that's how you clone any app that you want regardless how complex it is how simple it is from actually getting the data to building the ui to implementing the logic you can use this for any app out there it's the same process it's as simple so that is all that i wanted to show you guys today let me know in the comments below if you enjoyed this video if you have any questions concerns or anything like that also like this video if you enjoyed it smash the like button if you've gotten some value from this video and do not forget to subscribe to the channel if you are interested in anything related to no code thanks a lot for watching and i'll talk to you real real soon

Channel: James NoCode

Views: 29,038

Keywords: flutterflow for beginners 2022, flutterflow tutorial, flutterflow training, clone airbnb, clone any app without code, nocode tutorial for beginners 2022, nocode tutorial for beginners, nocode tutorial, nocode

Id: 2MI776CV76w

Length: 15min 11sec (911 seconds)

Published: Thu Jun 16 2022