flutterflow Tutorial | A Beginner's Tutorial for Building Mobile Apps

hi it's porno code here I am a no-call designer I build with flutterflow and I don't know code tools when I'm not trying a beautiful outflow when I'm trying to learn something new I am trying I am trying to put something here on YouTube so you who's watching me right now can learn how to build your own mobile application this time I want to show you how to build apps and photo flow it's gonna take you from not knowing anything about sort of flow to building your own application and launching it on Play Store that's super exciting right you'll be able to launch your app on play store immediately after watching this course from the beginning to the end so this works for you if you're a solopreneur if you're a setup founder if you're somebody who's just getting started if you're somebody who just want to try out an app if you're a business person this really really works you will move from not knowing anything to putting your app on the Play Store that's how it works here meanwhile the the figma file is it is in the link is it's down below it's in the link below you can click on it so you can copy the figma file and also the app file also is in the link below click on it play with the application and get to use it for yourself so that's the way we're gonna do it as you go as you as you watch the course do remember to subscribe to this Channel and don't remember to leave your comments and if you're looking if you need help with your father flow project feel free to reach out to me and I'll do well to give you a helping hand thank you so much for getting getting started with this course let's get started with the introduction welcome first thing first I want to tell you something that is super cool and that you should now learning requires patience if you want to learn how to build your own mobile app with photo flow no code or not it requires you to spend considerable amounts of time learning the basics so we're going to start with the basics and build on the basics till we get to the end so go grab a cup of coffee go grab some energy drink or go grab water put it by your side so you can start from the beginning all the way to the end do make sure that you do not fast forward is that maybe your pro at this and you know what you're really doing but if you're a beginner make sure you do not fast forward watch it step by step so now that we'll have that out of the way let's get started really I promise we're gonna get started right now if I come back to this flight of flow beginners course and I want to run you through everything that we're going to cover so first um I want you to know about that at the end of this course you should be able to build a blogging application that you can launch right now that you can launch without no experience so that's what we're going to be building as a project so as we go forward in this application we're just going to be building a blogging app that users can make posts can leave posts can comment the reason why we're doing that is because we learn practical application we'll be able to cover the entire fundamentals of building with for the floor so see what we're going to cover we're going to cover what flood of flow is and why it's useful for mobile development we're going to run you through the free and a paid account walk you through the entire Florida flow dashboard and we're going to set up our environment that's what we're doing in chapter one chapter two you're gonna we're gonna start building your first application and today I'm going to take you through the entire structure the UI development the types of layout and then we're going to build the user interface of the application and when we use that interface I mean the part that users can see people who get to come there and read blog articles on your application that's what they're going to be saying we're going to work with images work with tests work with buttons and gestures then I'm going to go ahead and show you how to set up your database on Firebase um there are all the options like super bass I know we're going to go through all that and we're going to dive a little bit into API yeah very little a little bit into API we're not covering a whole lot because this will be a nice course so it's going to be doing something like within the scope of this course and then I'm going to show you all the different ways to set up your application for success and at the end of the course we're going to launch it till the Play Store and to recited we're going to be launching it to the Android play store iOS Play Store I do not have an account there but it's pretty similar launching on the Android play store I'm at Google Play Store it's pretty similar what you just need you just need to have confidence you just need to have confidence that you can do this and sure thing you'll be able to do this you understand that now let's go ahead and get started with the first one you know what is flutter flow and why it's useful for mobile app development I'll see you in the next slide I'm sure you've had about no code twos you know you've had about no code Arbutus you've read about double you write about a dialogue if you haven't those are just listed the no code tools that you can use to build applications just like flight flow so for the flow is a is a no code or a local 2 that you can use to build mobile applications as fast as possible now just mobile applications you can also use blood flow to build web applications if you want to but it's just the tool that it's known for helping you build mobile applications as fast as possible this really work if you have experience Building Product with cold or you have no experience or whatsoever Building Product you just stay to come to flood flow with an open mind and be ready to build your application some super amazing things that I love about photo flow personally is the fact that it's very flexible it's very flexible that's number one number two it's fairly very ostensible ostensible in the fact that you can always build on top of it if you're somebody who knows how to code or you're somebody who has someone in your team but knows how to code you can build a whole lot more you can extend it as big as far as you want to do it with custom code custom widgets and a whole lot more and another thing that I love is that you can build for multiple platforms you can build for web you can build for mobile and you can build for desktop all in one application you can even build a tool like Google Chrome with um you can build something like a Google Chrome application with flat floor that's amazing for the flow and number three one of the reasons why I love to the floor I love the team the flutter flow team they're great I I love to support they're really great they really support you when you're building your application and secondly they are always making new changes you know they are always releasing new features to always make your application better some of the things that I used to do with code when I started using photo flow I do not do them with code anymore because flood flow they've released new updates that does that same thing with um without code you know just simply by dragging and dropping so that's the reason why I love letter flow that's what flutter flow is you basically use file flow as you drag and drop two for building mobile application you can see some of the amazing brand that useful big brands in the work get a useful on the floor to build mobile application so that's basically what photo flow is next we're gonna I'm gonna show you the difference between the paid plan and the free plan into the floor just join me in the next slide come to pricing I really think that the flutter flow tool is very affordable especially when you dive deep to see the kind of things that you're able to build the kind of mobile applications that you're able to build and how flexible this tool is if you're gonna be starting an advice that you start with a free plan especially if you're somebody who is not very conversant with the entire coding environment Our advice that you start with a free plan and then from the free plan you know what you're getting yourself into and then you can move forward you can move forward to the paid plan if you're asking me what's the difference between the free and the pay plan first you need the pay plan if you really want to build things that make sense with cloudflow if you really want to be able to deploy your application without deploying it first to your local system before pushing it to the internet you really do need to pay plan I would say that you can go with the standard plan it's prettier affordable for thirty dollars if you're watching this in Europe or in America but if you're watching this anywhere in Africa you're gonna you're going to get this for twelve dollars I am currently based in I'm currently based in Nigeria so I get this for 28 dollars why because there's some Regional discount and so some of the features that you enjoy in the free plan is the fact that you'll be able to use the entire core features you'll be able to enjoy some preview templates Firebase integration and two API endpoint which I think is not very sufficient for you if you want to build a very robust application and also you are unable to download your download your APK file you're unable to download your code file and you're unable to integrate with GitHub GitHub is some place where you get to store your code and review version fashion changes you can look it up online just go ahead and search for GitHub online and you'll be able to see it so if you I would advise that if you're if you want to take this course you know you want to keep going with this course go ahead and get the standard plan it will be faster for you to implement most of the things that I'll teach you and it will be easier to eat less stress and less headache for you and besides you don't have to pay now you can go on their 15-day trial where you just simply put your card and in 15 days if you don't like it you take it away if you like it you can keep the card there I personally use the Pro Plan that's what I use the reason why I use the Pro Plan is because of I get support a very very good support I get very good support when I use it for the the Pro Plan and also I can easily deploy without without all the trouble that comes with shipping things to the App Store and another thing that I like is that when I'm dealing with my client I'm able to I'm able to integrate with GitHub and I'm able to download the APK file and send to them so they can actually try they can I'm able to download the APK file and send to them so they can actually review it and give me feedback as fast as possible so for my for my best advice I would say that you go with standard plan or the Pro Plan if you want to if you want to be able to go ahead with this course you can see it has here free trial stat free trial I would say just go ahead and click on the free trial button and you'll be able to build awesome application that you can launch into the Play Store in days so that's basically what um the difference between that's different between both price and the free pricing and the paid pricing so now that you know that Nest I'm gonna walk you through the flutter flow dashboard it doesn't matter your beginner you're an advanced person I'm pretty sure there will be something to learn from me when I when we explore dashboard so I hope for the benefit of those course you've been able to set you on a plan if you go with a standard plan congratulations if you went with the Pro Plan congratulations and if you're using the free plan it's awesome too you will still be able to explode the course with me and you will still be able to go through some of the things that I'll cover in this course but if you know you want to launch it on the Play Store at the end of the day I would advise that you go for the standard plan or the problem so that's it let's get started remember in this part of the course what we're doing we're going to be exploring the flutter flow dashboard so go ahead and start for free or sign in if you have an account already so the reason why it's showing me this is because I have an account ready and I'm logged in on this PC if I am not logged in it's going to give me a space to put in my username on my password just like the way every other application works and you can see firstly you see how your system of the applications that I've worked on for myself and for a different persons because this is my day job I build application for living so on this side of things you can see my plan that I'm in a Pro Plan that's what I'm using currently and you can see I can log out from here and I can choose a few other I can make a few other choices which I'm not going to bother about now so if you're if you're visiting this dashboard for the very first time go ahead and click on create new create new and give your project a name don't bother about the kind of name you're choosing right now because you can always go ahead and change it and one thing that you notice you notice there are some templates that you can get started with I want to advise you to get started with any of this template especially if you're getting started with overflow one thing that I think you should do is to learn the basics once you're good with the basics you can use any of this template customize them as easy as possible so you can launch your product very fast but if you don't understand the basics forget about this and go ahead and create your your own mobile application so I'm going to call this application I'm going to it's a Blog it's a Blog so I'm going to call it gistreal I know there are blocks called this real but this is just something that came into my head I'm just going to call it this Trail I'm going to start with a blank application so the first thing flight flow attempts to give you a guide shows you what you can do and how you can do this but don't worry about this just skip it it's fine so once you get here you will see the flooded flow is divided into four parts when it comes to the screen it has the canvas where all your design happens which is right here this is the canvas where you see my cursor you see this is the canvas and also it has the widget panel this is the wicked panel this is where you get to choose all these all the elements you use when building your application and then we have the properties right here on my right hand side this is the properties panel and then we have the toolbar the two bar is on top this is where you get to choose what screen you're working on so I'm working on a desktop then I want to click this screen and this way you get to choose um this game where you get to contact support if you want to this is where you get to find the versions of your application this is where you can there are a lot of things that you can do in here and do here but we're not going to be covering all all that because this is a simple crash course and I want it to be as fast as possible but one thing that you should remember is this the floor screen can be divided into four one is the canvas area which you're seeing right now which you see my cursor on right now and the right hand side is the widget area the left hand side is the properties area and the top is the tools area there are other parts that you can explore on the left hand side you can see the wheat Gantry we'll cover that later you can see the pages will do that linked up when we are creating Pages you can see database you can see our local state you can see API core you can see media here where we manage our files you can see custom functions and then the settings all this will explore later so how about you go ahead look at everything and on left on the right on top on the canvas area see what they do and join me in the next lesson thank you in this matchup of course we're going to be setting up our development environment but it's not going to include setting up Firebase which we're going to cover up later in the course see it this way floral flow comprises of two parts you have the front end and then the front the back end you know you are doing a lot of them now but the back end will not exist without the database which we're going to set up later in this time at this time we're going to focus on the front end set it up as cool as possible so that we can develop as easy as possible so this is what we're going to do we're going to go to the we're going to go to the settings we're going to go to the settings and we're going to go to app details this is what we're looking for so as you can see we have our app details the name of our app detail is called gistro that's the name of the app yeah solar flow is calling it a project and then you can also see our display name for the display name you can for the display name this is one will appear on the App Store the project name here is just fill and the display name we can also call it just real the reason why you're feeling this now is so you don't have to feel it later so you don't have to feel it the whole you know you don't have to feel it later when you're trying to pull this on the App Store then we also have our app assets Splash Queen and launch icon all this I would advise if you're somebody with no design skill you can go ahead and open canva and you'll be able to generate all this create all these things with canva with minimum effort and another thing that you want to you want to do you want to set up the collaboration if you are doing this with your partner you're doing this with somebody else then you want to invite this person to the file so as to reduce communication workload so these are a few things these are a few things that you have to go ahead and set up but also the things we're going to be doing those as we progress in the court so go ahead and check this out check out the name of your application invite someone to your application if you want to and join me in the next lesson thank you you've gotten this far this part of a course you're such a genius what I want you to do for me is just subscribe you know click on the subscription button below and subscribe it's good for the algorithm and it's good for all the persons who really want to learn how to build mobile applications without writing a single line of code so please go ahead and click on the description button and then move ahead to the next lesson have you done that you've done that right thank you very much almost every application that you intend to build is a combination of screens what you're doing is that you're combining shapes your combining tests your combining images to make it clicks onto the eyes if it's if you're not combining anything then it's not going to work just imagine you just putting a single picture on your application and think it's going to work so don't think of designing or building anything with another flow as an LP task all those amazing applications you see be it Instagram WhatsApp um Instagram WhatsApp Twitter they are all combination of different widgets it would get alone might not really make sense but when you begin to come when you combine it with other widgets then it began to make sense for example if you're trying to tell the user if you are trying to tell the user to click a button what you will do is that you will combine it you will combine the test what you do is that you combine the test and the button and then it will make sense for that particular user let me show you a few things this is a figma file that contains some of the projects I want to welcome so this is a design Journey different app ideas so for example you can see this is an image right here this is a test this test is a test and this is an icon same thing this is a test this is uh this is a shape we test inside of it so you can see this is an image there's an it is an image this is a test is a test and this is a button just by doing it this way it makes a whole lot of sense but if you decide to say hey I'm going to use a few with gas and nothing at all then it's not going to make sense for you when you're structuring your application make sure that it's a combination of different widgets entirely and understand that you would feel sometimes when you're trying to do this and sometimes it wouldn't look as professional as you see it here but you just need to keep working on it as a beginner and it's going to make sense we're going to use this particular this particular display we're going to use this particular we're going to use this as our onboarding section in our blogging application so you will see how it is to combine different shapes and different particular application together though we're not going to make it this complex but it's going to be this good so let's go back to our application and create our full screen now we're creating our first screen because this is an onboarding application for screen for us we're going to take away the app bar and we'll be left with this I love for my on my primary color when I clearly click when I click on it I love to make it white because I really do not like the gray I like using gray in my design so I love to make it white I think it's so clean and is and better for me so what I'm going to do here is that I'm going to I'm going to be modeling this particular design and you can see what we have here we have an image and then we have a test and we have another test and we have a button just keep that in mind image test test and a button so let's go back again first thing what floor flow does that whenever you create a new page it gives you a column and everything you're going to be doing on cloudflow is going to exist in a column or in a row column is vertical and roll is horizontal I wish I can show you this now column is vertical and roll is horizontal just think imagine yourself sitting in a in in an appealing church people will sit in rows then when you're working down the eye it's going to be in columns so if we're going to attach this to it if we're going to attach anything that that exists in a row that exists in a that exists in a in a vertical position we're going to be putting them in a column but if you are doing something that exists in a in a horizontal position then we're going to put all of it in row so the first thing that we'll do first thing first we'll go ahead and add a an image on this particular column and how do you do that simply click on the plus sign and say image that's it if you were able to do this congratulations you've been able to add your first widget into the fall say image and then we'll go ahead and give the image a height and a read if you go back to our figma design file you can see the height is 286 by 464 that's the height but we want but since we're not adding all this to it because it's going to make the cost longer we're just going to allow the image to span or through we're going to allow the image to spend all with and we're just going to focus on the height of the image which is 464. so go back here and click on the image and we'll say we want your height to be four six four six four pretor and want your width to be 100 so which hair can be a hundred percent or if we want to do if we want flutter flow to give it to an infinite width we can just click on this button right here click right here and it's going to give it an infinite waste and then we can also determine how we want the image to be our image can be BuzzFeed you can see our image can be contained you can see it can be you know the cover so all this does not make really make sense now when you're trying to use it but I would ask you to go for the fill all the cover it makes sense for me a whole lot more now now that you have this image you can change the image and make it whatsoever you want to there's going to be an assignment after this and next I'm going to add this we're going to add our test like so and I'll go back to my figma file and this is the test and I'll just copy it and the font we're using here is the Laura font the weight is 500 and the size is 24 BX we'll go back here and this is going to be I'm just going to paste it here Ctrl V and the fonts that we're using is the lower font it's 500 font family it's Laurel so we're going to put the Laurel font family and this is going to be a 20 PX 20 or 24 BX I think it's um let's just go back and check this okay yeah it's a 24px fund 24px so and this is just watch what happened when I try to expand it so this is going to expand it in a vertical Hazard vertical axis and this is going to expand it this is not gonna this is going to make the test shrink so you're gonna make the test shrink why this is going to just gonna expand it in a vertical in a vertical axis I'm going to tell you how to make that to make sure this doesn't happen later so uh I'm just going to leave it this way we're going to fix it later but let's just go ahead with a column first then the next thing we're going to do we're just going to put in another test we'll put in another test that's it and this test is going to be we'll go back to our figma file I'm hoping that this is not going to be very long keep this under 10 minutes so go back to your figma file and um go back to our uh come here and just put a test here and put a test here and this is going to be leave it as a body this is going to be 400 like so it's gonna be 14 and that's fine for our body test just keep it like just just keep it that way and lastly we're going to add a button to it and this button right here is saying yes that's what this button is saying and one thing that some if there's anything that I love styling in color flow I love styling buttons because they're very flexible I love styling buttons and I love styling containers I'm going to show you about containers later as we go on on the course and so let's go ahead and style this button if we go back to our figma file we can see that our button the the background of our button is is white and we can see that our button has six has a font weight of 400 uh effort weight of 600 size of 14 and the font itself is inter so we quickly go ahead and do this our button fill color is white so I'm sure you're taking note of how I am changing the color bottom three color is white butter color is black not like it's um yeah butter color is black and butter radius is 15. that's fine and you can see what we have there and then our test color is black this color is black this right here is 14. then we have no more and then right here we have inter as the font so we have Intel as the font and here we can also increase the width so we can see our heat is we can increase the width of the button 300 so you can see what I've done I've increased the width of the button but we still have a bit of an issue here when we're designing this we have this which is not going from left to right we have this we have this this this we so we have to we have to add things called potting and margin to our application so the easiest way to actually do this we'll do it into we do it here we do one way here and as we go on and the chords we'll do it another way so thunderflow has this thing that caused rap so I'm just gonna wrap it in the container so when we right click scroll down say a wrap we get this time I'm going to wrap it in a row remember I told you that when you're doing something that has to do with horizontal you put it in a row when it's vertical you put it in a column so I'm gonna I'm just going to click this right here so you can see what happened it's going to take the entire space of the container then if there's any space left in this visible area it's going to take it so I'm gonna forget about it then I'm going to go back to the test just watch what happened to the test now place it see what happened see what happened to the test I hope you're watching this so right now the test is taking full it's expanding the entire area that's what's happening so let's see what happens if we change it to have 20 and now so then we're gonna I'm gonna click click on this role and then I'm just gonna expand everything on the row so that's what I'm gonna do I'm gonna click on the row I'm gonna click on this particular row and I'm going to add a part into it say 20 party on top of it and I'm going to click the roll again and add a 16 on the side add a 16 on the other side and I'm gonna add a 20 below that's what I'm going to do and now watch what I'm going to do with this I'm going to drag this other one and put it here I'm going to drag this one and put it here and but sometimes something is not right here somehow click this again let's see what happened so um this is my test well drag this okay okay okay something is wrong over here so this is not supposed to happen so I'm gonna take it back control Z to take it back so I'm just going to take it back and leave it that way this I'm gonna pull this in a row in a in a row also wrap inside the row I'm gonna explain to you why that didn't happen a wrap inside a row also then I'm gonna give it a potting of 20 of 16. give it a padding of 16 then I'm gonna give it something on top just just gonna leave it leave the top and give it something at the bottom so 16 at the bottom that's fine and this is my my test yeah I'm gonna leave it this way and then we can click on the next button and move to the other page so this is what I want you to do for me this is this was pretty long about 15 minutes is what I want you to do for me you can see what I have here on the figma file so I have the I have the test I have three other pages one two three and each of them one say Nest nest and continue so what I want you to do for me is go ahead and create the other two and join me in the next lesson if you're watching this on YouTube just go ahead and pause it pause it create the other two and join me in the next lesson where we get the design more pages so I'm going to go ahead personally to organize my own page and when I come back I'll tell you how I did it what I'm doing mostly I'm just going to be adding parting you know padding and margin to it that's what I'm good I'm gonna be doing when I say partying I mean distance between the element and its container when I say margin I mean distance between this element and this element is called a margin so I'm just going to go ahead and add that and I'll see you in the next lesson before I show you the result of my own design I would love to show you a couple of things about designing pages with Fallout 4. you would definitely be using the UI elements but there are a couple of things that you should note when you're picking your Design Elements just like the way you saw me using a column there are other instances when you don't want to use the column but you want to use you want to use other things or you want to use other elements so you will always lightly start with a column especially if you're doing something that requires the scroll to be infinite for example if you're scrolling through an Instagram and if you're scrolling through an Instagram page if you've noticed the scroll is always infinite you never ever get to where you're going screw it from now to the year end you're never going to get to the end of it because it's infinite it just keeps scrolling as fast as possible when you're doing such a thing you want to keep everything in a column and when you were displaying a whole lot of lists you want to use it it's something called a list so there's a I would get internal flow called a list that works when you're displaying a whole lot of things called list so let's see if you are the widget so when you click on the on the plus side you would see some of the layout element so you can see container row columns stock Frost Define card list element grid element and spacer the one you choose depends on the the situation depends on what you what you need for example like I said before if I am aligning things in a row I am going to put choose the row we get so let's say for example you want to design the top bar of our application I'm going to choose a row and just drag it in here so this is a row and inside the row I can have other wickets inside the row so a row can contain a row a row can contain a column it can contain every other element so let's say I want to have a I want to have an icon I want to have an icon like so and then I want to have a test like so if you look on your right hand on your right hand side which has which is the property panel you will see some alignment a row you can align everything in the middle just by clicking this I can align everything to the right just by clicking this align it to the left the default is that your row is left aligned by default and I can align them space in between when I do spacing between you can see that the icon goes to the to the left and the chest goes to the to the to the right if I click it again you can see I can say space around so you can see there's a whole lot of space on the left a whole lot of space on the right normally you go for this one which is the space between especially if you're creating your top menu bar but but you might be asking yourself Paul this is too close to each other it is too close to close what do I do that's the reason why you get to put a margin you get to add margin to your design if you are designing something where the image done that doesn't have to touch the edge you can put the matching or the you can put the padding on the on the column here so for example I will put a pattern of of 12. probably 12 on the left put a pattern of 12 on the right and put a parting of 16 on top and put a part in of 16 below so what this means is that every element that I put into this page will just stay inside this container it will take this padding from its parent so that's for row let's go ahead and add a column so this is a collab I'm going to delete the row so I can add a column so this is my role this is my column so if you notice you will see we have I have two columns inside one column and another one so I have the parent column and I have the chart column when I click on the parent column you can see it's panning from top to bottom but it's not spanning from left to right how do you make it span just simply click on the correct axis make it stretch that's what you click just simply make it stretch and it's going to span if I click this it doesn't span if I click this nothing happens I click this nothing happened but just click on this and it's a stretch from the beginning till the end so also when you click on these two you can see we have this here it's spanning from left to right and width but the height it's supposed to take the height of the children that's what always happened with a column the column will take the height of the children hence the reason why you're not seeing anything called height here if I click on expansion and say expand see what happens it will take the entire height of its parent when I mean parent I mean this this is the parent I'm going to rename this column here and just call it parent when I'm rename it and call it parent and then I'm going to call this a child so this is the child over here this is the child and a parent can have more than one child so if I go ahead and duplicate this you can see what happened one thing that is cool is that it even if I have three children inside the parent they will all split to get they will all divide themselves to get the total height or width of the container you can see I have one child I have two child C of child one child two and they're still within the same container if I add another one to it you can see child one two and three stay inside the same container that's the beauty of having of using a column a column will only take the shape of its children or its parent and also you have different axes here if I go ahead and put a test inside this column just watch what's going to happen put a test inside this inside each of the column like so you can see they're all positioned to the top why because the main axis the main axis is saying start if I put this it's going to go between if I put if I click on this it's going to go below if I click on this this only works if you have two elements inside the page if I click if I add another element here test you see what happened this is space around if I click this this is speaks evenly sorry then this is space around and this is space in between so that's basically what you would use a column for and you could also use a column to display a list but this list must be very few it must be a very few list maybe like 150 but you are displaying things like a thousand then you have to use a list itself so I'm going to take this away the last three get that I'm going to show you I'm going to show you a container so this is the last video I'll show you so it doesn't get but you don't get bored I'm gonna show you a container after showing your container we're gonna go back to our class so click on the container so just like you can see a container is very very similar to a column but a container does not take them it takes the weight of the parents but here you can see on the property bar we can specify how high the container will be how wide the container would be I can say I'm going to give my container a 500 in height and I'm going to give it a 80 percent in width 80 percent in width we'll give it 80 in width and a height of 500. and also we can see we can give our container border radius so I'm going to give my border radius of 30. you can give it a border radius and we can give it a butter color so you can see the way our container looks like now we're giving it the butter radius and we're giving it a color so that's the thing about container a container you can easily style the container and give it any shape that you want to you can start the container give you things like both Shadow gradient and a whole lot more and another good thing is that you can put a you can put a column inside the container yeah you can put an infinite column inside container so if we if we're expanding it to take the shape of the parent which is which we just did make it take the shape of the parent and we'll go ahead and remove the height let's remove the height so you see what happened right make it infinite then we can go ahead and say pull the column inside of it so you can see uh let's go ahead and put a column inside of it there's a column and and I want you to know note one just follow me so you see what I'm doing follow me I'm going to put another row if you look at it a high a wig gear a container cannot take more than one child a container in fluid flow cannot take more than one child but the column can take many children so if you're doing something in a container you would have to put it inside a column so you style the container and then you put it inside the column so for example if you want to put a test here I'm going to put a test here I'm going to put a test here so you can see I'm going to put an image here so you can see everything is fitting inside the column but the container itself can only take one child so that's it for that we'll come back again and discuss stock and a few others let's go back to our pages so we have our own button here page Warren we have on boarding page two and then we have a Blog on boarding page three and Page Three I'm supposed to add continue here I'm supposed to say continue as I'm supposed to say so if you were able to get this right awesome awesome if you weren't able to get it you'll fix it and join me in the next lesson thank you for real I want to say congratulations I mean you're such a trainers watching it through our past 14 minutes or 20 minutes is such a high clean task my goal is to make sure that at the end of this course you are able to create your own mobile applications and don't forget to leave don't forget to leave comments below if you have questions for me or you want to have further discussions so let's go ahead and discuss something that's super cool so this is our figma file and you can see this is the way we're doing our login sign up yeah sign up with email sign up with Apple sign up with Facebook and login so let's go ahead and do something very similar to this and when we're doing it I'm gonna be explaining a particular kind of layout to you called stock just like the way the name sounds stock what do you do with stock you put things on top of it that's it if I say stack the cards on top of each other what I mean is that put it on top of each other put it on top of each other neatly that's what you're doing so I'm going to create a new page we're gonna say sign up sign up alt it's the queen so this is not a sign up screen this is just a sign up screen okay that's fine so sign up screen so what we're doing is that we'll start in remember and the way to start first we're using a column right this is a column that's what we have here and see what I'm gonna do I'm gonna put the stock so you can see inside the column I put a stock or inside the stock I put a column it's fine for this for the height of the stock I'm just going to give it a hundred percent I'm gonna give it a hundred percent the reason why I'm giving it 100 is so that it spans from top to bottom I can take a world column you can take away the column and give it a stock you can take away the stock and give it a call let's try that I haven't tried that before let's just cut this let's give it a stack only let's give it a strike only and see what happens so you can see we have a stock from top to bottom so it works similarly but I wouldn't advise you to use it in a in an app where you users have to screw you didn't have to screw fine they have to if they don't have to scroll stack is cool if they have to score use a column so you can see something that's very noticeable here you can see we have the top stock and we have the bottom end Stark you arrange things on top of each other if you've seen um udemy application are you saying any e-learning application you can see that things are arranged on top of each other or maybe you see a traveling application you see things on top of each other let me see if I have a let me see if I have something yeah okay you can see we have an image at the bottom we have a test and we have buttons so this is not really a true representation of stock even though it's a stock too but let's find something a big cool let's find something that works let's find something um okay let's find something that works uh I can't really find anything that I could use to okay let's just go ahead and build it I think that's the easiest way to teach you how to use a stack so let's go ahead and build it so um we have our tester 64px that's it so let's go ahead and try this first thing first I'm gonna bring inside the stock I'm going to put an image remember that background image right that's what I'm going to put in here so you see the image right there and the image I'm going to give it a infinite Heights and infinite widths you can see the image and I'm going to make it boss fit you can see it right so if you're wondering where I'm getting the image from it's a download it's um the follow flow API full of flow is getting the image by itself so I'm not really doing anything but you can use your own image simply by going to a place like almost unsplash like unsplash collect your own image look for a vertical image on on unsplash so this is a vertical image uh let me look for an image of a lady since we are doing things that has to do with a Blog ladies love to read blog a lot I don't know if you guys do but I know ladies love to read blogs a lot um so I'm gonna use this picture of this this the picture of this lady I'm going to say copy image link but I could find something that like this like grayscale okay let me find something that's grayscale okay so I'm going to take this one copy image link and I'll go back to our application and just put it here I'm just gonna play here so you can see we have the same application the same image that we have on on Splash so now that we have this the image is on top of this now now that we have this we have to go ahead and bring in a test so put a test or you can put a row or you can put a test so let's just go ahead and put a test in here so you can we can put a test and we can simply drag the test to any coordinator we want to this is where the test is we can drag it to any coordinate we want to and I'm going to give the test a white color I'm gonna give it a white white color font size I'm going to give it 64. give it a white so this is a this is a test and for fun family it's Laurel that's a fun family remember it's Laurel and let's go pick up what the test is saying so organized and mix as I'm saying and go back to our application put it right there organized and makes your closet so we'll put it somewhere around here so you see it did an amazing feature your ability to drag something and it stays the same way so you don't really have to think about the coordinate it's just drag that's what you have to do so we make it a bit thinner organized and miss the same way okay now that we have that the next thing we want to do is to add a few buttons so one two three continue with email let's just copy this continue with email continue with you know all of it that's it so um we'll do this two ways first is to add a button first is the other button and just drag the button downwards right there drag the button downwards and remember that the color of our button is going to be it's gonna be black that's not the color the test of our button is going to be black the color is going to be no color really but just no color really but just making white um then uh we're gonna have this is 250 and our test is going to say continue with continue with email so um so we're gonna have this as 400 and then I'm gonna have this is 14. I'm gonna have this as 14. and the next thing I want to do is that I want to make sure that this fill color there is nothing in there so I'm going to just drag it down and say use color you can see there's nothing there anymore and then I'm going to turn the tennis color to white say use color I'm going to turn the test color to white use color like so and then the butter I'm going to turn the border to White like so and then I'm going to turn the icon so the icon is an email I'm going to turn it like so so this is the way it's going to look like and one other thing that you can really do is to turn this re-wrap this widget inside a column I'm going to tell you why wrap this would get inside the column like so that's one thing I think you can really do wrap the widget inside the column make it as Tiny as possible and move it downwards I'm going to show you why this is super awesome when you wrap it inside or inside the container and I'm just going to duplicate this button you know Ctrl D to duplicate Ctrl D to duplicate so remember when I figma right here we have three different buttons one two three we have three different buttons so you go ahead and style those buttons in the best way you can and join me in the next lesson where I'm gonna explain to you how I finished mine I really want this to be a practice based lecture and that me just going on and on and on go ahead and try this pause the video try this and join me in the next lesson thank you to do something that look like this it's fine if you weren't able to do it no worries I'm just gonna walk you through how I did this so the first thing I did was to was to put everything inside the column like you saw in the previous lesson The Nest I added the test element and then to give it a spacing I gave it a putting so you can see I give potting bottom 16px padding bottom 16 16. so everything has 16px padding bottom and this is the last one where I added a test to say if you're already login I want you to to say if you already have an account I want you to login so that's it let's go ahead and get into the next lesson use how to use a phone so how do you use a form in first floor same thing we're just going to click on the plus side and we're going to say sign in from we're going to say sign in I'm going to say create so I'm gonna do this I'm gonna do this one and then you go ahead and create a login file sign up form is for me and the login form is for you this has to be a project that you're doing as I'm as you're learning else you're going to forget about everything don't just watch and be like I know it now but instead word to pass and do it is done how many you are how many tutorials you consume it is basically how many you consume and then you can use it so let's go ahead same thing with our column that's that's how we're gonna do we're going to create something very very simple and what I'm gonna do I'm just gonna add a an image on top I'm going to add an image on top I'm going to give it a percentage I'm just going to say 50 percent 60 of the image I'm gonna give it a width just like that and I'm going to give it a buzzfeed like so Phil that's the image I'm going to use you can use any image of your choice but that's fine and then after doing that I'm just going to give it a container so I'm going to give it a container my container I'm going to give it a container I'm going to say 20 that's a 30 mark on 30 and I'm gonna give it a full waste yeah and then my my potting the potting of my container I'm gonna give it I'm gonna give it a few just give it 20 20 20. that's fine and inside my container I'm gonna just put a column inside of it I'm going to put a column inside of it it's going to take the entire area of the container and then I'm gonna add a input I'm gonna add a test an input we get it has feet so this is my first stress feed yeah then I'm gonna add another one I'm gonna create this one and then I'm gonna fix this one and then I'll add another text feed so this is going to be for email so you can see my test view there is nothing in it says you don't even know it's a test feed I'm going to go ahead and fix that I'm gonna add an email and then my border other color is going to be like sure so you can see now we have a bottle color so I'm gonna add a bottle color I'm gonna add something really cool um we have the test um we have the hint then we have the input butter type is not going to be on the line it's going to be outlined so that it fills the entire it fills the entire um the entire rectangle it's going to be outlined like you see and then I can add a trailing icon so I can add an icon to it um where is it I'm going to add an icon to it a leading icon I'm going to call this email like so and that's it so it's just going to be really simple and then I'm gonna add a I'm gonna add a butter I'm gonna add a butter radius to it so bother 15 that's going to add to it so if when I click all this it's gonna it's just gonna give it the same the same amount to everything around it and my potting I'm gonna call this eight I'm gonna do eight all around content parting so this is going to affect only the content that's inside so when the user is typing that's when it's gonna affect it and then I'm gonna give a padding button of eight padding bottom of 16 yeah I guess I'm gonna give it then I'll just go ahead and duplicate so we can see email this is going to be a password that's what's going to be it's gonna be the password feed for us and you see the difference between both of them so one is the email email feed and the other one is going to be the password so uh what's the way I'm gonna fix the password I'm going to tell flutter flow that this is a password screen this is a password so the key Parts can be used differently if I say it's a password the key part is going to be able to Friendly so you can see password feed I'll check it that's it I'll check it um autofocus that's fine autocomplete no because I want maximum security and then for my trailing icon I'm just going to change this to a key probably I'll change this to a key change it to a key like so that's my password and you know you can see the eye icon right there and I'm going to duplicate this again uh this is also going to be a password but this time it's going to be re-enter password so we enter pre-enter password oh that's that's that's the top so I'm just going to drag it under re-enter Pax world and lastly I told you how to drop a button I told you how to put a button and then this is just going to be a sign up is going to be a sign up and remember the way we fix our button our button is 400 and then we have a full color of no fee color we have no fee color yeah we have no free color and then we have our we have our color our test color what's our test color I test color it's black that's our test color and a butter color is our butter color is black that's it to just give it that color is this color yeah like so and that's the way we've been fixing our button since but you can always play with it you can change it you can do what you want to do with it so meanwhile the the goal of doing this is to learn how to impute forms how to add forms that's the goal of doing this how to add forms to your website so while doing it we're creating our blog that project as we go and we're learning as we go so you this is your assignment now this is the sign up screen and you go ahead and create a login screen remember when you're creating login screen the only thing I need the only thing your users are going to use to log in it's the email and the password they do not need to re-enter the password and if you want to put some style to it you know you want to stretch yourself you can design the layout in a different way it could be a bit more complex if you want to your image can be at the bottom while you have all this um your image can be at the bottom where you have the sign up on top of it you know just play with something and you see me in the next class and don't forget don't forget to add this to it don't forget to add um already have an account test you know if I already have an account you know something like this already have an account that's gonna be a question mark then you say login don't forget to have half days and give it it's you know just give it a very smooth a very smooth podding and style it the best tool that you can so go ahead do that and see me in the next lesson and we'll compare what you did and what I did and let's see what's good but don't worry as long as it's a sign up but is it allows you to sign up it's fair and it's okay I'll see you in the next lesson I hope you were able to create something cool so I just created this this is pretty easy pretty straightforward um if you had a hard time trying to create this no BX you know no um don't be too hard on yourself it's something new that you're creating it's something new that you're getting started to use so I think you should you know take it easy and you know just be cool so this is the way my sign up my sign up button looks like I said sign up up you can save and I myself are making mistakes with the spelling so I said sign up pop up and then this is my login page and hope you did remember to change it to login and not sign up and then you also remember to say sign up you don't have an account sign up so this is the email let's go ahead and change this from test feed to login email so the reason why you're doing this is so that you remember so that you can actually pick the right you can pick the right one it's a login email this is just the right thing to do um because sometimes you might have so many so many forms and you wouldn't know the right one to pick and you end up making a mistake so now that we have that what do we do next we have to create another screen this screen is going to be the home screen so remember if a person is really if a person locks into a Blog application well they've come there to actually read and they've come there to read something they come they've come there to read articles that's the reason why they're there let's go ahead and create that particular screen so I'm going to just change this to White I just love white use color oh I'm going to change it to White it doesn't change I'm going to change it to White and for this I'm gonna be using another layout called a list that's what I'm going to be using there are two different layouts that you would use if you want to populate your screen you want to show your users a lot and lots and lots of information one you either use a list or you would use agreed they do the same thing but greed is more some sort of like a picture like for picture but for at least you can use it for anything it could be a list of anything it could be a list of homes it could be a list of schools it could just be anything but greed is mostly tailored towards a picture the other ones there are other Farms there's something called a wrap but we're going to talk about that later if we have time to do so but let's go ahead and see what agree what how to use at least to represent all of those so now I have my column remember I'm gonna take this eyeball away I'm going to take this out by the way we can always bring it in any time if I click this I can you know choose an app bar anytime I want to so that's fine so remember what I said to you before that a container will always if a child will always take the the width and the height of the parents if you allow it so what we're going to do we have a column I'm going to add a container and for the container I'm going to give it a hundred percent 100 100 width so it takes a hundred percent of the container and sometimes you might give it an infinite with 100 infinite a very very similar so here then we'll go ahead and add our list view to it remember we'll display in a list of posts right that's over this plane so this is our list view this is our container this is our list View and inside the list view I'm gonna add a container or so so you can see a marginal container inside the list View and I'll just make the container 300 uh PX wide and uh to just for you to be able to understand that we have a container in there I'm going to give it a I'll give it a height of 16 all around which is going to give it a height of 16 on the round and I'm going to give it a bottle radius of 15 and um and I'm going to give it a butter color I'm gonna give it a better color like so so you can see we have the container inside of it and this is a single list view container I'm going to show you how as we go you're going to understand how it works so um inside the list view we want to have a column inside of it the reason why you have the column inside of it is because your container cannot take more than one element so you just add in a column inside of it seminal pull the column inside of it and inside this colon I'm going to add an image I'm going to add an image inside this column this can be a video and this can be an image so if it's a Blog you may want to put a video or you might want to put an image or you can put both and show them based on setting uh just based on certain conditions being true or first so this is my image and then I'm gonna just call this 50 so so this must take 50 so let's just make it 150 150 200. so I'll call this 200 and waste is going to be like sure it's gonna be like so and then I'm gonna add an image to it but I'll add an image to it and um this image is going to be some sort of like headline this is going to be the headline like so and for the headline it's going to be it's gonna be the headline and let's see if we expanded what happens not good it's gonna be the headline and for the image we're gonna make it a row so I'm going to wrap it inside a row like shows like it goes so that I have better control of that particular image and then I'm gonna give you a part in top of 16. I'm going to give you this 16 and then I'm gonna also I'm gonna also add a another another test add another test and I'm going to wrap it so I'm going to wrap it inside a row I'm gonna wrap it inside the row the reason why I'm wrapping them inside the row is because everything is starting in the middle but we but if I if I move this element to start I don't really have to wrap it inside a row so I'm just showing the different ways for you that you can you know you can make things work in here and it just gives me better way to just style everything if I decide to or what I can do is that I can put a column again inside here I can put a column here and just put a column and stack all this inside the column so inside this column this is there's a role inside of column so I'm going to take the rule away I'm going to delete this one and I'll bring this one in here so I have two tests inside I'm gonna put the two test inside the column so I'll wait until it shows the red so wait until it shows the red so you can see we have two columns so then I'm going to expand the column like so expand it and then I'm gonna give it a I'm gonna give it a potting top 12 padding bottom 12 padding left eight part in here eight and remember we have this column and this is going to be 24 24 PX and this is going to be 500 medium and a fun family is Laura so don't worry I know you're tired of changing the fonts up like this but we're gonna change it I'm going to show you how to how to make it better so you don't have to keep repeating yourself every time someone said this is the post body so these are post buddy and it's 15 we're gonna make it normal that's fine and this is not post body these are image this is everything that we want and then we need to add something so we need to add some call to action putting put this in and we're going to take this to the left remember the last time we saw blog right that's the way it looks like then it's going to be read more and this is going to have a color so color blue like so and this is going to have there's gonna be a big girl or like 20. 20 I'm gonna make it slant make it light so you read more like so and you can see this is this is just popping out you know this is popping out over there this is this is way bigger than our container so that's why so I'm gonna increase the size of this container of this uh the container housing list view I'm just going to change it to like 350. 350 like so and that's basically what I'm gonna do I think 350 I think 350 is a lot to give away so let's make it 320. okay so that's fine this is a list View and that's for today's part you know when you're designing a list view you just design a container only that's the way you design a list view you design the container so to to make the list view come alive we have to fetch the data from somewhere that's how you make the list view come alive you fetch the data from somewhere and then a lot of flow sees that you're duplicating you're fetching a whole lot of data and then it duplicates it well we're not going to bother about that now stay on the list view I'm going to show you a few other things this is the list view again and then we see we have different access we have vertical and horizontal axis what you have now is vertical axis and so it's stacking on top of each other but if I click on horizontal you can see the way it says it's just it's not stuck and it's go inside so it's like you can swap it so that's what it's doing it's just looking like you can swap everything in there safe look at my container so I can make my container like so this is my container and um what's making this swap so my height is 200 but it can be it really can be uh can be fixed because I have a width of a hundred so if I have an infinite width five weeks of um so I have a width of a hundred if I have a width of um of a hundred percent so it should stack in very well and then you'll be able to just swipe so that's basically the way it works but uh we're not going to bother about that now I'm gonna go back to I'm going to go back to the vertical Arrangement that we had before so you yourself go ahead and create something like this and then you join me in the next class where we're going to discover a whole lot more about for the fall and pause it you know pause the video and get started thank you to fetch data from a list view you would have to be fetching from an API or you would have to be fetching from your database hence the reason why we have to set up our database first before we can do anything before we can do any type of connections we have to set up our database first and that database that we're going to be setting up is going to be is called Firebase and I know there are other the other thing although database that we can use but now let's talk about Firebase and we'll talk about other Alternatives later first thing first go ahead and say firebase.google.com that's what you say and then go to console so on Firebase Firebase it's it's it's not free but getting started with it is free so but as you scale your application you would have to put in your card and pay and there are a couple of things that you would want to do onto the floor that you definitely have to pay for so it's a Firebase again I'm going to redirect Firebase it's a it's an API as a service you know a backend as a service that's what it is so almost everything that you're doing onto the floor it's front-end but what you're doing with your your back end is running on Firebase your custom functions your um you know everything is just running on Firebase and that's why you are able to build very complex application using photo flow first thing first go ahead and click on other project and then here you give it a project name give it a project name and your project name call it anything so I'm going to call it just real that's my project name don't worry you can always remove the project from your floor account if you're not comfortable with it click on continue and then create a click on continue Google analytics I don't want to allow analytics for this project because I think it's just a play project that's fine and I'll click on create and once you click on create it should take you only a few seconds depending on where you are and depend on your network capacity it's just going to take you a few seconds and you will have your bike in ready that's how fast it is to create backhand before and you're doing this you're not you're doing this alone you're not doing this with the help of a developer that's how cool it is when you abuse with no code don't forget to subscribe if you're watching this on YouTube so now that you have this now that you have this um you're going to be on the spark plug you stay with it it's fine you're comfortable with the spark plug and once you're done with this the next thing you go ahead and do is to click on the click on the build when you click on the build see firestore database so we're doing two things first thing we created a project that's the first thing we did and then now we are creating a database where we'll store everything in our project and then click on create database so I I advise you to start with the test vision of the database and not the production version you can always move to the production version at the click of a button so click on next just enable and that's all you have to do once you've created this promotional client this provisioning Cloud fire straw the next thing you'll go ahead and do is to create the storage itself because your images your files will have to restart somewhere so click here say storage and then say get started say test test mode and say Nest say done so this is where you're going to start your users are going to store things like images you know files that's coming from your application if this storage is not really has not been created things are not going to work very fine for you foreign step once you're done with this let's go back to our surgeons click on users and permissions add member and this is where you're going to allow filler flow to take to this is where you're going to allow for the flow to have admin right to your application so you go ahead and say a detail so I'm gonna add five Firebase at photo flow and say add member to it so once you're done with adding members to it the next thing you do is to click on Advanced permission settings you need to give a fellow flow more right Cloud function admin right and service account user right that's what you have to give them so they can add data and remove data from your Firebase account if you don't want to go through all this then you would have to use another type of database so you don't have to give Firebase any or any any right like editing right to your application but it's not really bad it's not really bad your app is still going to be very very safe so you come here where you have Firebase at flutterflow.io and you come here and you click on you click here you know just click here and make sure that this is the this is the project that you're working on click here and say and say add another row the router you're going to add is service account user that's what you that's the rule you're going to add just scroll down say service account user yeah right here service account user and add another row and this role is going to be called cloud function admin right there click the role and say save just stay safe and that's all you have to do once you do this you're almost done last copy this project ID the one you see on top the one immediately after the slash project Ctrl C go back to your application go back to your application click on settings click on Firebase add the project ID here and say connect now it's it says success that's that's one that's the first thing let's say Auto generate config file say also generate config file and this is your time of Glory once you do this what this means is that you have successfully connected your flood of flood of flow application with Firebase and you deserve a real drink you deserve a very real like you deserve a drink so that it toast for that and so congratulations you've been able to connect your Firebase and your project so once we're good with this the next thing we'll do is to set up the database itself that will house the application so go ahead and try this fix yours like this and join me in the next lesson perhaps Firebase and connect it all the way with the flow you should you know give a round of applause to yourself you've been doing great so now that you've been able to do that there are two-way stream to set up your database instead of fall one of them is to set it directly from here sell it directly from here and it's it's less work why because you've connected your Firebase and your photo flow you can set it up but if you want to do this you must have the the the plan you must have a paid plan if you're on the free plan you can't it's not not possible for you to set up your data collection here and then it shows on your Firebase it's now possible first let me explain a few things for you throttle flow referral to its database as collections so whenever you hear me say set up a new collection I'm saying set up a new data type a new database type that's what I'm trying to tell you set up a new collection so it has a collection then it has data types data types you can create yourself you can create it yourself you can create yourself a collection a collection is similar but a collection is a a collection comprises of different data types Falafel comes with digital types that it's created for you already so you can just pick from it but for you and also you yourself you can create your own data type and tell to Florida flow what you want it to be so I'm going to start with a free plan first I'm going to start with a free plan this is how you do it if you're correcting with a free plan first you come back to your Firebase you will click on database yeah and then you say start collection for example on our on our Blog the first thing that will the first kind of collection we want to create will be a user collection because you want your users to be able to sign up you want them to be able to log into your application this is some sort of a social let's call it some service to show blog but if it's just any blogging app you wouldn't require anyone to sign up you will require them to log in you just only require them to come to the application view that to view the blog view the Articles watch videos and what your routes met too so you can make money so we're just going to refill these as some set of a social plug-in application where people can communicate with each other you know do a lot of nice things so first thing first I'll just go ahead and create my user so I'll create my user Auto ID and then I'm going to add feeds to it so you thought will have a name Asia will have a name and they type you can see there are different types you have string you have numbers Boolean map array new timestamp geopoint and reference this is the reason why I do not like creating database here because the the type is very limited but you're creating inside a flutter flow you have a lot of type to choose from including colors and and a lot more so user will have a name a user will have a password yeah the password is a string a user will have a photo so photo here is also a string yeah that's what it is because it's it's just a path it's a string two a user will have what else um photo name will have a display name which is also a string so when you're done with this you just go ahead and create safe now what happens is that you now have a user collection with no records and what happened is if you say add document it will ask you to if you say add the document it will basically ask you to feel all these things like add the feet no you're not adding the feed add the document it will ask you to enter all this another thing that you want to do that you will do after this on the free plan is that you go back to your photo flow dashboard and create this the same way you will create the user field you create a collection called user and the same way you've created them here display name password and photo is the same way you will create it here with no spelling error if there is a spelling error it will work it you have to create it with zero spelling error that's the reason why I think if you want to you know you want to gain the full benefit of working with other flow you just go ahead and upgrade to um a pro a Pro Plan so it makes a whole lot of sense for you so there's something else you have to do if you want your users to be able to log in and sign into your application remember we have created the user database and that means we're expecting people to be able to authenticate so we have the test flutter flow hey we need you to allow users to sign in Via a particular method so what you do is that you come you come back to your your database right here on the left hand side click on Authentication and you say get started so everything you have to tell Firebase to do everything before he does it and for the providers we'll click on email and password and we'll say enable stay safe if you want to if you want people to be able to authenticate via Google your clip click on Google say enable and say save my email I'm just going to use my personal email as project email and say save so for you to be able to use Google on Apple devices for you to be able to use Google and Apple devices you have to be able to use apple signing I think from last time I checked you can correct me in the comment section if it's wrong um you need to be able to authenticate with Apple sign in if you want Google to work so the best part of it if you know you're not very comfortable with setting up all this the best way to do it is to allow users to sign up via email and password so you don't have the headache you know just allow them to sign in with username and password there are tons of other providers that you can use depending on the the type of application you're creating if you're creating applications for techies you can just use GitHub straight away so that's the only thing you will do and then you go ahead and map your database with what you haven't filled for I'm not going to come back here again to set up set this up I'm just going to go back to my flutter flow and do everything from there and for this this collection I'm going to delete it but if you're on the free plan you know what I what I told you you created here first all your database schema you create everything here and then you come back to your dashboard and create the same thing without any spelling mistake so I'm going to delete this so now this database is empty I'm going back to my flutter flow I created my user and I'm going to say user will have a name a user will have a name and my name is a string so you see what I was telling you about flutter flow has a whole lot of data type more data type than the Firebase console but it still the same data type but it's just yeah for the phone is just just making a simplified so name is a string I'm going to say create next I'm going to add a display name play name like show and I'm gonna say string and I'm gonna say verify so if your app requires you to check if your user has been verified then you want to add it and you see I'm choosing the I'm choosing the Boolean data type only I need to type is like a yes or a no data type so if it's verified it's yes if it's not verified it's hit no so go ahead and say create and then I need the photo this is not very necessary for a blogging app but for the sake of this class I'm gonna add it to it photo here is going to be the image part create I would say created art so this is the time the person joined the application created uh guess what it's going to be it's going to be a time stamp so if this person is making changes modified modified all right modified oh it's going to be a time stamp also if I'm getting this person's location where this person is located maybe I am tailoring a Content based on location then it's going to be its latitude and longitude so that's it for this and then we'll go ahead and add another collection I will call this both will say create and you know what the post will be opposed to have or opposed to I have on this a title and that title you know it's going to be a string people I started title it should have a description some sort of like the post body and that will be a string it will have an image and that will be an image pass if it has a video it could have a video and that will be a video pause and then you also want to put the time the post was created Created art see the reason why you're doing this so that you can sort it via time yeah so you can study via time a person can have more it can have categories you can have galleries you can have multiple pictures but we're not going to bother about that for the sake of this class so we have the user we have to post and then I want to show you something click here again and say comments say comments and say create so yeah this is a comment and this is a post right so Firebase gives you the ability to link two things together to link two of these things together oh oh I think I've been creating it wrongly this is not supposed to be here this is supposed to be here what I've been creating is a data type what I've been creating is a data type so so so this is the way this is what I did wrong I'm supposed to create it here collection here but I've been creating this to type instead so normally I'm supposed to have a data type like create a collection I'm just going to give a user and they create and I'm I'm just gonna use the so you can see we have the email display URL for the Euro created time and phone number then what I created here was a data type if I wanted to create a new feed I click on the plus sign if I click on the plus sign I can select the data type that I just created the user data type and this particular data type will have all these feeds Asia will have a name a display name verified photo created art modified location it will have all of this field but it's just going to be a single data type I just hope it makes sense to you but with the one I created it before was wrong I would have explained it to type to you again so let me just create a new collection called pose don't worry um we'll stay safe and I'll create social post so Post photo title post see I'm just using a template from soccer flow right here that's what I'm doing so then I want to create something called a I'm going to delete this and I really don't need this delete then I'm going to create I'm going to create another called the comment I was going to create earlier I'm going to call it the sub collection and the sub collection is going to be a post so what this is saying is that these posts have the red relationship this com this new collection which is comments have the Revelation ship with the post so a post will have many comments why a comments belong to one post so we'll create and then you can see it's slightly under so you can see the comment is under the post that's it and then if you think you're making helping your your making sure that your users your users can create posts yeah your users can create a post this is what you will do you will go ahead to your post and then you would say created by created by created by who then there's going to be a document reference and it's going to be a user and then you say okay right so what this means is that a user a post belongs to one user and the user can have many posts and then we'll also come back to the comments too a comment so um a comments will have a description right a combat will have a disc will have a description and then that description is going to be a string and then we have created art what time was this comment created it's going to be a timestamp right there and the next thing is who created the comment yeah user so we say created by created by who that's gonna be a reference if you did you guessed it right that's going to be a reference to a user so user can have many comments or a comments belong to one user and you can see that I'm not creating a relationship to the post anymore because it it's a sub collection of the post I don't have to create any relationship with it anymore so this is the the this I'm just gonna delete this I really don't need this data type I'm gonna delete this this I'm also going to delete this and then we can create a data type folder for this particle for the for the Post itself so I'll just use this to I'm just going to use this to Define what the data type is so I'm just going to say create a data type and let's say this is going to be a let's say this is going to be it's going to be a data type for the Post right it's gonna be a list of let's say social let's just say it is a postal show and this possession will have likes if you have the X and this is going to be a list it's gonna be a list of what it's going to be a list yeah it's gonna be a document reference and it's going to be a list so the reason why this is where this is like this is because a post will have likes by people so I'm going to say create and this is going to be unlike so what I mean unlike I mean people who hate the post and then it's gonna be a it's gonna be a list a document reference and it's gonna be a list a document reference is going to be released and it's referencing users also so now I have likes I have on likes and I can count I can count the number of person who liked and kind of a normal persons who unlike and then I'll come back here and I'll click on the post itself and I'll create a data type and I will call this social and I'll click here and I'll call this data type and I'll call it social you can see there is no social on the database on the floor flow data type template but when I click here you can see there is so short hair so this but this social data type inherit this or this particular data type that I just created so this is a very long this is pretty long I don't like it being this long so go ahead and create your own data type your own database and I'll see you in the next lesson thank you hey if you are a solopreneur you are a an entrepreneur you're a business person or you are some startup Studio looking forward to building your mobile apps I just want to tell you right now that I am free I am open to taking new jobs feel free to reach out to me by clicking on the link below so just click on the link below and you can definitely reach out to me book a call or chat up with me directly on social media so that's it let's get let's continue learning how to build mobile apps and profile so you were able to create that congratulations to yourself that you were able to create your database it's not a small feed and as you do these things you will see red you will see some stuff in red at you know some numbers and right this is just basically showing you things that you need to correct warning it's not so bad it's okay errors it's very bad as your project will not run without the error with the arrow it won't run if your project has an error so you have to go ahead and fix that if you want your project to run so if you are on your if you are on the free version you will have to go ahead and add everything like I told you before now if you are on the pro version all you have to do is go ahead and click on manage content so you can add content to your application so I personally want to add content to this application yes so that I can display it on the screen when we need to so I'm going to go ahead and create on click manage content and the pro version it should open the it should open a CMS where you can just go ahead and add content to your application so I'm gonna I'm gonna populate it with the post only and I'm just going to say our document so if you have a CSV you can go ahead and upload the CSV that's fine but I don't have a CSV here but I'm just gonna go upload it so I'll see you in the next uh lesson when I'm done with uploading my posts YouTube go ahead and create your own post add as many posts as possible as you can and join me in the next um in this lesson thank you if you look at it right now I have gone ahead to fill my documents with this data any if you're struggling to fill it this is how you enter it so I will click on the add documents and then um I will either upload an image or turn it into a URL I prefer to use the URL because it's way faster and I will look for the post that I want to that I want to um report the post the image that I want to use and I'll copy the image link I'll go right here to my dashboard and paste it and then I will I will click on my I will click on my title I will paste it here and click on description just copy as much as I want to copy as much as I want to copy right there so I'm just going to copy this one yeah Ctrl C and I'll paste it right here I'll choose the time so the only thing I'm going to choose is the time and nothing else I'm just going to choose the time and nothing else and to portray folder you can see the feed that I talked about you can see this the like and it's at least this is an unlike and it's at least if I click on it I can add data but this data you don't really add them you're always going to add them dynamically so I just clicked on Create and you can see color flow has created this data so let's go back to our application remember when we're building the application earlier on we stopped here where we created this list view so this is where we're going to fill that data right now and I'm sure you're going to be wow so I'll click right here and I'll go to my list view this is my list View I'll click on my data I'll click on my data and I'll say add backend query remember one of the things we said we're going to cover on this planet flow chorus is working with data setting up Firebase storing with shared preferences reading and writing data to our database these are things that we're going to do in this course and we're doing it really we're not doing it in a very particular order but we're doing it so we'll click on query data type it was a query collection and we'll say what collection requiring the post collection and then we will create a list of posts here we're not counting so don't count create a list of post collection and the order we'll see order by the other bar is going to be created our created date timestamp time posted we're gonna say decreasing that's it and we will say allow infinite scroll which is fine and say confirm then it says confirm and you can see what happens we can see we have at least one list two list three and it just keeps going so once you're done with this the last thing that you want to do is that you want to fill all this place to hold up with the real deal so I'm gonna go back to my I'm going to click on my image and this image normally is coming from flutter flow but this one is going to come from our post now I would say set from variable if say post documents and then it's going to be a post photo this one this H1 test I'm going to say set from variable also set from variable post document is going to be a post title see it's pretty straightforward and this I'm going to say set from variable post document is going to be post description but it's going to be post description but I'm going to say maximum characters allowed I'm going to say 1 4 T the reason I'm doing this is because I I don't want users to be able to see everything so I'm going to let me allow me say 100 I don't want users to be able to see everything yeah so it's just going to cut off and they will have to click on it to go to the other screen for the read more I don't have to touch it you can just leave it here like so because you're going to be adding the on click element to the entire card that's what you're going to be doing so we're not we're not 10 minutes yet so I'm just gonna go ahead and create the unclick element so this will show you how to send data from one page to another you really have to follow this closely you're going to be sending data from one page to another that's what you'll be doing so let's go ahead and create another another post another page I'm going to say plus sign if I say plus sign and this is going to be post detail suppose detail I would say create new so this is my post detail page and I'm don't worry I'm not going to turn this to White it's all right this is my positive page and what I want to do is that I want to add an unclick action I'll add it to the full container yeah to the full container and I just need to add it to one container and it will appear on the others so I'll go ahead and add and click action I will say click on this on this Arrow add action I would say navigate to the post Details page and then when it's navigating I want to send the parameter and the parameter I will be sending is going to be the post itself the current post itself so there are a couple of parameters you can send you can send document reference it's fine you can send a full document it's fine you can send a full document you can send a post reference you can even send a color you can send any of this it's very fine so I'm gonna show you both I'm going to send a document first document and the type of document will be a post and I will say confirm and then I'll pass the current post document to it current post document I'm just going to post it like so to it that's the way you'll pass it another way you can pass you can also say Define and you just go ahead and add perimeter and it's going to be a reference so what you're sending here you're sending the full post that's what you're sending the full post but so when you send this when you send the full post you're not searching for anything fellow flow is not searching for anything because you're just sending the post from one page to another but when you're searching when you're sending a reference what you're telling philopho is I want you to search through the entire database find the post to this particular reference and show it to the user so I would advise if you want your application to be really fast just go ahead and use the document it's easy Philadelphia doesn't have to search it just goes ahead and find that document so if we go back to our post detail screen I'm pretty sure you know what to do here if we go back to our positive screen um you will see that our document is already here yes the document is here already but we can just go ahead and click on the plus sign click on this database here add back and query click on it to document from reference what document is it going to be a post and what reference is it is going to be this post reference it's going to be reference like so say confirm say confirm and that's it so what you're saying is that you're telling for the flow to find that particular document that has that particular reference so it's very similar doing via post and document I just love to do document because it's less stressed and less work for me when I'm trying to get the elements of a of the of a collection so what are you going to do here to show all these things nothing you just need to do the same thing that you did in the other post but this time users are viewing it a whole lot more and you put a back button for users to go to the back when they're done reading so you can see the the pole the the image our image with like show and then I'm just gonna give it like 300 PX for the image with and this is going to be set from variable it's going to be our post document and it's going to be a post photo and then we're gonna have a test underneath this the test is going to be underneath and uh click on the column here I'm just going to float everything to the to the side test is going to be underneath it and this is going to be 20px fun family remember it's Lara that's what we're using and 500 and then I'm just gonna give it top I'm gonna give it top we're gonna give it to the side to have I'll give it to the side 12. I'm gonna give it 12 to the side so this instead of having this hello pose we're just gonna get it from variable say documents and it's going to be tied to a post title and you know what we're gonna add more right you know we're going to add more just gonna add the test yeah and the test we just need to give it a parting left of 12 final right of 12 adding bottom like so and then once we're good with that we'll just go ahead and say what do we want this to be we want this to be the post description and then we'll just go ahead and give it 400 normal and that's basically all we have to do to show the post that's all we have to do nothing else and then remember we have something called a comet which we are going to be planning for in the future the comment section so it's very good that you have what you want to build in your heart first before building it so you know how to structure the the the the elements in your page so if we if we're gonna be adding a comment it means that our comment is going to be done here it's going to be below and our post is going to be on top right so we're going to need two columns to do that or a column and a row to do that two columns or a column and a row so what I'm going to do is I'm going to create a column here I'm going to create a column I'm going to push it forward like so yeah I'm going to expand it and then I'm just going to add all this element inside the column I'm going to add this element inside the column like so so we can see all the elements are inside the columns I'm just going to drag it down I'm going to drag it down and then I'm going to create another column I'm going to create another column this column right I'm going to make it Square level yeah just watch it this color I'm going to make it scrollable so it slides under the other one and this one is going to be a column or row it's fine a column a row it's all right so I'm going to make it a go yeah this is not scrollable this is not going to be scalable but it's just going to be a row that has some sort of a container inside of it so the container is going to have 100 with the container is going to be as long as the the container is going to be pretty long it's going to be as long as the roll itself and then I'm going to click on this top row and I'm going to give it like this I'm going to give it space between you can space between you can see this is where we're going to have our comment section where users will be able to leave comment and this is where we're going to have our post so as I post become bigger or longer it's going to slide under this one it's going to slide under this one and this is going to be static this is this is not scrollable it's just gonna be static I hope you get this I hope you understand how these work and you can give it an elevation to give you some sort of a shadow if you want to it's fine but I just hope you understand what I just did if you don't please rewind it back and watch it all over again so thank you go ahead and connect your pages now you know how to send data from one page to another to go ahead and collect and connect those pages and I'll join you in the next lesson if you're watching this on YouTube go ahead and pause it you know pause it do this first and join me in the next lesson you only learn when you do stuff that's it on that congratulations you've been able to do that and then we're gonna do a few things more just a few more and we're almost done with this course we get into the you know the latest stage of the chorus let's go back to our application to the beginning of our application when did you even think did you think about it when a user click on the nest what's supposed to happen of course they're supposed to move to the next page when I click on the nest because then I'm budding was just onboarding that's what we're doing so click on this Nest button click right here and say add action so when the user click on this Nest navigate to on button two and that's all you have to do go to on button two and say when a user click on it when the user click on it I want you to navigate to onboarding tree then go to onboarding 3 and say when a user click on it when a user click on this I want them to go to the alt page navigate to the sign up odd page like so and this is the page you're going to when the user click on it and then when you just click on continue with email what do you want to happen you want to navigate them to the sign up page that's it the signing page and when they click on I already have an account you want to navigate them somewhere again to the login page navigate to the login page so we're going there and so when they're in the login page what do you want to happen when you click on the sign up we want to sign them in that's what want to happen so this feed we're going to call it we're going to change it call it sign up email sign up email this field is we're going to call it password one and this feed we're gonna call it password two password to you could do this without naming it but the reason why we're naming it is so we don't get confused so we click on the sign up button click right here add action and we will say we would say Firebase it's a fire store that's what we'll say firestore no Firebase authentication pattern we'll say Firebase authentication we want to create an account right there and we'll see what we want to do email that the user that's the provider and the email feed the sign up email the password field is the password one confirm password is the password too and then this is going to the user collection we don't have any other extra fee to add and that's it so when they fix this what we want to happen after so when they're done with signing up when they're done with login in we want to take them to the home page so they can view post that's what they came there to do so remember I'm clicking on the sign up and I'm opening the action flow editor we've already asked them to sign up here and we'll click right there with the action navigate to the home page that's it navigate to the home page and here we have an error the arrow is saying that action alt action requires authentication to be enabled for this project so just simply click on this it will take you to the page where you have to enable authentication so that's the settings and the app Details page authentication enabled where is it updated page click on Authentication and say authentication enabled and then once your enable authentication is going to ask you what's the entry page the entry page is on button one that's the entry page our login page is a home page that's all you have to do and you're good so let's go back to our action again click on action you can see we have the green error in we have the Green Arrow it means we do not have any error on the page so now that I've done that I'm Gonna Leave You with this task you go ahead and add this so when I either click on the login what do you want to happen you want to take them to the login page and when you click on this login you want to lock them into the application go ahead and try that pause the pause the lesson go ahead and pause it try it out and you can join me where I'll show you how to do it so welcome back if you were able to create that awesome if you're not able to create it let's just watch me as I do it so when the window user click on this test when I usually click on this test I will say click on this action add action I will navigate them to the set the sign in screen the sinus the the login screen that's where I'm going to take them to take them to the login screen take them to the login screen and then we'll go back to the login screen right now and say look click on login button click it right here and say what do we want we want to click on the Firestar authentication when I say login and then we want to say all provider is email email feed is login email password field is login password click on open Action flow editor click on the plus sign add action navigate to the home so when they're done we login in they navigate to the home page so if you got that right awesome if you didn't get it right nothing to worry about you finally did it and I'm so proud of you so meanwhile we have this Arrow here I don't like seeing arrows we have this Arrow here let's go fix it it says we have the user we have the user here and um we have the user and what else again what's happening it says collection post has a feed post user which is a document reference of an unknown collection so let's go post user corrected by post user document reference user so let's let's take this away so I have already created by that's fine so what again so it says collection post as if it likes which is a document reference of an unknown collection so let's go ahead and let's go ahead and click on this data type click on the on this okay so what I'm just gonna do I'm just gonna take this away I'm just gonna take it away delete it to type just to avoid any of this you say delete it type and I'll come back here and I'll delete this stand for the likes what I'm just gonna do I'm just gonna say likes the likes is going to be at least it's going to be at least it's gonna be at least and it's gonna be document reference and it's gonna be a list of users so the reason why I'm the reason why I am I'm doing this is because the reason why I'm doing this is so that I know that a lot of people will like one one post if I you know on Instagram you have a lot of people like in the post lots and lots of people liking the post and a lot of people can also dislike so I'm just going to change it to the slides since I already have a like on top of it I'm going to change it to dislike and that's fine so this really work when you have some social media thing on your post and it really works now our I think our I think it's all gone so what's what's the game so this should be all gone collection post has a few likes which is definitely reference of an unknown collection uh this is this is likes this is not supposed to be so I'm just gonna do it and delete it and do it again likes I'm just gonna say least and then it's gonna be a document reference it's gonna be a user and check so we don't have any error again that's fine so now we're gonna add comments to it we'll do it the same way we we've been doing things before so once you get a hold of building GUI with third flow it becomes very easy for you so let's go ahead and do it the same way so first I'm gonna go ahead and add a container first I'm gonna go ahead and add a container to it same column here I'm going to add a container to this inner column after adding a container I'm going to add a list view so the reason why I'm using a list here is because I know that a post can have thousands and thousands of comments right and there's a way you could even do this you can make a post have stop a comment have sub comments like the way you see it on some social media um sides and then I'm gonna inside the list view I'm gonna add a container and inside the container I'm just going to give it a test and this test is going to be like 400 PX yeah it's going to be pretty pretty easy go over the pattern on the side of 12 12 and 4 up and four below and this container over here I'm gonna give it also a padding on top of eight padding below of eight part inside of 12 padding left of 12. and in here this is the main column and I'm gonna give it I'm gonna give it a pain percentage and I'm just going to give you 30 percent so 30 we can scroll you know we can screw all the comments and see the one that works well first and for this container I'm gonna give it a radio I'm gonna give it a butter color sand butter color I've been using for all the tests just to differentiate it I'm gonna give it a bottle color and just make it a bit round give it a 15 all around like so give it a 15 on the round bottle with you about a width of one that's fine and I'm not gonna deal with anything like both Shadow and the rest and then for my list view I'm gonna just gonna go ahead and click on my database click on my database add backend query and then say query collection and I'm gonna query the comments and it's gonna be fun variable click on it it's going to be from either of the variable is fine it's going to be from the post variable reference click on the confirm click on confirm and click on the confirm button and so you can see one thing is cool here that you can scroll so you can scroll users will only be able to screw all these comments so we have our test here now we can set up tests from variable comment documents description and one other thing that you you can take this folder if you want to take this folder what you can do is that you can add the image of the user who created a comment somewhere in the comment section why because we reference the comments and the user together so now you'll be able to pull everything about the user on this comment on this comment we get and you'll be able to use it anytime you like and even the creator of this post you'll be able to use it here if you want So at the end of the the post you can say created by XYZ and that works too so let's go ahead and do then work on our container so remember we have a container over here and this container should have a row yeah the container should have a role inside and inside it to have a test entry to have a test okay test feed and also if you have an icon if you have an icon or button anyone you choose is fine so we have a test feed we have an icon and we're just gonna call this send or envelope so send and this is going to be the icon so we'll call it maximum line we're going to make it two to make it a bit big maximum line two and this guy over here we're gonna give it some potting left eight some potting right eight that's fine and this over here and what are we going to do here we're just gonna we're gonna give it a con we're gonna give it a butter yeah I'm gonna give it a butter like so give it a usual butter like show and the butter is not going to be on the line the butter is going to be it's gonna be different so let's just say decorator is going to be outlined that's what we're going to give it so we have our outline here and we'll just give it some you know some styling like butter radius of 15 that's what I've been using and I think that's fine that's fine for us and um so when they type this what happens when you type this so we click on the that action is going to be on this button right there but before we do so click on the row and just make a space in between to give a bit more space and this right here click on this icon click here add an action we'll say what's going to happen it's going to be a Firebase so here I'm showing you something new this is Firebase create a document and what document is going to create a comment and what kind of feed do you want to add to it what do you want to add what's the reference the reference is the current post I'll tell you why when we finish doing this and we say confirm add the feed add the feed add the feed uh the feet so the description is going to be the test coming from this box and how do you get the test coming from that box it's going to be from your weekend that's just going to be from Wicked State some hint here this test so we need to type this test it's going to appear as a comment created art from variable now we're getting time Global properties I would say current time yeah created by using authenticated user user reference so what the main authenticated user means the user who's creating the post right now so when you're done with creating this post what do you want to do you want to click here and say just show a snack bar show a snapper snack show a snack bar and say specific value say snack bar and say you'll put your comment has been recorded so your comment has been recorded you're saying how many seconds you wanted this 4 000 milliseconds is four seconds and that's fine you don't have to do anything else your comment has been recorded you're gonna find a comment here and that's cool and that's just something else here on this list for you lastly we're gonna go all the by let's say although by created art and it's gonna be the reason so that you'll be able to see the first your first comment that was usually you'll be able to see the last comment that was made on top of it so you go ahead and fix this up let me let me let me see what you did leave the link in the comment section if you're watching this on YouTube if you're watching this in some other place just sleep and licking and leave the link in a place where I can find it and we'll move forward I'll see you in the next lesson so we've talked about Firebase already in this course and now we have Zen we have super bass and we have Zeno both are Firebase alternative yes the Firebase eternity you know about Firebase a lot because it's owned by Google and Google is a very big organization the difference between Firebase and Super Bass is that Firebase is a is a no SQL database and you can see it when we're doing the reference we're just refusing that document reference to do things but Super Bass is an SQL database so if you are more inclined if you are more secure inclined then you want to go with Super Bass and also you can do what you want with this database you can manipulate it the way you want to manipulate it and you can scale it as much as you can while paying less so look at it look at the pricing over here you can see you're paying 25 a month and then you're doing 8GB of database 100 GB or 5 storage 50k 50 GB of bandwidth so you have massive and crazy crazy offering for your database another thing is that if you're using Super Bass then you have to be able to use API a lot you need to understand what API endpoints are how to send data how to get how to patch data and a few other things but good news for you if you're thinking of using this because flood flow have a super base integration the right integration that you can use but that doesn't mean you still wouldn't have to know how a database work and how to connect it so I would say that if you're not a pro in this thing if you're just getting started stick with the Firebase stick with using Firebase and later you can move on to Super Bass Xeno walked the same way Zeno is also back in as a service that's what Zeno does among his offering it offers you a way for you to fix your database using Xeno the reason why General is cool is that it's also a scalable and super based that's the reason why lots of people like Xeno and one other thing that is super cool about using an external database is that you can connect it to multiple application all at once most other Norco 2 like adalo bubble and a few others they all use SQL based database but flutter flow used to fight use a nosql database which means it's a bit difficult to combat a bit difficult to work with so I'd say if you are considering building your app on third floor and then you're considering building a web app on some other platform it would be cool if you use Super Bass and then if you have budget in mind if you are you know you're you're you're not very financially cool I would say run away from Zeno because you can see Zeno starts at 59 per month sizes nine dollars per month that's what it starts from and then you go all the way billing you at seven or eight dollars per year but if you're using that or Xeno is only billing you 25 dollars per project so I'd say if you have a single project and you just you know you have a single project and you just want to launch fast and you're looking for a Firebase alternative go with Super Bass really you're gonna enjoy it it's easy to integrate it's cool easier to integrate straightforward and you can build with this yeah I mean you can fly all the way to the Moon with this so that's it for Firebase alternative we hope we didn't spend so much time there so let's go forward the next thing I want to talk about so we've talked about storing data we'll talk about reading data from a database and I think the next thing I want to cover here is carrying fetching data from a rest API so let's let's talk briefly about apis apis API Mains application programming interface that's what it means just think of it as a way to collect data from somewhere to send and receive data from some more so imagine that you have data inside your PC and somebody is about to collect it and you want to exchange it with a person but without really sharing everything so what you want to do you give the person access to a particular spreadsheet and they can interact that person can add and can receive data from the expression for example when you're sending money with the bank what the bank does is that when you put in your data it uses it uses the API service to so to search for your details and return it back to you that's majorly or have you tried to check your to check scores for match scores you know match scores and all that likes football scores or basketball scores what happened is that they use API to send those scores back in real time so you can actually see it so it's basically cool if you're using API in your application especially if your data if the data you're displaying your application depends on all the services so it's super cool this is not an extensive talk about API I just want to show you that it's very possible for you to send or receive data on your application that's what I want to show you if you're looking for an extensive talk about API if you check out my channel there is a particular video where I covered what API is and how to use API so let's go ahead I'm gonna use this Chuck Norris API yeah this one so apis have different you know they are different query you can send you can send a get you can send a post API you can send a patch API so let's say a get is a way for you to yeah I mean you when you're getting you're receiving when you're posting you're sending when you're patching you are updating just like the way it sound in English language so I'm gonna get some random jokes and this API is going to return one it's gonna return the ID the URL the value so let's go ahead and do that I'm going to go to the API dashboard in Florida flow and I'm going to say add API cores create API call I'm going to say jokes I'm going to call these jokes I'm going to pull the API URL yeah I'm going to say response and test just test the call so you can see 200 means it's successful if it's not successful it's going to show red in there so you can see what happens so it's giving us the icon URL ID updated the value so this is the joke what we're looking for right here is the joke this one this is a joke and then follow flow gives us a the ability to save most of these things that we've got in here so if you want to save it I need to add the Json part and there's a way it's simplified so see the adjacent part is a way for you to simplify what has been given onto what has been given to you as the API responds this might you might have a thousand rows and a thousand columns here but if you're using a part to enable you to take what is necessary and leave the other path for example was necessary here it's not the category is not necessary for Worse what's necessary for us is the icon URL the image the date it's created the the date is created and the value this was important for us other things are not really really important we just need to know when it's great here we need to know the the the image URL and we need to know the joke itself and also there are other there are other apis that you can use this one can retrieve the category this one can retrieve list of categories and this one can search so that's not an extensive view of API but I just want you to know that you can basically use API in your application the same way you're going to be using you're using you you're using data from your database and you can query an API if you want to you can make an API called directly from your application for example if we add this as an API call like so if we give you the name so um jsonpod has an invalid name okay okay select it okay I'm gonna I'm gonna go I'm gonna say um image URL so we're just gonna pull the name here create it out time I'm going to pull this value joke and say I'll call okay so now that we've created this this by clock call and we've tested it and we know it's working if we go back here we go back here to this icon we can really say open and we can call that particular API anytime so it's a API call and what API are we going to call we're just going to call the joke API and the end point nothing we're not expecting anything so we're not feeding it with anything all we have to do is to call the API and this is the result of the API the result of the API this is the name and we can call the result new joke if you want to so every time we call this API we will be expecting something so if it's successful we want to do this if it's successful we want to add an action so we can update a particular feed we can do anything we can show that news joke on the comment section if we want to so it's just really just really work API works if you want to integrate payment you want to integrate Finance you want to integrate anything in your application so I hope that that works for you that's how do you that's how I will use APR as a beginner but when we get to the advanced part of the when we get to and when we get more advanced you will see that you can use apis you do so many things I mean you can run this application without a database simply by sending and receiving data VR and API so now that you've gotten that so what we have to do next I just have to show you a few settings so this is where we are now I just have to show you a few settings routines general settings platforms and the language so let's go ahead and run through that as fast as possible really you're doing great I mean you've been here with me over an hour now and that's amazing so first the first setting that you want to do is the team setting you want to choose your colors so we didn't cover that in this section you want to choose your colors and you can import Your figma Design so you can import Your figma Design all you have to do is to put the URL link and the personal access token you can check out this dock over here how to do it so you can choose your team choose your color typography and a whole lot here then for our nav bar you can decide if you want to not bar on every application on every part of this application if you want a nap bar but we didn't we didn't cover that yet so we didn't cover that yet but you can decide to if you have a nap but that's fine if you want to have a nav bar on any application then we have the app details we covered this before the app details the name of the application and then we have the team so you can invite other team members into your application which is cool the primary language of this application is going to be English I'm going to add I'm going to add the language and it's going to be English yeah the primary language is English and the display language English so you can have the primary language as English and display language as Swedish and one thing I love about Florida flow is that it can really translate your app re-time so if your app is switching Swedish and somebody in is English and someone in Sweden is is using it you can easily translate it to Swedish Swedish and it's going to work very well so also the last thing I want to show you is the platform so here we are building on IOS and Android but you can also add web you can add mock OS you can add Windows to it so that's how powerful photo flow is you can use it to build for six different platforms all at once and then we have permissions we can ask your user for their Bluetooth their Biometrics calendar or camera contact location notification and much more it depends on the application you're building and how you're building it so those are some of the things that you likely want to set up and this is one of the things that you want you likely want to think about before launching your application and don't forget we have the app details don't forget you have the app you have the app assets yes you have the splash screen and you have the launcher icon these are very very important you can go ahead and do that with canva it's pretty straightforward so if you've got into this part of the application awesome congratulations we're just gonna pull foot footage in touch with an application you know like the back button you know things like this like the like the back button when you click on this what happened we want to go back yeah so like all that and we'll be able to launch our application on the Play Store I'm not sure if I'm gonna wait for for Google to approve the application before I put it over there but I'm just going to show you how it is how to launch it on the Play store so that you'll be able to do it whenever you want to do it thank you so much for watching see you in the last lesson of the course put the app on play store I wanted to cover a few more things you know like tidying up the app a little bit then previewing it to make sure that it emits our specification before we get to pull the app on the Play Store so let's go through our first pages so we have our boarding page right here we have this we have this we have this and um so we have this we have this page and we have the login page and the home page so we have the home page where users get to see tons and tons of posts but if you look at that there is no menu there is no menu on top and there is no menu beneath so it's it will be awesome if we put something at the bottom of it so so that users will be able to probably log out of the application or log into the application as the case may be so we're gonna put a menu on top of it so users can log out of the application so we can use this one this one this one is gonna it's just gonna take them back or we can bring them into a different part of the app and this is the page title and we can say welcome so we can do like this and say welcome that's fine and this we can take this we can make them see a different aspect of the app when they click on this so let's turn this Arrow into a menu I'll click on the icon here and I want to turn it into a menu right there so when they click on this Arrow we I want to have something slide from the from the left hand side of the application from the left hand side of the application so when we click that we'll just you know um click here click on the widget click right there and then add an action if we add an action we you can just you know sometimes you want you might want to guess so let's say something like a slide no or we can just go through so go through radio sometimes you might not really know the widget that you want to pick or how you want to pick it but you just want to go through like this to you know figure out something that worked for you and try you know try what works for you see all the all the tools all the tools that's over here and see the one that you want to use in your application so when we keep when we click on this icon we want to open a we want to open a slide a slider menu you can make this a pop-up if you want to you can make it something that slides from the bottom you can make it something that slides from the side from the top anyway you want to slide it from it's fine so there is a component that will enable you to do something like this we have to put that content component on the page first before assessing it so I'm going to click on the plus sign I'm going to click on the plus sign and find that component can't remember the name of the company right now but I'm just gonna find it yeah it's called a drawer that's what it's called it's called a drawer so I'm gonna add it so you can see what happens so when I put a draw you can see what happens and then I'm gonna just change the width of the dryer to 200 and inside this dry you can pull anything you want to pull you can put anything you want to put but in here I'm just going to pull a you know some series of check bars and a title that's what I'm gonna put I'm gonna put a list of it that's what I'm gonna do um no that's not it um I can just put a column if I want to but there is something specific that I'm looking for I'm looking for something really specific to use selectable list tile so let's see yeah I'm looking for something like this but this is this is not really it so I want people to be able to click on it and just go click on it and go that's what I really want them to do when they get to this you know when they get here so I'm gonna I'm gonna remove it delete it I'm gonna delete it and just put a row okay just gonna put a roll if I remember I'm pretty sure I'll put it in you know I put it in some other I put it in some other video and put it in some other video like so I put it on top there's my test and okay I'm gonna change this into a column I'm gonna [Music] um combat component no I'm gonna change this to a color and that's what I'm going to do replace with gap I'm just going to replace it with a column and put a row inside the column I'm going to wrap this test around the roll if you don't understand what I'm doing right now you can go back you know just check it and you'll be able to do this so um this is my row I'm gonna put this row I'm gonna put a pattern on top of 40. I'm gonna put a tall inside of say 10 10. 10 so I I get to use 12 I use 12 a lot but this time I'm just sticking for 10 and then I put an icon so the element I was looking for this is what it does so it gives you a test and an icon so you don't have to worry you don't want to bother so this will link to the settings yes like so this will link to the settings you can you can play around this you can change it so I'm going to make it a team you can change this to whatever you want to change it this will lead to settings and then we can just duplicate this Ctrl D and here this is going to be this is going to be a profile so I'm just going to call this a profile and this is going to be this is going to be a user so we're going to make this user so this could be the picture of a person it could be the picture of a pressing it could be whatever you want it to be and then we need to add something to it so we need to add an icon so just an icon to it okay we need to add a row so put another row and take it upwards on top of the column so I want you to guess what I want to put on this row it's going to be an icon and if you can guess what the icon is going to do so just try to guess what the icon is going to do so this icon I'm still going to give you the 10. I'm still going to give it a 10 and then I'm going to click on the icon and click on it here I'm going to say close so this icon is going to be an icon that will close this draw that's what it's going to do so I'm going to give it a 20. I'm just going to give it a 20 and when you just click on this icon I want to close the drawer so action I'm going to say draw so I'm going to say draw click on the drawer right there I would say close it close draw whenever this icon is clicked so what I need to do is to close the draw that's what I need to do now and I'm going to figure that out now so I'm clicking on the draw right there and um so clicking on this container uh there is there is an option somewhere to just go ahead and close the dress so there is an option somewhere to close the draw when it's clicked uh so I'm just gonna navigate from this page and come back again and see what happens so okay so this is our home page so I'm gonna click on this I'm going to click on my click on the home page then I'm gonna go click on the menu now we'll click on the home page menu the icon where is the menu right there click on the menu click on the task click on the icon so what I want the icon to do I want the icon to also open the drawer that's what I want the icon to do so it's going to open the draw when I go in users click on that particular icon so if I'm a user and I click on this icon it's going to slide in a draw when I open it when I click on it when I stop when I when I close it it's just going to close it so let's see if that's going to happen in the preview tab let's see okay so you can see we're doing great you can go ahead and style this the best way that you can if you want to and um so while we're rounding up with this this is the last this this last list this is not going to be a last lesson so we have one lesson more while we're rounding up with this I want to tell you about the volume so there are tons of time you will see that your app will just not work because something is just wrong there's something you're not doing so a lot of the issues that I get before the flow is my is is the error will come from either Customs cost if you're creating a custom we get you're creating custom actions or probably you're not passing data from one page to another very well so those are three things that you have to check and then there is this guy over here that is always telling you hey there is something wrong when you see this error here it's kind of telling you there's something wrong with your application when you see a red arrow hair and sometimes you come back here and you will click here and say known issues so you will see known issues over here when there's an error you would see issues over here and another place where you find error is in your properties so when you when you try to set an action and it's not cool it's not you're not doing it well you find an error over here so the thing is this the arrow will not work your app will not work if you have too many errors in it the app is not going to work if you have so many errors if you have a single error like a single error in it it's not going to work so um there's another thing that we just have to fix here it's in the post detail screen if we click on the back icon what we want to do we want to add an action add an action over here and we want to navigate back so don't bother setting up too many things just navigate back that's it that's what you want to do and so if you do that I think we're done but there is something else you might want to tweak the app you might want to add a way for users to log out if you want to I would say that you're going to put it in this draw you might want to have a wave either way for users to log out or if I put it in extra or you might put it somewhere around the menu over here you know like a touch light but like a like some sort of or you know a log out button so if you usually click on it you draw a pop-up and say are you sure you want to log out and then if they say they want to log out you just allow them to log out so stop the stop this stop the the video go ahead and try the things we just implemented come back and then I'll show you how to launch your application on the Play store thank you now in this video I'm going to show you how to launch your app on the Play Store so I'm focusing on the Play Store because Play Store is very popular in Nigeria so I have a Play Store account I do not have an Apple account the only time I have tried to use apple I've used Apple account is when I'm working for other people so I really don't have an account to test this with but just understand that it is straightforward although launching on the Google Play Store it's way more straightforward than using the Apple because there's so many security Checkers and check that because there's there are so many Security checks in the app when you're launching with apple it's pretty more complicated than you than you would do launching on uh on the I store is more complicated than launching on the Play Store Play Store I think is a whole lot more straightforward than um launching a live store I'm not going to be showing that now because I really don't have an account the only account that I have is a store are for clients so I can use it but I have a personal group list or account that's what I'm going to be using in this lesson today so first thing that you want to do you want to just go ahead and say Google Play console that's the first thing you want to do Google Play console and then click right there so in my account it's going to say in my account it's just going to say go to play console but in your account it's going to ask you to log in and register so you're saying for no code over here all these other console and for clients so this is the one I'm gonna use for yours you might not have a Google Plus Google console account and what you have to do is just register when you register it's gonna charge you a 25 fee when you register and there are a couple of things that you want to do when you register they'll be very careful to choose your payment account if you are not in America if you're an American I think you just go ahead but if you are living in a different country entirely when you're choosing your payment account be very careful else you're going it's going to create an American payment account for you and you won't be able to verify that account that account will have to be deleted by the uh by the Google Play Store support team so you can refix it again and you're going to pay another charge so I have to pay 25 twice because I didn't really take that into the country operation when choosing my payment account so whenever you create any when you ever you create a service on Google there is a payment that is there's a payment account attached to it if you do not pick your own payment account when you're when you're trying to register for your store where you're trying to register for your Google Play Store account it will pick one and create one for you and it's going to be a us-based account so I hope neither does it's clear let's go ahead and launch our application to do so let's go back here to do so we're going to go back to our our app and we'll click on the settings I'll click on the settings so we have two things here the launcher icon and the splash image so like I said before you can always do this and you can do this on um on canva yeah you can do this on canva and it works pretty well uh okay let's go ahead and I'm just gonna go ahead and create something anything so I'm gonna go open canva and um I'm gonna say logo just gonna find some sort of a logo on canva that's what I'm gonna do just find the logo and pick one there's no pick one I'm gonna pick your logo customize this template but it's not economy class so I'm not going to spend so much time on this one please uh this is a little this is so I'm just gonna take this away I'm gonna take this away I'm just gonna leave it this way so I'm going to take this away take this away and just leave the B and the b or we can find the different templates entirely Canada have thousands and thousands of templates that you can you know you can use when you're designing your application so I'm just gonna go with something like this I think this is cool it does stand out and then I'll go ahead and delete download it as a PNG file I'll download the second one click on download and that's what I do and then okay it will say just real um icon so this is the icon we're going to be using well I'm going to save it and then we also have the we also have to create the app page you know the app page so this is going to be some sort of a you know a straight up image like maybe 10 40 by 1040 something like this and I'm gonna pick some templates I'm going to pick some template and just use it anything that looks like uh that looks like gossiping or that looks like you know see I'm just gonna pick this meanwhile this is supposed to be some feature of your application that was supposed to be some picture of your application so it's just an image that shows like maybe two or three um maybe one second before your uploads so don't take it too hard but make sure that you give it the best design you can so I'm just gonna download this for the sake of this class but if you are doing something professional for yourself or for your client please give it some real attention give it some real attention so that it stands out from the rice because there are millions of applications every day you know millions of applications have been launched every day so now we'll pick this and say open that's going to be our oh no but uh let's clear this it's a little clear I'm going to clear uh I just want to upload the image again this is going to be a splash image and this is going to be a launcher icon this has flash image and this is a launcher icon and that's really cool and then we'll go back here and say we'll go back to our mobile deployment and what we want to do we want to deploy it here that's what that's what we're looking for once you deploy so there's various stages of deployment there is internal there is after there is better and there is production production is where you put it on the Play Store and everybody's seeing it you know everybody's seeing it internal you want to check out among your team to make sure that your app is functioning very very very very well so there is service account credentials there is you know there's a couple of things that you have to do let's go get started let's go back to our Google Play Store so first you're going to create an app before you create an app there will be some notification here telling you to verify your account that's it but I've verified my account so I can put an app on the Play Store easy peasy so I'm going to create an app the app name is going to be just real language yeah then the type is going to be an app payment is going to be free declaration so I'm just gonna you know check all this USS spot lawyers check all this and say create an app foreign console for your application right there and next it's going to say it's gonna just tell you the things that you should do I should create an app so first is to share your app for internet testing if you want to provide information about your app and your store listing and release your app so let's just you know launch it internally trust me it's pretty straightforward let's launch it internally so let's go ahead and say let's go ahead here and says create select testers so when you're selecting a tester you would have to create the stressors you have to create an email list that you will send it to you so I'm gonna give it name I'm gonna give it a name and I'm going to put the email over here at gmail.com hit enter I'm gonna add another one pull the Cold War I have no code 35 that's cool I'm gonna hit enter so and then I'm gonna say save changes I'm gonna create it's not returning uh gcml does not exist so just going to take it away say save changes save and now we have our test we have a tester and then we say State changes so once you're done with that the next test is to create a release so go ahead and say create release and this is where we're going to put our app bundle but before we create our bundle we have a lot of other things to do to do that go back to your Google setup page click on APR access the reason why you're doing this is because without doing this you will not be able to give other flow access to your application so I've set up and pass the application from Firebase down to your Google Play Store console further uses a tool called code magic so you need to be able to give code magic assets to your project don't worry it's not as complicated as a sound so click on Save and click on Save and we'll just wait for it to load a little bit green means it's coming through and yeah so we have um it says linked Google project on links project uh Google play Android API is on you know stuff like that that's fine but let's just go ahead and say View in Google Cloud platform so one thing you have to understand you have to make sure that this particular project is the same as the one you are creating it's the same as the one you're creating so I have a project linked already but you have to make sure that this is a this is the same thing you are creating the same thing so this is the project this is the name of the project yeah project PC API blah blah blah this is the name of a project you can see the project number so understand the project it's not going to be like any other project you've created before so you're going to say learn how to create assets so don't forget to click on this learn how to create access click on it and click on this go to look at the instruction go to Google Cloud platform create a service account enter the required information to linked on and once you say done you come back here all over again so go in here say click on this just follow the step you can see the project ID is the same with this one the project ID is the same with this one so is this project ID that you're working on so go back here and create a service account so click here to create a savings account and put the service account name just put any names I'm going to say just real I hope that's fine so don't don't worry about the name doesn't have to be complicated then you go ahead and say create and continue and step one and then select a role selective role and the rule that you're selecting it should be it should be the owner that's fine owner is fine so we'll go like that all these are optional but just give it a row and that's okay click on continue but you don't have to feel it it's not very it's not the most brand thing there you don't have to fill it so it's fine so click on continue stay done and then once you sit down click right here and say manage Keys you have to follow me closely see manage keys and add a key create a new key leave it in GSA not p12 so leave it in Json and say create and then this is the key you're gonna have it download to your PC like so say close and then once you're done with that come back to your to your stock console and say done so now we have this we have this over here we have um these are if you if you got this it's fine if you didn't get it please go ahead and fix it all over again so we have this manage Play Store console so it's we're gonna give it access so you can give it admin ourselves or permission build up information read only access View financial data okay so I am not I'm very comfortable with this I'm just going to give it admin access that's fine I'm gonna click on invite user send invite so what you're doing is that you just gave um you just gave flutter flow a cold magic the ability to assess your application directly from wherever they are let me directly from their API don't worry nothing's going to happen to your application it's okay so so we're gonna go back to our app remember that the thing you downloaded you know the key you downloaded the credential you downloaded you're gonna input it here this is the final step I'm going to input it here and this is the Json file please don't share with anybody whosoever has this key will have the right to just use your application and then we're going to choose the track and call it internal and then we'll say deploy to store that's almost it we'll click on deploy to store and it should keep rolling and rolling and rolling for a while and then you can actually check your status you can check the status of your application over here um yeah you can just check the status of your application here to see what you've done and I think we missed one thing earlier we didn't really preview the application yeah we didn't preview the application to see if it's working very well if it's not working very well before deploying it my bad don't worry I'm gonna do that but the first build is going to fail the first bit is going to fail the reason why it's going to fill is that if we go back to our Play Store I will go back to our application we go back to our application come here we need to create a release so we need to add a we need to add a bundle we need to add a bundle like create and roll out and release and they have to be some sort of a bundle here you can see we have an error you need to upload an APK APK or an Android app bundle for this application this release does not have to remove any app bundle so we need to add some sort of a bundle over here yeah we need to add an app bundle for this to work so we're gonna say I did release this is where we will drag our file to so let's go back to our g-string application check view status it should fail it's our view status likely will fail because we need to add the bundle to our to our app so so while we're doing that let's just go ahead and you know and view our application you know I'm going to click here I'm gonna click here and say run so let's go back here and see that application is still building that's fine and check view status Studio then just give it some time give it some time to to build you know fix everything send it to the plate store that's fine you're almost done with this and I am so proud of you that you joined me all the way I think this should be like over like two hours course I'm not sure until I get to um once I get to produce it I'm not very sure but it's been super good hanging out with you and just building this simple application from the beginning to the end don't look a little like it's too simple the thing is that it's just by building very simple stuff like this that's how you go ahead and build complex stuff once you grab the fundamentals you will be able to build big stuff all you have to do is grab the fundamentals and off you go so this is our application uh this is showing dark mode which I'm not sure I like so this is showing dark mode which is terrible that's what it's showing right now sharing that mode so if we click on the nest it's still going to work but this is not good so let's go ahead continue with email so this is that oh don't be scared this is judging in that move so you can turn it off we can turn up that mode what we got when we come back here and say team team and we can save that team just turn it off that's it that's all you have to do so don't be scared about that so we're gonna I'm gonna go with my test email at gmail.com password one two three four five six seven one two three four five six seven and I'm gonna click on the enter button so now you can see this application into your site again yeah I know you are this application so we have it good and then we click on this we can see uh we can see our app oh whoa now it's not scrolling so you can see I'm glad that was debugging it right now you can see it's not scrolling so we have to make it schoolable this particular this is not squealable which is not good but you can see the other part of the application is coming on well right it's coming on well this is grillable and this is not squealable don't worry just a few tricks here and there on your turn so let's go back to our page let's go back to our page come back here post detail don't worry I know one of the questions you're asking yourself right now is that I am making changes to the app and I'm still building don't worry you can build multiple times you can send it multiple times it's fine so I'm gonna go back to the application here and say to this particular column of this column okay this is coolable this column is coolable just don't worry stop it this one I'm gonna make this one scalable the inner column I'm going to make the inner column scrollable I'm gonna make the inner column scrollable and that's all I have to do over that so we do that and we'll cancel this first one and then I'll go ahead and run this application all over again don't worry I'm not going to spend so much time on this let's go back to check our build let's go back and check out build um mobile deployment check this status it's still building so I'm just gonna wait for you to for you to finish building and then I will come back here I'm gonna wait for it to finish building and then I will join you again after I'll join you again I promise I'm not going to touch anything if anything happens I'm gonna come back here and I'm going to show it to you if anything happens but I'm just going to check this again so I'm just going to check this right here to make sure that it's working very well and we can go ahead and you know just put it as a release on the Play Store go grab a cup of coffee go grab a pizza and just you know give yourself a tap on the back so now now you can see that they you can see that the the black color is gone so let's see so you can see now that our app is quillable and it's super cool let's leave a comment you know drum roll this is a comment this is a comment play yeah it's working this is a comment and yeah that's fine let's do something again let's leave it again okay please please comment number two and then we say play yeah so you can see it's working but one thing that you have to correct again is that it's not clearing the screen so it's not clearing it so after entering the comment it's supposed to clear the screen right let's see our back button our back button is working click right there you can see it's working very well that's awesome right that's super awesome so um we're just gonna make that last correction over here and I'm sure that we'll be done let's check out Beauty status let's check out view status you can see it's nailed it's fine it's fine don't worry it's fine we'll build again after making these changes and we'll take the aab file so this is the file that we're looking for a B5 and we'll take it back to the Play Store and once we do that it will work perfectly don't worry so let's go back to our application click right there click here open so once we once we have to create we show it back in core so the next we want to do is to clear so click on just type clear clear test feed and we just clear this one that's all so we'll go back to our app go back to our app and we'll say build so we'll just build it again just build it again because we've made a lot of changes just build it again after beating it again I'll come back and I'll show you what to do next so just go ahead and say mute deploy to Play Store just say deploy at all I'm gonna I'm gonna stop the video go grab a cup of coffee and come back and show you what I did next application again and now it's failed so what you want to do we want to download the aav file this one just download it to your PC it's uh it's gonna be in size as your mobile application so it's not going to take too much from you to to download so this ab5 this is what you're going to upload to your Google App Store when they're asking for you to send a release so just waiting for it to finish so um how are you thinking about your skill set now so hope you're good and hope you're ready to build your mobile application tell me what why you can wait for that if you have questions leave it in the comment section or you want me to coach you privately feel free to reach out to me on Twitter and if you need help on your mobile application feel free to reach out to me also on Twitter or via the link below and definitely I'm gonna help you you're new to the channel feel free to also subscribe subscribe so you can you know it's good for the YouTube algorithm so um now that I've downloaded the file I'm going to upload it I'm going to upload it and this is it this file she's going to upload it there so it's generating the app signing key I'm going to give it a name after that and the next build is going to be a success once we do this so the name I'm gonna give it a name release just real three one so I'm just going to call it version one or V1 that's fine and I'm gonna wait for this to upload once it upload I'll be able to review the release and that should work very well so you can see now we've added you can see the type the app bundle you can see the level you can see all of that um you can make changes here if you want to delete you know stuff like that and then that's fine then review release and save so I'm just going to click on Save so once we click on Save we have an app bundle we have an app bundle over here and that's basically that's basically fine so we have an app bundle with we have a release so just review the release and so we have three more warnings you must commit this before you can release an app yeah yeah one in the bundle okay that's fine so it's all right download size for new installs it's all right start roll out for internet testing so roll out so you are done so you can see it's available for initial testing if you if you are connected to this to this store then you should basically see that um you should basically get an email so I'm going to check if I got an email myself you should get an email to say hey this has been rolled out for internet testing um so it's not here yet but you should get an email that this has been rolled out for internet testing or sometimes it's only those persons who are who are who are added those are the only persons who can have access so now that we've wrote this out for internet testing all we have to do is to push our release over here just go ahead and say deploy to Play Store and this should be very successful just deploy the play store within a few minutes you should get uh you should get notification that your app the floor is successful that's how you would apply stuff to the Play Store so next I'm gonna just run down the recap of everything we're launch and I'll tell you the next steps thank you application there's a couple of things I really don't want you to miss out on remember that there are a lot of things that you really have to do on this one you have to put in the name of the application on the icon of the application put it on Play Store here so it makes a lot of sense to people who are using it and then you can now go ahead and invite test as the application either you add them to this list or you just go ahead and copy the link when you copy the link share it to them on social media maybe WhatsApp or the rest and then paste it over there and then you will see the name of the application it has not been reviewed yeah it has not been reviewed and it's fine and then I'm on the program already so I I have the option to leave the program so then go ahead and say download it on Play Store you can see that your app here is ready for download on Play Store and you can see like developer contact and the rest directly on Play Store this way you go ahead and install it and install it and you know use it on your device and see how it works for you I personally am going to install the application on my device and just play with it um I think it makes me really proud whenever I do such a thing you won't believe how much I want to say thank you to you right now you're such an amazing person great you've started the course and you alone have completed it I'm sure that you've been able to put your app on play store right now if you haven't feel free to leave a comment below or reach out to me on social media if you're having trouble and I'll do well too and see you to give you the helping hand that you deserve don't forget to subscribe again and again and again and don't forget to share and if you want to reach out to me on social media click on any of the link below it will take you to my social media handle or you can reach out to me if you have any talks so that's it thank you so much for watching again I'll see you in another tutorial have an awesome awesome no coach on your head thank you

Channel: paul Nocode

Views: 71,499

Keywords: flutterflow tutorial, flutter tutorial for beginners, flutterflow for beginners 2022, flutterflow 2022, fluter flow tutorial 2022, how to use flutter flow 2022, flutterflow for beginners | how to build your app from scratch, flutterflow, flutter, nocode, nocode tutorial for beginners

Id: 8p9K-pXXh_0

Length: 182min 0sec (10920 seconds)

Published: Sat Jan 21 2023