Full FlutterFlow Tutorial | Part 1

hi my name is Charlie fairbair and I am on the pro no coders team for flutterflow today I'm going to Embark upon a tutorial that should take someone from a beginner standard to something more intermediate even covering some fairly complex subjects Tanya the founder of prono coders has provided us with a scope which is a description that might come from a client as to exactly what they want so it's our job during this tutorial to develop that application this is a very good discipline to get into because it mocks the real life situation where clients might come to you and say here is the specification of my application please build it for me so the scope looks a bit like this well at least the screenshots too there's much more detail behind it and as we go along we're going to cover those two instructions about what buttons should actually do and the purpose of each page but we can get a good feel for what we're trying to design here now if we take say a relatively simple page at the beginning which is this home page we're going to start with that and we can see there are various elements to it we've got a an uh an image over here we've got some text we've got an email address over here that's probably going to need validation and we're going to have a button here that's going to do something probably add somebody to the database so that we can perhaps send them a newsletter so without much further Ado let's begin when you first sign up for flutter flow you're likely to come to this page at the beginning and we're going to create a new project over in the top right hand corner we're going to call the project who tutorial and it's going to be a blank project now when you first start a project it's going to ask you to do various things to set up the project firstly we're giving it the same name as we started off with here it's filled out my company as this package name there's no harm in changing that right at the beginning it tends to get stuck when you start building Android applications and iPhone applications and we're going to set up Firebase which is a an important step that is best done at the beginning to get it out the way so the first thing it's going to ask us for is a Firebase project ID so we're going to have to shoot over to Firebase and take a look at how we're going to do that now there are existing very good tutorials about how to do this if you were to search for instance setting up the actual Google account it's made very very simple and I'm not going to cover tutorials that have been done extremely well by other people but if you get that stage right then you're going to end up with a screen a bit like this you can see that I've got other projects that I have been working on over there and we're going to add a new project we're going to give the project a name which might as well be similar to the one that we had before so we'll just go who who tutorial um and I'm going to ignore that message over there and we're going to continue now the first thing it's going to ask us is what other things do we want to set up at this moment in time we don't really want to set up anything it's just over complicating we can come back to that later and we're going to create the project that does take about a minute I'm just going to put us on hold where that works okay that's happened and so we're going to continue into that and the project is going to open up this is the page you're going to be confronted with right at the beginning and I tend to like to add the basics of what we need we need Cloud firestore so we're going to click that button and it's going to add the database now this is the database that holds smallish kinds of information uh we're going to have another one called Firebase storage where we store larger files such as images and videos here we're going to create a database and here we're going to start in test mode we're going to change that later on it's actually going to give it very little security to start off with but we're going to cover that later in the tutorial this is the recommended setup in the flutter flow instructions that I'm going to show you in a minute uh you need to choose a region that happens to be close to me so that's fine and on a good day this will simply open up a view of the actual database and voila um that is exactly what we want to see a collection is the same as a table um and we can add fields to that within flutterflow we're not going to do anything like that quite yet because we've got another very important stage to do what I'd like you to do is to head over to the flutterflow docs over here at this URL and to search for the Firebase setup you will come to some instructions like this and this is really what I'm going to follow now we've done some of the first ones already just a moment ago but I did want to cover one of the more complicated ones which if we scroll down here is enable access to your project So the instructions are extremely good but I'm going to run through them because they can be a little bit daunting if you're new to Firebase so it's giving us the instructions project settings go to uh user users and permissions so let's go and do that here we are in the project overview we're going to go to users and permissions and we need to add a member and that member is Firebase at flutterflow.io and in the instructions it tells us to change that to an editor okay after a couple of seconds it will have added the member as an editor the second part is this uh button down here Advanced permissions and settings okay we're here they're asking us to edit the Firebase at flutterflow dot IO so hit that little pencil button and it's asking us to add another role in fact we're going to add two more roles and we're just simply going to follow the instructions okay so there it is the first one we need to add is service account user so over here the selector role and we can filter up here as service account user and it would help if I didn't typo that it'll give us several options there if you scroll down a little bit you'll see there's server account user so we're going to click on that and we're going to add that role we're going to add another role this one is called Cloud functions admin and this time I'm going to copy it so I don't make any typos again select a role paste that in and there it is Cloud functions admin so we're going to select that user sorry that permission okay we're going to save all of that updating policy updated seems to have been successful we can now shoot back to flutter flow again and see if we can connect to that database so here we are back in the projects project setup and we're going to see if we can connect to it the Moment of Truth Bingo we've done now if you've missed out that step of adding the roles then that's not going to connect and it won't until you have done now uh let's just scoot down a little bit here are we going to enable authorization the answer is yes because we're going to have users logging in so let's enable that and as soon as we do enable that there's going to be a couple more things going on over here as it wants us to set an initial page I accidentally clicked that twice I'm taking it off again I'll click each of these on and we do want to create a user collection so what does it mean by entry page well if you imagine there's going to be a page that the user is going to see if they're not logged in and as soon as they log in it's going to go across and bring up the logged in user now we haven't created any Pages yet so but if we do press that button flutter flow is quite helpful and it'll ask us to set up an initial page and we're going to create a blank page and we're going to call that home seems sensible it's also in the scope by the way and that's going to be a a blank page and it'll come back and we're going to create that page it's going to come back and it's we're also going to do the same for the page after login so we're going to set that here also going to be a blank page I'm going to call that profile it's part of the scope and we're going to create blank great page okay now I think we can get to the fun part which is to start building so let's hit the start building button and uh this is the screen that we're confronted with now the first thing that you'll notice is that this is set up from the Viewpoint of a mobile phone we can quite easily change that up here so that the that we're working to a UI design that is all different sizes we've got a tablet over here and we can choose from different uh different ones and we can also choose a desktop which is the widest of them all now I'm going to choose that because many of the screenshots that we've been given are actually in the full width web version of the application so it doesn't matter which one of these we choose we're going to choose this one now uh flutter flow is adaptive which means that it will alter the screen layout depending on what the viewport is so there are various tricks to that which I'm going to show you but we're going to do that later we're going to first get a page or two sorted out um from this perspective and then go and have a look at it and see what it looks like if we shrink it down to a tablet and usually the problem to start when we try shrinking down to the mobile viewport things get a bit cramped and we need to rearrange the layout now you'll notice over here that we've got a page title we probably want to get rid of that and it's also saying drag elements into this column now let's just have a quick run through of um uh everything that's on this page now the first thing that I've noticed up here is that we've got a red dot that means that there's something wrong with the Firebase setup and I know now that I have missed out the steps so usually you can just click on that and what I think we've failed to do was to also generate these config files I think I find that if I do that step within Firebase it is going to get rid of those errors so there's a little tip that most of the time if you see an error click on the error and it'll take you to where it considers that error to be okay I've done that and you notice now that we have uh at one warning now we're here we noticed that the Firebase uh storage um and the usage for that has not been deployed as yet but we're going to come back to that okay so to go back to the design view that we were on a moment ago we're going to run through from right to left the um the options that we have at the far right uh top hand corner here we've got various ways of running the application from the very very most basic simple one which is this red eye over here this will not create anything particularly functional but it's a good way of checking out the layout and it only takes about five seconds ten seconds to give you a good view of what your app looks like but as I say nothing's going to work the second one is the Run button over here now run will create a completely functional web version of your application um however it is not easily editable on the fly now the best one that uh to use is this test button now the test button will literally allow you to make minor changes even major changes for that matter in the design of your layout press a button and it will make those changes within about five to ten seconds now because this takes quite a lot of resources from flutter flow one only gets 28 minutes on each session before one has to start a new session and the build of your application to get to that point will take about four three to four minutes two to four minutes I think they say but it is still a very very good way of developing we've got developer options over here which allow us to do uh some more complicated things we could actually view the flutter code there now flutter flow is a user interface for the Google supported language of flutter which is why this tool is so powerful uh GitHub we're not going to cover that now download the code we're not going to cover that now download the APK well this will actually create a installable APA APK file that you can put on an Android phone possibly the best way of really understanding how an application is going to feel and look is if it's on a real mobile phone and that's how you would do it do that there now we've covered some of the error bugging over here one thing that is extremely powerful about philosophlo is that if you make a mistake um and uh you can either use control Z to go back a stage and it'll let you go back quite a few stages sometimes though you don't you you really just can't go back far enough and that's where the snapshots come in every few minutes uh the flutter flow servers will take a snapshot of your project and it'll give it a time stamp and from that you can decide how far back you want to go now if you don't know how far back you want to go you can go and peek at the project and it'll open it up and it'll go and have it'll show you how the project looks say 20 minutes ago or yesterday or even the beginning of the week so a very powerful way of making sure that you don't make uh you don't that you can go back to a copy of your application if something goes wrong and there it is the the application you can go and play around have a look at that if you think that's the one that you want to uh return to then that is a very very good way of doing it now going back into uh the actual project they're working on we're moving towards the left we are not going to cover everything here these are various ways that one can access quickly some of the shortcut commands and a few other things over here now the most important menus are over here on the very left hand side and they tend to go in a hierarchical order which is the least used ones or the ones that are most fundamental are up are down at the bottom here so we've already had a look briefly at the settings and we'll just we'll pop in there for a second now it's returned to the page that we were on before when we were setting up Firebase which would come under the uh fire Firebase uh menu option over here you can see that there are also quite a few more complex things that can be set up from here uh for instance Google Maps needs an API key uh we've got um admob and Golia GitHub you can even use a different database as the standard database which is Super Bass but I'm not going to cover that here various Payment Systems so all very exciting uh push notifications can automatically be set up and you can also see from here the platforms that um fluster flow is capable of automatically generating it has Android OS done automatically and at some point will enable the um the web as well it'll tend to slow down the build a little bit so I'm going to leave that to a little bit later moving swiftly on up here we've got our design palette this would allow you to create a color scheme and a design scheme and it has some other very powerful features within it which is where one can design say a form or a button and just then copy and paste that design whenever you create a new button so that you don't have to mess around with the color scheme or things like that typography and icons this is where we decide the fonts are pretty normal stuff the color scheme over here and uh the design system uh please note that when it does say import figma theme it doesn't mean a figment layout some people have asked me that it you can design the color scheme in figma but as of yet you couldn't design say an interface in figma and have that translated into a page in fluster flow now we're not going to cover um Uh custom widgets and actions yet but it allows you to write flutter directly into fluster flow so if there are functions there that you want to ex if you want to extend the functionality of your application writing in the Google supported flutter language you can and media assets if you want to Halt images and pictures and such and so it's actually in the APK file rather than perhaps accessing it from the web that's where you would do it the API is a very good way of connecting two apis for instance if you wanted to draw the weather if you were creating a weather application you might connect yourself to weather.com API we're not going to cover what uh at the app state is here because we're going to cover something which really almost replaces the app state which is the page state which is where we hold variables on a page the data types assists Us in being able to organize our database over here we have access to the actual database and if you remember we asked it to set up the user table for us again we're not going to cover that right yet but that is what that button does um we've got a storyboard now we don't we've got two pages so that's going to look extremely boring but that'll give you a layout from you know if you press that button what page that it will go to now we're starting to get to the more important page that this section of it the three that we're going to be using a lot uh the pages and this is where we simply can add a new page and as you can see we've got two blank ones that have been set up in the setup process at the moment that's all we've got um and we're going to be working initially on the home page um up here is possibly the most important section of fluster flow which is the widget tree and on the widget Street this basically defines the layout of your application and we're going to do do that in a minute so we're going to see why it's a place to come to very often during the development of your application and then up here the possibly the most exciting part of flutter flow is this absolute Myriad this library of pre-configured chunks of code that are called Widgets or elements that can literally be just dragged across onto the page sized and rearranged and down here on the left left hand side there'll be tons of different parameters that you can play around to get it to do exactly what you want now that's actually what we're going to be doing but we're going to start here on the widget tree now it has started the page off for us in a way that it thinks it we would want it which was the first thing from the home pages to create a column so that means that everything that we add onto that is going to go vertically and it's also added an app bar at the top now we don't have that app bar in um the scope so I'm just going to hit the delete button on my computer and that's how simple it is to get rid of that we've now just got a column going on into which we're going to drag at the first instance some containers and I'm going to show you why okay let's just remind ourselves of the page we are wanting to design we've got a black border top and bottom and the black border is really just a placeholder because if we look at the scope and detail we'll see that we're going to have a menu going on up at the top here and we're going to have um some other stuff going on at the bottom here but the reason why I put this black Border in to replicate the image that I'm working on is because if I don't I don't think the dimensions of the page are going to look quite right given all the different viewports that we're going to be designing for the desktop the tablet and the mobile phone we've got a page that's split into two hearts on the left hand side we have an image on the right hand side we have various kinds of text leading down to an email address a text input box which is an email address therefore we're probably going to need to validate that address and we've got a button over here which says join the list that is probably going to be an action that's going to add that person's email address to the database so that we can do things like send them an email or send them a newsletter so going back to our project now we're going to add our first container to this page now there are two ways of doing it we can either go up to the widgets menu over here and you'll see they put the container quite near the top and that's because it's used so often and in that instance we can just drag it across onto the page and there it is at the top I prefer not to do it that way and I think it's quicker to do it this way so I'm going to delete that you see that it's in green I just had to hit the delete button and it's going to vanish I prefer to do it from the widget tree because it gives me a clearer vision of how it is structured so the second way of doing it is by using the plus button here and it will basically show you the same thing again and rather than dragging um I could just click on that and that will add a container right at the top over here and the first thing you notice about the container that it's clearly nothing like the dimensions that we want so to adjust that we go down to the bottom right over here and we're going to set the width of that container to be this infinity sign now Infinity means it's going to fill as much of the space as it possibly can which is usually dictated to by a container above it that is the theory behind the widget tree and on the height over here well I want this to be a bit adaptive so rather than give it a fixed pixel I'm going to alter this to be a percentage and I think probably the right kind of percentage that we're looking at is going to be about 20 percent that looks about right to me so we have a column and we have our first container in it now we want to add another container and this is the container that we're going to put into it initially a row and then two more containers to have the image and the form side by side so let's put the row in followed by the container and set that to be 50 percent of the width so we're going to change again the assigned to the percent sign and we're going to put in 50 there that looks about right and in terms of getting the height right we're going to hit the infinity button so that's filling as much of the space as it possibly can as I said being dictated to by the container above it which we said was going to be 60 percent now since we've got a container here we want to put the same thing over here the simplest way to do that is to highlight over here so that it's blue the container and hit Ctrl D which means duplicate this is probably a good idea good time for me to show you where those commands are found if we go up here and press this button here these are where you can get a quick view of all the different shortcuts that you've got you can you see over here we've got duplicate widget which was control D we're probably going to use all of these widgets at some moment in time but that's how you get to see where the shortcuts are Okay so we've got the layout partially sorted so let's kind of accelerate a little bit in this container we want to turn the background of that to Black that can be done down here a secondary background and we're going to change it I'm just going to change it to primary text I think that's as close to black as I can tell now the reason why I did that first is because I actually want to put it on the bottom as well it's always a good tip just to format anything that you might copy first that saves time in having to duplicate it later so we're going to go up to that container that I've just uh turned black and I'm going to copy it and I'm going to paste it into the column because I want it to appear at the bottom here so we can right click and we can paste that and with a bit of luck we're going to see it at the bottom so we've now got getting the layout sorted out we've got over here we've got one to put in an image it's going to select an image randomly from a royalty free image from the internet so you can get something I mean that's a little bit better it doesn't really matter because we are going to swap that out in a minute for the the actual image forgive me for changing the image once again but I'm going to show you now how to swap out the uh uh online image the royalty-free image for the actual one that we want now we have an option of using network which means it's going to take a URL for the image or we can actually use an asset now an asset means that it is compiled in the build so it means that if it's an APK that that image is actually going to be held on the drive of the phone and that would be preferable if the image is static and it's never going to change if it was something like a profile image then one would clearly want to use a URL one can't store them but I would recommend that if it's a static image it's never going to change which is in this case it's best to do it as an asset and the assets are over here on the left media assets I have actually already uploaded that media asset into the project was which was cheating slightly but just to show you how you do it you simply go to the upload media it's as simple as this go and find the image on your hard drive there there it is and and uh uh uploaded and then it will become available over in the project um in the assets so if we go down to assets it says no image no asset selected I'm going to change that I'm going to choose the asset that I previously uploaded and there we go and that looks pretty good to me um there are various options over here if it doesn't look very good whether you're going to for instance Define the dimensions by height that's clearly not what we want with probably is correct um I might just leave it at that even though it looks identical to this um it might be different I think if we change the viewport let's have a quick look at what happens if we change it into an iPad no I don't like that actually let's try let's go back to this one um so going back out to The Wider viewport we now want to start building up this form page over here um we we want a sort of white border on each side and we always want it to be centered in that particular container and the trick here is actually rather than adding containers straight in there is to create a row and then add a container to that row even though there's only one container in that row it has the effect of allowing us to be able to Center that and you see it's there on the left hand side if we scroll down onto the right hand side oh on the row forgive me uh we'll see that we've got the option of sound that we want everything in the center now that means that anything that goes inside this container now which is in the center um is uh it doesn't matter it's going to be able to be adaptive which is uh which is what we want now in terms of getting the width of this right so it's gone to its normal default of 100 pixels we're going to do that as a percentage but the percentage is actually a percentage of the whole width of the page and since it's half a page so say we want that to be say 80 so we've got 10 and 10 on each of that side we're actually going to put in half of that value because it's only half the width I know that sounds a bit illogical but it does actually work and that's about right although I think that is a touch on the wide side so I'm going to reduce that maybe to uh 35. let's try that and uh that looks approximately right to me and now because we've defined this container already then we can use the infinity sign to fill that all the way up to the top now every container that we add to this container is going to be within those boundaries and leaving this white space on either side so I'm going to move rather rapidly here so we do just need on this Viewpoint to be able to add a another column so everything goes vertical and all I'm going to do after that is to add a full containers to it one for the spacer one for the heading text one for the smaller text and one for the email and the button so I'm going to do that and come back okay so I've made one container with Infinity uh height 100 and I'm just going to control D though so I get four okay there they are all four of them I'm going to resize them slightly I think that one could be a little narrower um that's just the top space so uh the next one down is the heading that is about right the next one down is the main text I think that could be larger and I am using the drag button because it's visually easier and I think the bottom one there because it is the um it's the input form I'm going to make that a bit narrower so we've got some space at the bottom that looks about right to me now for the text in this box we are simply going to add the text over here and uh we are going to go and look for a proper font for that and I think probably if we if we'd set up everything in advance correctly that font would all already be sourced out so um it's defaulted to hello world we're going to change that in a minute I think I'm going to copy and paste in the correct text into this one I'm also going to do exactly the same for that one and I'm going to come back when that is done okay that's how it's looking at the moment I think this bottom font is too small uh let's have a look at body I mean let's go for body large I still think that's a bit on the small side let's change the font size there to let's try 20. uh that looks about right to me now we probably need a bit of space between these uh containers so I'm going to go up to the top container and I'm going to add some padding to that at the bottom that will ensure that it doesn't completely run into the text below it and one can either do that scroll up to where the padding is we can either do all four sides Left Right top bottom at the same time or one at a time so if you click that that will do all of four at the same time I don't want to do that because we've already got our border sorted out and I'm probably 10 pixels is usually enough on that and that you're going to notice that shifts this down gives it a bit of space I'm going to do the same thing for the container below it over here I'm doing on the container not on the text is typically um certainly how I do it and we'll write some of the same convention you could do it at the top of the one below if that makes sense so just put 10 pixels in there and that's going to make sure that there's some space between that and the container that's going to going to have the uh email input text and the button so let's get on with that um again we're going to want to create a row because we're going to have two uh fields in in a row um and uh within that row we're going to have two containers we'll just add them really quickly like this and we could control do that one actually and that will create two containers in that particular row and for some reason the Ctrl D didn't work let me do it again and there we go so now we've got two containers now they're not the right width for what we want so in this instance I probably would again use the handlebars I think the email should be a bit wider maybe that wide and the um this button container well that can come out it can't come out shouldn't come out beyond the edge of this container if it does it'll it'll do funny things probably get truncated so there we've got a place to put the uh put the email and the email is going to be so we might as well just carry on quickly and do that that is going to be a text input and if you want to just quickly find um widgets you can put in the name up here and it'll filter it so it's not a text it's actually called a text field and so we're going to add a text field and there we go it says label here we're going to change that in a minute and um into this container here we're going to put a button and after I've done that a good explain how we can actually format the first button to be exactly as we want and then be able to copy the actual formatting to other buttons that we use throughout the project but we are definitely getting there so we're going to have to do a few formatting tricks here to make it look the way the scope did and we're going to cover that in a minute in the design template we have the option of being able to create a theme widget and that allows us to create a reusable components reusable widgets that are formatted exactly as we want so I'm going to call this um well I'm going to call it something very original which is called button and it is a button so we're going to go to button here and we're going to create that and if we go to the scope of that button we'll notice that it's a certain green color that we're going to insert into the color over here so I'm just going to go and get that color okay so I found the color in the scope and the color we can put in straight in here one could have potentially have just sort of played around randomly there is a color palette there so that's going to take uh the button to be green now the button has black capitals um a fairly sharp rounded Corner we've got the color right so let's go and do that so we'll change the corners here um they're slightly less sharp than that we're going to maybe go for the rounded corner of five that looks about right and the text is black so we are going to go and find the text down here and change that to Black now I've gone into a different section of the scope and I've noticed in this particular screenshot image that the login button is white and I'm assuming that what we really want to do is to make that go white with a black border if I either hover over it or I select it and move away and again that can be done within the button uh design templates that we've just created so I'm going to go and do that so here back in uh the the the the the button template we've got the option of the hover style so I'm going to put that on and then we can now uh create a different hover style um in this section here so the fill kind of in this particular case is going to be something very close to White so I'm going to put that in so we're going to use that as the hover style it doesn't show up here and it's not Dynamic so it is flying a little bit blind and I want to set the Border to be black I'm going to play around with that and we're going to see how it looks in a minute okay I've changed a couple of things I've taken out the elevation over here I've set the hover color to be white and I've given it a border let's see how that works out so now that we've set up a theme widget for a button we can return back to our actual button over here I'm going to highlight that button and then we're going to go up to the theme style and we're going to choose the button like this hopefully and bingo there we've got button and capitals now we're not going to really know whether that hovers properly or not until we actually um test that out we can actually do that the quick way which we haven't done yet which is using this preview app button over there and it's relatively fast as I mentioned earlier it's not going to give you any kind of um functionality really but I think it will allow us to see whether the hover is any good and here it is this is how it's looking and we hover and bingo that looks pretty accurate to me so let's go and do the same thing for the input text field over here because that's going to be used a lot in the scope as well so we might as well get that sorted early on to okay in a very similar fashion to creating the button theme widget I've created an text field input field widget I have just changed around with some very basic things created a border there was an option over here as to the style of the Border whether it was underline or around but it's fairly self-explanatory in here and um so we now have another Widget theme I then went back over to our design and I applied that Widget theme up here and I called it input field that's the name I gave it I applied it and it came out looking exactly as I wanted it to be I've also changed a few other things around here I've played around with the fonts and the text to try and get it more more accurately um representing the scope I've played around with the button but I think we get the idea of how this works and how we use um the theme widget templates and so I think the next thing that we need to do is give it some functionality and therefore we're going to start looking at the join the list button and how we create actions but I think you'll agree that we're getting very very close in our design to the scope now would be a good time to finish off the Firebase setup so I've gone back to the Firebase console for our project and we'll notice that we only have the fire store database there that's for small information now we are going to have people logging in so we're going to want to add authentication to our project and it's as simple as pressing that button and in this particular case we are doing an email and password or authentication so we're going to enable that over here and we're just going to save those configurations and then the other um component that we want to add to our database is going to be the storage now the storage is for as I explained earlier is for larger files videos we may not actually have many of those if any of those but it's a good part of this tutorial to add that and there's no harm in doing so even if you don't use it so that would complete the setup of the database and it's creating a they're called buckets and a bucket is basically where you put a large lumps of data videos images that sort of thing um and actually we probably will use that for the profile image it's not a great idea to put images in the firestore database that's more about text when it comes to something a bit larger than text it tends to be better to put it into storage however it is worth pointing out that flutter flow does take care of most of that in the background and if we go across to Firebase now we will see that we didn't deploy initially the Firebase storage now we can do that um we do not want to manage it outside flutter flow it does a perfectly good job on its own so we're going to deploy that now that we've set it up and again we're going to be talking about the rules that govern what can be done with that data in that database again flutterflow will take care of most of that but later on we're going to lock down on the security of this application to make sure for instance that someone who is not an administrator cannot see an admin page however hard they try and hack the system and that's what the rules are all about and there are rules for Firebase storage and there are different rules for the firestore database okay let's have a little recap of what we're trying to do we're going to use the button here to add an email address address to the mailing list before we do that we want to validate that it is a proper email address and then we want to check to see whether that email is already in the database so the first thing I'm going to do is I'm going to create a new collection and that collection is going to be called mailing list and there it is and we need to add to that the place to put the actual email address itself so we'll start from scratch there are some templates here that can be quite useful if you're doing users products Etc like that but we're going to start from scratch and we are going to add Fields straight into here so the first field will obviously email and the data type of that is going to be a string and it is not a list now I probably want to add in a couple more here I'm going to and give some indication of where they joined the mailing list whether it was on registration or whether it was on the form that we're doing now I just think that's good practice okay so there we've got a from form form and a from registration click the box one can carry on just literally adding Fields but we don't need to so the from form form are both booleans now very quickly the reason why I didn't add that to the users I could have added a new field here which would have said mailing list but because that would have restricted only those people who were registered from joining the mailing list and that's not part of the scope so back to our page we're going to highlight the button and this is the first time we're going to create an action and an action is created up here if there's only one action in The Chain we can do it straight into add action but we are going to have several so we can open up the action and the first action is going to be based on the on tap and there are a couple of others that there's on double tap and on long press but we're going to do the on tap and we're going to add an action now the first action that we want is to validate that it's an actual email now we're going to go and do that in a second but I want you to see first is how this builds out because we're going to produce a Boolean is that a valid email or not and we're going to say if it's not a valid email we're going to set this here to add another action that action is going to be an alert an informational dialogue and we're simply going to say please enter a valid email address here we're going to create another action that is going to test whether the email is in the database already and from there we're going to get a Boolean coming out which is going to uh lead into a condition over here so that if the email is not in the database over here we are going to have another action here we're going to write all of these in a minute I just wanted you to see how the structure works out and we're going to add that to the database here and if it is already in the database over here and we're going to add an action we're going to add a soft Direction on that one which is uh we're going to put a snack bar because it doesn't need to really interrupt the experience of the user just to tell them they've already signed up for that so you're going to show a snack bar and we're just going to say in here that it's already in the database email already on mailing list and that's going to show for 4 000 milliseconds which is for seconds and um over here this one as we said is going to be the one that adds to the database so we've got to start really um creating these actions now um there are other ways of validating whether an email is an email or not but I'm using this as an opportunity to start looking at actions so that's what we're going to do now custom action section which is over here and we're going to write them so we're going to add a custom action and we're going to call that validate email and we are going to use the code copilot to write that for us the wording needs to be fairly carefully selected but validate an email and return a Boolean would be good now it is quite important to set up the return values over here in advance because the AI will actually look at that when it's constructing the action and so we do have a return value of a Boolean and we've also got an input which is the email address for it and that is a string and once we've got that set up we can hit this green arrow over here and we can let the magic begin and it's not very many lines of code it's simply saying if the email is empty we're going to return false and we are going to say that if the email fits this piece of code which was called regex which has been written for us so it's fairly simple we're going to return if it doesn't fit that we're going to return a false as well and if it does we're going to return a true and once we've done that we can save the action yes I do want to save it and now we can return back to our page back to our button back to our custom actions go in there and we can add the first custom action over there and the custom action is action validate email and that is we're going to return a Boolean from that okay so we need to give the custom action result a name is email valid would seem to be fairly clear and that gets can get them passed down to this condition that we're going to set and the condition is a single condition that is a single condition here and the condition says that if the custom action returns so the output is the email valid is equal to the second value which is a specific value of scroll down oh I knows it's a Boolean of true then we're going to go down the true Avenue we now need to create the next action here which is to decide with the email is or is not already in the database so we're going to scoot across to custom actions again now I've already done this one because it really was identical in the process to the previous one and I didn't think we needed to do it twice um I used the copilus again to write this custom action for us but what I have done I've added to the custom action here exactly what I told the AI to do and it has to be clear so I think it's a good idea to give this an example query Firebase collection called mailing list and return Boolean true if it exists um and I set the input over here to be the email and the return value to be a Boolean so that it knew that it needed to receive the email as one of the parameters and as you can see it's done a good job it's basically said where email equals email if I guess a response if a document or there's a collection with a document in there I'm going to return is not empty that means that the record does already exist so back to the button actions tree we can now set this one to be the uh the custom action that we've generated does the email exist um uh we do need to set again over here the input value as being the email and that comes from the widget State and the text field so that it knows what to check that'll that'll remove one of our errors up here which we were leaving to the end to see if we've got any left when we finish this and finally this action here is thankfully not a custom action we can take that from the backend database here we are going to add that rectifier so so fast firestore we're going to create a document and we're going to create a document in the mailing list because we've Now set that up elsewhere and we're going to add the field email and it's going to be not a specific value it's going to be from a variable and that variable again is going to be from the widget State and it's going to be the text field of an email now if you recall we also set up a Boolean as to where it came from did it come from the form or did it come from a registration it came from the form so we're going to edit that and we are going to put in that a specific value and that value is going to be true so we're going to know where that um mailing list entry actually came from now the final thing that we're we're going to want to do here is after that we want we're going to add another action this can be a soft action again which is a um it's going to be a snack just to say that that record was successfully added so email added to mailing list now if we're going to do this really properly we should actually possibly test to see whether that email actually was added to the database and I'm going to show you a little technique for doing that because even though it may not seem important in this form it might be later on we're going to give the output of that back end call a um a a result and we'll say um mailing mailing list results and then we can actually do a test on that so we're going to add a condition here and the condition is going to be um a single condition which is a single condition there which is is and we're going to go to the action output of the mailing list result and we're going to say that if there was a document reference generated then um so it is equal to is set which means that it did add that record to the database then that's going to give us a result of a true or false over here and if it's true we can then show the snack bar now I want to move that up there and the simplest way to do to do that is actually just to copy it so we're going to copy the action there and put it there you can't actually drag it across and we're going to um paste that action in Pace the action and so we've got the the snack bars now that that all works and then we can remove that one and uh over here if it doesn't work we're going to add um a I think we should probably add a hard action a hard uh alert on that one and that alert is going to say something went wrong please try again something went wrong please try again and at that stage we are going to add a terminate and so the final action here which is uh show a snack bar on success and we still have an error so let's go and check out what this conditional action execution acts as improperly set so let's go and have a look at that and it appears to be if I highlight this one we can see that we've got something that didn't quite uh didn't quite like that it doesn't seem to does um email exists I see my error now it was actually in the custom action here I did not add does email exist as the output which now allows me to correctly Define here the does email exist as an action output does email exist and we can confirm that and we've got no errors there so that is now finished um I think we need to start testing so we'll head out of the actions over here and this is going to be a time to test we're not going to use the red button because remember that doesn't give us the functionality therefore the actions will not be triggered we are going to use the test button which is going to give us 28 minutes of time to make small or major changes in that in a single session which can then be reflected in that screen in Virtual real time five to ten seconds it does take two to four minutes to compile because it's doing a proper compilation there so we're going to put it on pause while it happens okay and here we are so we have space for the email address so let's deliberately put in an incorrect email address I'll just put in Sam join the list please enter a valid email address okay that does work Sam at test.com uh tests.com join the list snap by email added to mailing list okay let's go and Scoot off to Firebase and see whether it actually worked one way of doing that is to go across to your database over here to manage your content content it takes a couple of seconds to come up so I've done it already pushed it over here and I've gone down to the mailing list and uh would you believe it there we've got our samtests.com and the form from the the from form form as opposed to a from a registration is set to true so that actually works now let's go back and see what happens if we try and add samtests.com again now the first thing I noticed that Sam and test.com is still there so I'm going to add another action that clears that field so that you get some indication of the fact that you've submitted that email let's just hit that and see what it says email already on mailing list I should say in mailing list so the one thing that I want to do is I want to go in and change the action for that and I want to clear that form uh after the form has been submitted so we're going to add a final into that action tree so it's a little bit debatable here is whether I would put it here where it would clear the form if it was in error or it would only clear the form if it went through I think that's a personal preference so I'm just simply going to add another action here and I'm going to want to clear that form so under the widget actions here widget interactions here we can see clear text Fields is an option and there is only one there it's not been very well named and perhaps we should have named it better but since there's only one on this form we know that it is that text field that needs to be cleared and we can close that now the beauty as I mentioned before of the test mode is here is that I can do an instant reload I don't have to wait two to four minutes again and you'll see that it's going to take a couple of seconds and then we're going to be able to see whether indeed that also worked okay so we're we're back here and we're going to do Max at test.com oh actually I'm going to make it so that this um that the cursor is automatically put in this field because I've just missed it which is an option so we're going to do Max at tests.com join the list and if that worked properly now it's removed it there so that you know that it's actually happened now I did find it a bit frustrating as I thought my cursor was in that box and it wasn't so how can we uh change that to make that text field in Focus as soon as you open that page I'm going to do that now okay I've highlighted autofocus oddly that was actually on so it might have just been my bad typing but that does mean that when this page is open the the uh the cursor should already be in that box now with we're nearly finished with this particular page but there is one thing that is bothering me slightly and if we go over to our test mode and this is what it is is that if we go change the viewport on this we can see that the join the list is being truncated and that little sort of black and yellow stripes there means something that's called an overflow it means that what you've got there doesn't fit in the space anymore now um I've thought about this quite long and hard and um I've decided that we need to do two things here I think we need to stack these this form of this image one on top of the other um when we go into the smaller viewports here and the other thing that I think we need to do in every view except for the desktop view I think we need to move that button down to the bottom so it's underneath it and I think the combination of those two things will make sure that the mobile version of this application is properly adapted so I'm going to go away and do that now so I'm going to introduce two things here really which is I'm going to introduce uh what are conditional visibilities depending on the viewport and I'm also going to change this which is set as a row into something that's called a wrap and what that means is a combination of a row and a column which means if it can fit in a row it'll put it put it in a row and if it can't fit in a row it's going to put it in a column and fortunately one of the things that you can now do that's been recently added to flutter flow is that if we go and find the alcohol let the offending uh row we're going to want to swap that out for a wrap so there's the row it used to be a bit tricky to change that because you you'd have to take into consideration all of its children but now they've rather beautifully made this very easy so we can replace that widget and we're going to replace it with score oh there it is with a wrap now with a little bit a little bit of luck this is going to do what we want um and it won't look any different from this viewport but what happens if we go into a smaller viewport let's go into the iPad okay it's not well formatted but it actually has done it what about if we go into the um an iPhone it's at uh we're still going to have enough space it's getting a bit small ah no it's getting a bit smaller space because the other thing I'm going to do is I'm going to stack these images so that they get at least the full width of it but it needs to be a bit of formatting I think on that wrap and um I'm probably just going to assume that that's a lot of common sense going on with uh putting in the um the spacing correctly uh getting the padding right on it so I might just do that and if I come across anything a bit complicated I'll come back um into the video and explain but I'm just going to play around and play around with the formatting of that now the second thing that we want to do is let's just go back to the wide viewport here um is that we want the image to stack on top of the form um keep doing that sorry on top of the form uh when it gets narrower and I think that one that viewport looks okay if we go to this one I think it looks okay there I don't think that anyway it's a good opportunity for us to look at some of this responsive uh viewport options that we've got over here now if I we're in the um the narrow view of it at the moment if I go and press that button there this is whether it's visible or not in that view in fact I've not highlighting actually uh the the I want to highlight the container the major container of this which I think is this one so that the whole of that vanishes you can see you can see that we've it's disappeared yet if I go into a different viewport it is there okay so go back to iPad it comes back again because it's only going to affect the upright version the portrait version of the mobile phone and then what we can do is go and do the same thing in Reverse we can copy that picture into a column and copy that form into a column and then we'll set that one to be on and all the other ones to be off all right it's a little trick um but it does actually work quite well and it it's effectively saying we're going to give you a different layout depending on the viewport now I think I'm just going to explain that that's what I'm going to do I'm going to do it and probably come back because I think I've explained it possibly well enough for you to get at least the principle of what I'm talking about here by simply saying that we're going to create uh copy this picture and that form instead of it being in a row we're going to put it into a column and make it in a column form when the um the the viewport of that is narrow now one thing that we should get in into the habit of doing is naming these containers to be what they are because I'm going to copy that and it's going to copy it down to the bottom and if they're all called container I'm going to get a bit confused so I'm just going to rename them so we can see what's going on and we can do that over here by just putting the pencil and we can still leave the container there but I'm going to call container I'm going to be very lazy I'm going to call it m for Middle and then I'm going to change that um m t top m b for bottom Okay so we've got I've changed that actually to to container middle row and what I'm going to do is I'm going to control D that so now we've got container two container emeros rename one to to uh column set the visibility of the row not to be visible in the case of the mobile phone and the column to only be visible so get rid of those three there if it's in a narrow view of a phone swap out that row there for a column okay I'm getting there I've had to do a bit of jiggery pokery on this but we've got a middle column here with two containers in it 50 or 30 percent it's fifty percent of the available space left which is 30 percent and I'm going to put the image in here and the form in here okay getting there obviously this needs to be formatted so it's wider and the text is smaller decided to make the top and bottom containers invisible I don't think they're necessary anymore it's for the mobile view okay after a bit of playing around I managed to get the mobile phone to look like this and the desktop to look like this but we have a couple of Errors up here and I know what they are the problem is that what it literally says what it is the action output variable are the same for two buttons because we've got two pages effectively here because I copied this form in then this this action has also been copied across and uh we need to go in and whenever there is a an action output value here is email valid I'm just going to change it to email valid one and then obviously we need to change the input where it uses the email valid one to email valid one I'm just going to go through the whole action tree and redo that so for instance here we need to swap that out there as well for it is email valid one Etc okay I've gone through them all and uh the errors have gone and I suspect I also know what the warnings are they probably want us to validate our custom code once more that's just a quick uh question of clicking that button and letting it do it and the firestore rules set up um well we can go and have a look their warnings we're not too worried about them at the moment and that really ends the um the first page now the next page I'm going to do is going to be much much more rapid because I'm not going to repeat any of the tutorial of the first page I'm just going to introduce the new things and assume and hope that the tutorial up until that point will have given you enough Insight in how to work out how to do them for a new page so let's get on with the second page now

Channel: Pro NoCoders

Views: 17,581

Keywords: Flutterflow, tonya aiossa, pronocoders, tutorial, app building, flutterflow tutorial, how to build an app, how to use flutterflow, flutterflow review, flutterflow basic, flutterflow easy

Id: qHC9mt75YJE

Length: 73min 28sec (4408 seconds)

Published: Fri Sep 08 2023