Form Validation in FlutterFlow (Full Tutorial 2023)

foreign hello guys uh good afternoon uh it's good to have you here again and um first of all I would like to apologize for you know reshadowing the class a little bit far away from the usual time that we are familiar with Okay so uh I had to get some things sorted out right yeah so um we are going to be doing something like super exciting today yeah we're going to be uh working in form validation yeah so be working on form validation today and this is something that is super important for your projects right uh you you won't be able to really build um you know a really interesting application if you don't uh learn how to do form validation yeah so our joy welcome uh dollars welcome uh Kofi welcome in the Kareem welcome good to have you here all right so we're going to wait for a couple of minutes maybe uh two two or three minutes then uh we can start fully but I will just continue talking okay so it's good to have everyone here and um apologies in advance I am not in my um a regular space where I stay to create the videos uh the tutorials so um it might get noisy at some point uh people might walk past me the bag they might close open and close doors so but just bear with me okay all right um yeah Peter good to see you here divad good to see you nurani good to see you all right so um we're going to kick start like immediately yeah because there are some things that we will do at the beginning that uh it's something you already know yeah so we will just be really quick with that and um let's see what we can do all right I'm going to start presenting like right down and then we can we can observe everything okay so all right now here is a Florida flow floral flow is what we're using to build applications faster than ever right so um this particular tutorial is going to be about how to create a Implement a validation in your flutter flow project I will try as much as possible to give you some explanations that will make a whole lot of sense to you yeah maybe you have checked this out somewhere else it didn't really quite get it so I will try to make it even simpler that's like why you should subscribe to this YouTube channel all right and turn on your notification Bell so that you can always learn whenever we put up a tutorial or hold it a live class like this so I'm going to uh go ahead and create a new project let's call it valido I always have very cool names for projects so valido so that's like the validating application so we're going to just use it to experiment on form validation so I'll click to create blank and then I'll go ahead and click on next step it requires me to provide Firebase ID so I will go to firebase.google.com then from there I will have access to these I'll click to create a new project I will call it valido all right then I'll click to continue turn out with the Google analytics I don't need to wish the resources click to create project wait for a couple of seconds so that it can complete provisioning resources for my project and then I will get the project ID put it back plug it back in in Florida flow and then we will be on our way to building our valido application so basically valido is just always trying to see how we can create um or Implement validation especially form validation in our photo flow product okay so uh let's get right to it I'll come here to settings click on Project settings and then I will copy the link uh the ID here and then I'll take it to photo flow and paste it and of course if I go ahead and connect now we will have some errors okay so because we have not added Firebase Firebase doesn't have access to these flutterflow doesn't have access to these Firebase accounts so let's go back here to uh Firebase project go to users and permission and click to add member and it will say Firebase at photo flow dot IO okay so um let's go ahead and turn this on Click put it as an editor and click on this and then this okay so like this we are good uh everything is working fine now let's go to here and click on connect and uh like this we will be able to have a success right so it's successful um here I want us to do uh maybe it's gonna be a form just basically form so we don't really need to do authentication if we need to I will turn it on so I'll just click on this uh to set up a page let's call this maybe uh home yeah so I'll call it home and then I have to go ahead and auto generate config files so I click in there and click on generate files I wait for a couple of seconds and then it will finish up it does this under a minute so what are we trying to really create here we're trying to create uh to see how to implement uh form validation when it comes to your photo flow project and then I will try to explain that in in a minute all right so let's say this is your form let's say uh let's say this is a page called form right and then you want to uh you know have some forms here like a form here with uh um with a button that says maybe create account or submit form or something so let's go ahead and go to widget tree and set it up really quick so I'll come here click and add a child to these widgets and then I will say um I would like to put it inside a row so I put it a row and then I'll say uh text field search for text field there click on this and then quickly I will go ahead and then do some decoration to my text field so I will scroll down to input decoration change it from underline to outline and then the Border here I'll click on it and give it some form of grayish maybe something like that and then I have to go ahead and then um what else should I do here uh let's see let's give it a border radius I would like to give it a border radius of our maybe 18 16 I think that's okay and um now I need to just go ahead and give it some padding right let's say 16 from the left and 16 from the right and um for the for the for the padding on top I will give the padding to the row all right so I'll just say uh 16 here all right so it looks okay but I think I want the butter radius to be a little bit more curvy all right so I'll say 36. okay so like this makes sense to me and I will come here to the input field let's say let's call this first label let's see let's say email right so let's just do like that email and then um let's say enter your email here enter your email here this is like the hints text okay so uh like this works uh okay so I think this is okay for me I don't know it still looks so uh it looks a bit weird so I say eight okay yeah I think I prefer something like this so uh let's duplicate this I just clicked on the widgets the row and did Ctrl D and it duplicated so here for this one I will say password okay so let's um let's say enter your password Here okay so password Here can say done and then change this from email to password okay so we have it like this we're good the next thing we just need to do is add a button a button that will complete the actions so I'm adding a button here and um first of all I didn't ask you if you guys could hear me I'm stopping to share now please can you guys hear me uh I forgot to ask please let me know if you can hear me uh Ben welcome bammy welcome um Basit welcome and uh okay so you guys can hear me thank you very much um okay thank you all right so I'll go ahead and then present again I just wanted to be sure that everyone could hear me um let's see okay so uh this is this is us uh let's go ahead and then change the the width to 360. this is just something that I know you already know how to do um padding here let's say 16. all right guys so uh we're ready to start some phone validation here right so if I go ahead and click on this you will see how it looks like the form uh looks a little bit good now yeah this is it looks sweet yeah so that's like the idea so the idea is for us to um be able to click this and something happens all right so basically for form validation if the user doesn't feel something here and doesn't feel something here this button should not be activated or it should tell it should prompt this user that okay uh you need to feel something here it should show uh some things that lets the user know that okay something needs to be put here you I will just show you uh some basic stops and you can you can carry on from there okay um let's see what we can do let's see the very first uh way of validating your forms okay so uh let's start with let's not call this button let's say uh create an account or something yeah so create account yeah so since we're using um email and password not like submit we don't want anybody to submit so it has to be done through a validated process so let's say create account and um how do we go ahead from here what we are going to do simply is let's first of all look at the the properties of this uh button right so here if you come down here for every single widget you have in photo flow on the right hand side is the different properties like the different things you can tweak or manipulate to get your application working the way you want it to work so let's come down to the there's a place here that says button disable options all right so this is what we haven't talked about before and that's what is going to happen right now that's what we want to talk about so let's go ahead and turn this on so uh of course our something shows here it it tells you already that um this is uh this is like some form of uh uh event that you can manipulate right so you can try to click here and then do some some things so uh let's see uh here we have the disable color is it says here black okay it's not set so let's let's use gray as a disabled color it has to be something grayish maybe something like this all right so yeah something like this and um text icon color we really let's just forget about that one so let's try to see something first let's come here and go down to constraints right so here you see conference and let's just uh turn these uh let's say let's turn into true okay so if it is if if it is true it means this button should be disabled you see here I turned it on so now I'm saying uh it's true so disable the button all right so I haven't given it any condition I'm just like fixing it all right not from any variable but from specific value all right so the specific value here is just to click and say true all right so if I go ahead and test it right now and just preview it I will see that the button is uh okay oh that button is supposed to be disabled let's see um uh hold on preview in UI Builder Okay so this is how it's supposed to be why is it not turned on [Music] um okay so let's see let's see let's see button disable options true what happened why didn't okay I will have to try that again it's supposed to be like the color that we have seen in the the preview UI Builder okay yeah so I think it works now so uh this is how it looks like right so it's disabled and not just disabled right you can click it you see it's it's it's done you can click and you can click on this once but you can click in the create account all right so that is just for us to like we did it by uh by forcing it we are forcing it to to be disabled but none of course uh we want to use some conditions to um you know to tell whether whether or not to disable this button so but now you've seen that uh a condition has to be made inside this particular place and it has to be true for this button to be disabled okay that means uh if at all we want to set up a logical uh condition right we have to make sure that the the result of that logical condition comes out true even if it's like um two scenarios okay so because like this now we have two scenarios this is a scenario this is not a scenario that means this particular scenario has to be uh you know true for that condition to be true all right and this scenario too has to be true for that condition to be true so something like that so um let's let's try to just like implement it now instead of just uh fixing it like uh fixing the uh the condition here let's go ahead and then just remove this all right so I remove this and then I will go ahead and um click on this and what I want to do is I want to set conditions all right so this is also going to logical conditions so I clicking conditions I want to set a single condition all right so I'll click on single condition now I am going to go ahead and and fix in the first value of the condition so I will say I'll click here and say uh then I'll come here I'll I need to go ahead and then uh do certain things I will be using the the the the widget state for instance so if I come here all right and I think if we do it like this we will run into some troubles but let's uh let's try it first and see if it works or not I want you to see it so the idea is first of all for me to say um let's go ahead and click on this and say if text field all right so I just wanted to see it is equal to all right so it we can say equal to but we can the condition that we're supposed to really use is if text field uh is set and not empty uh preferably actually we supposed to use this it's set it's not set or is empty all right then something should happen right that means um something is happening in this scenario right now but uh this is not going to work because uh this is not how to do it really this is not how to do it because the text here the the data type for for our text field for either of the the text fields that we have the email or the password is is is just a string it's not a Boolean so we need to go set up a situation whereby we can produce a result uh you know as a Boolean right so uh this is not what we're going to do instead we're going to go ahead and click on this and then um what do we do uh okay so what do we do we'll just go ahead and say conditions single conditions and then um let's go ahead and then do some things now um I think am I missing anything no I'm not so I I look at what I did let me cancel it and take it back so you can see let me remove this so I clicked on set and then I went to single condition right and then I went ahead to uh single conditions here and when I'm trying to set the values right I didn't just go ahead and set the values here all of them I clicked on insert again and then I came here and then I actually went ahead to do a conditional scenario all right so here I will say if all right I want to do some form of even else statement let me pull this away I will say Eve I will come here and say Eve what if the widget State that's the text field all right if the text field um let's say let's go ahead and then choose some value here okay I think we have missed out something um what did I miss okay we're supposed to uh say that if the text failed and then pick out a particular value for it the value here is supposed to be let's see our conditions no that's not the idea okay so I think I I have to go back a bit here and then do it another way around it okay so let's try it let's go ahead and then try it like this if uh if the where is it the text field all right no I'm not getting the options I'm supposed to get okay so I think there is uh there's something wrong somewhere but I'm not getting I think I'm missing out something and uh okay so the idea is I'm supposed to like say if like set a particular condition and say if the the text field value all right is is is not empty right then something should happen but it's not um I'm not saying it uh just give me a second let me troubleshoot it immediately hold on I'm gonna stop sharing quickly um okay just give me a second I have to try to troubleshoot it quickly [Music] okay so I think I I think I just figured out what I had missed from my previous project okay so I just quickly present again so um I think it was just a a scenario of let me start all over again uh okay so um we're supposed to use combined conditions are okay conditions we're supposed to use a combined condition not a single condition that's like the the mistake I made so we want to have like two different situations right so uh this single condition is just for a single condition that means it should not it will not favor any other thing right so we're supposed to use um a combined condition here and then uh technically if you go ahead and try to use a combined condition here you would be tempted to try it in two ways you might you might be tempted to try to say uh uh let's go to widget for instance and say text field so uh text field and or you know maybe you want to go ahead and pick another one and say this widgets that state and then you go for the password this is one way not to try to do it it's not going to work at all so what we need to do here is we need to go ahead and then uh like set some conditions for our project and um okay so let me pull this away and uh delete it all over and just start okay so here I'll just go to conditions and say combined conditions and then I will click in here and then I will go ahead and then give it this condition give it a condition here so um if let's try this one out first and if it works then we can try yes all right so I think that's this is the one that works so when you're trying to uh you know set up this whole uh validation scenario you have to go ahead and then use a combined condition and then here you come here and then click on condition and you want to now go ahead and set up single conditions for each of the scenarios that we have all right so here we'll say the first value here is going to be um is going to be our the the widgets that we have here so we picked the email for instance so here it's more like uh we're checking we're checking Eve email is equal to so we have here double equal to sign it's more like trying to say if um this is another way of saying equal to completely like this particular slide has to be the same as the other side for a complete situation to be true uh okay so we have text uh text field here has to be equal to we don't want it to be equal to right we just want it to either uh we want it to be is set and not empty uh preferably but I like if you want to follow the should I say um uh best practice you're supposed to use this particular one that says is not set or is empty all right so I will try to do a recap of this at some point right so I will go ahead and then click and confirm there and then now I need to go ahead and then do another one right so the very first condition here is for the the text the email field and we had to do we had to use combine multiple conditions or combine conditions because we wanted to create a scenario for both the the text field for email and the text field for a password so let's go ahead and set it up for password now so you click here and then you come to uh conditions single conditions and then the first value here is going to be your uh go to widget State and then we say password the same thing we did to the other one we'll do the same here so it's not going to be equal so it's going to be it's not set or it's empty so here we're trying to say that um it should return some form of our value let's say true all right when it is it is when a particular when if this particular field is not set all right and always empty something like that okay so we go ahead and then click and confirm so now we have two scenarios that says for the first part here text field for email is is not set that means nothing is there or is empty all right and and then the second condition is uh the text field for password is not set and is also empty all right so don't forget the whole idea the whole reason for us to do all of this thing is because we want to make sure that the the result of what appears here not like the later or something but the result of the scenario that appears here where we have on set is a true scenario because it's only when it is true that this button will be disabled okay and uh let's go ahead and then click on confirm and then we will try it again of course we're going to run into some uh errors and of course we'll fix it okay so here we have um this is showing showing us uh the thing but now uh You observe we have not typed anything at all right and uh it is not appearing like it's not uh giving us what we need to see this button is is totally not working it's still disabled so let's go ahead and just click close this and I'll close this and I'll show you why now the reason is because uh it's using some sort of state right because um we need to make sure that these fields when a user gets to uh type inside this text field it has to like the page has to upload itself like maybe reload or something not like reload but it's just going to uh like rebuild the page and present it to the user taking into consideration all the different Logics that has been implemented for just this form okay so we will have to scroll down and then we will look for a particular uh button here for the text field let's see um we need a button that is going to be um let me see where is it autocomplete auto field update page and change okay so I think this is the new name right so um fluoroflow gets to uh change it a lot right it changes a lot of things like it's like changing itself frequently so say update page so we want to update page but we don't want to make it 2 000 seconds we just want to let's try 100 100 milliseconds okay sorry that was a 2000 millisecond that's two seconds so we don't want to make it we don't want it to wait until it's two seconds before it changes the page so we wanted to change the page uh you know frequently like at a shorter time so we will put it put this as 100 and that means when the user types in something it's going to uh delay 400 seconds before it updates it that's like the idea so because there's a change when the user does something on this form okay so we will do the same thing for the text field let's let me come here and update uh page and change let's change it to like 100 seconds 100 milliseconds okay then let's try it again and uh this time around we will just uh look at it the button might still be disabled yes because we had previewed it uh we had turned on the preview UI Builder okay so um this is still not gonna work until we turn off the other preview UI Builder let's see how we can do that so we click on the button here and scroll down and then we will see here so the the preview uh preview in UI Builder is um is what we we see here all right so let's go ahead and then turn this off and then really try it um I hope this is not going to require me to test it only on the on the run I think it's gonna require me to test it on the Run well it doesn't work and it doesn't preview in real time with the preview UI Builder well that's not fair a soul no no no that's not fair okay so basically I think uh what we need to really do we need to run the applications we're going to have to run the application so let's go ahead and run it and while we are running it I will try to like make a recap of all the things that I have said okay so uh what we have been trying to do is like create a a validation like a form validation all right and uh simply put when your user doesn't type in something here but wants to go ahead and click on create account they shouldn't be able to do that because if they can do that that means they will put some empty information in your database and uh in as much as there's no content stored in these uh these empty Fields but I think over time if it accumulates like that you could your application could run into some problems so it's better that you set up your phone validation successfully um So to avoid any form of um discontinuity in the progress of your application during let's say production mode for instance okay so um what do we really do when we are trying to validate it first of all I try to show you that if you click on just the button itself and then you scroll down you will be able to uh see a button here that says um not a button a feature here that says button disable options and then you have to turn it on and then when you turn it on and we have to just make sure that the value that is inside displays is uh is true so I think our valido app has finished running let's try to test it quickly and then I can come back to explain it all right so guys you see now the button has been uh the bottom down it's uh disabled right because that's what we did the condition that we have set here is currently true all right because nothing the user has not typed anything here and the user is also not typed anything here so but now there is going to be a scenario right if I go ahead and then type something like a y noun right we have that the button is activated but that's not supposed to be the case right we are supposed to uh make sure that the user types something here and type something here as well before we activate this so and that is what we are going to talk about now of course it's just here if I type here it activates but it's supposed to only be uh activated only when both Fields have been filled up so but the the problem with that is something I would try to explain but let me just go back to the recap I was trying to make okay so for a button to be disabled right you need to put a condition here that uh equates to true all right and um it's only when that condition is true that's when the button is going to be uh uh uh activated now when we type in something here the condition one of the condition is true and as a result of that both conditions now become true because we're using Eve and something else this is like uh some mathematical thing I wouldn't like to go into detail detail with but I would just show you what to use uh and uh it's my try to like help you out in the whole scenario let's come back here I'll click inside this let's look at the conditions we're trying to set so we said we had like place two conditions here we use a multiple condition all right so uh later in a later time you can re-watch the video to catch what I was saying okay so uh here is uh the condition that says the if the text field technically that's what it is if the text field is on set or it's empty all right so make this condition true so uh if you're told you have done mathematics or for the mathematics you can remember in some scenario in your class with where you are learning something like if T and T is equated to T right so that's like the idea so uh even if it's t and F right that's true and uh by the end I mean the end that we have here so if this is true and this is false the overall result is going to be true that's just how it is it's mathematics all of this uh computer um programming and setup and everything is based on mathematics right so it's also respecting the same rule here so if this particular part is true and this particular part is false the whole result is going to be true that's why we have a condition here that becomes true but now if this is false and this is false then definitely this is going to be false all right uh right yes this is going to be false and so for us to fix this error right we just need to go ahead and then use this other condition that says or because uh for this condition to equate for these two conditions to equates to true all right that means both of them have to be true that's like the idea so I'll click on confirm and then we will run the application again and see how it works all right so this is the very first build that when we type something in it shows all right I will compare it to what we are like currently trying to uh achieve here all right sorry about my background really sorry okay so um we're going to just wait for a couple of seconds and then you will see uh what happens here okay so let's see what for for the meantime let me try to explain this again so what I did here was simple uh let me go ahead and then bring another button entirely so I can try to explain it so um should I bring another button yes let's just bring another button I'll click to add another button now this button is not to confuse you I just want to go ahead and then do the same thing again without tampering with this one so uh this button I will give it another color maybe this one and uh fine and uh I will give it 360 as the width of the button give it some padding here 16 just to be a little bit far I just want to redo the whole thing again without having to change the entire project so just to give an action to this not an action like to set this whole thing okay so um let's come down here to uh here and say create account create account okay so that's it and um all right this is how we have it now for you to make this button disabled the very first thing I said was just scroll down here and then turn and turn on the disable button disable option here our application is done running but I wouldn't want to interfere with what I'm explaining now and then uh the next thing you need to do is go ahead and then make sure that the condition set any condition you need to set and make sure that the outcome is true for this to become really disabled so what did we do we went ahead and since we have like two Fields here right we have two Fields here we went ahead and then uh clicked on conditions and we want to do a combined condition so we'll click in here and then after that what we do next is go ahead and start setting uh conditions for the individual scenario all right so I'll click in here and then go to condition and set a single condition for it and say the first value here uh will be the the widget state for text field right and then I'm now trying to say that this text field uh uh is not set or I want to check that this text field is not subtle empty and then after that I return it to what we have in this other side so basically that's it so if it checks and says that it's it is on set and it's empty it returns this place as true and then uh the same thing with the password it comes here to the we come here we go to condition single actions and then we go ahead and then do the same thing click here and then uh pick the widget state which is going to be password this time around and then we're not saying equal to we're saying it's not set or is empty and then we go ahead and set it and of course we have to use or just to make sure that uh it's only when the two situations are true that we want to be able to get a final result here all right so that's like the idea okay so I I hope that that recap made sense um I think uh I don't need to rerun it I can just rerun it while we're testing the other one so we can just see what's up so uh this is the what we what we did and now of course it's disabled fine if we go ahead and then say email you see it's working now so we put email here one condition is true but then we use an or operation all right um and it requires that uh the two conditions have to be true for it to produce a result that is true and that's just like how it works so if I go ahead and then type uh let's just go ahead and type the correct thing let's say uh no code our HQ answer gmail.com all right and uh I click here and I begin to type password that's when we now have it become bluish that means it's not activated I can really really create an account okay so of course we have not set up anything we've not set up any action so we can't really create an account uh but this noun shows you that okay yeah you can add an action to it because initially uh nothing shows yeah this is not clickable it's see the my courseware is different this is a hand and when I remove it it's just a normal corso and of course the hand shows you that it can be clicked this one it cannot be clicked so uh I hope you've seen the difference and I hope you understand uh this one is also done running uh there's no need to check that okay so so far you have learned the the one way of doing a form validation let's go ahead and then try something else that is a little bit intense and uh a little bit tricky and and and hard not not so hard but you you will understand okay Let's uh let's go ahead and then try something else so here I want to um I'm going to go ahead and then let's let's just do something let's go ahead and duplicate this page let me duplicate this page and this is going to be uh this is home but let me call these home maybe home two this is another page entirely so I will click on this and just delete this right so I click on this I want to go and delete what I have done here and I'll just turn this off right so um and I just want to we're not trying to disable the button this time around we want to just uh uh flag and tell and let the the user know that okay a particular field is empty or just show them in particular maybe uh make the color the border of this text field to be read if at all they haven't typed anything inside and they want to submit the form okay so let's go ahead and try that so first of all we're going to use something uh called uh the the the app stage right so we will come here to app stage so this is App State and we're going to create a state for it all right so I basically uh you use your app State when you're trying to Define variables you want to store on a device across different pages that's like the idea and let's go ahead and add a a particular what is that what did I just click add a state variable yes add a state variable so let's say this is going to be email email should I say email email email what email State maybe email State and of course it's not going to be a string it's going to be a Boolean all right so we change it to a building uh because we are basically playing around with true false all right that's why we needed to be a Boolean so the data type is a Boolean and then we give it like that and uh let's create another one for the password so we'll say password our state and it's not a string it's a building and I will click on Create and like this we're good okay so let's go ahead and then quickly do some setups and um we'll be on our way to finishing our class this one might take a little longer but not too long let's see how we can get it done properly now if you come to uh uh let's come to this border all right and then uh of course the properties of the Border let's come to the properties of the text field really so let's come to um where is it so we have a border collar here border color and um let's say uh should it be your border color Focus border color let me see let me keep this Focus border color a red and see how that looks like okay so uh let me see let's preview it and just see what happens okay so our all right so this is the focus bother color and then the other one is like the real butter okay so I think this is what we should use not the not the the butter itself because it will make our application ugly I will explain what I mean so here is uh this is a text field and then we set the focus border color this is the focus border color all right and we've set it to Red we want to be able to use these to show the users something all right uh if at all they don't feel uh the phone properly or they've not filled it at all then we'll show the users the color red of course red shows as a danger there's a problem you need to be fixed so let's go ahead and come to the second one password field and also do the same thing uh let me see Focus butter here and then I'll pick this color right all right so uh if we go ahead and then preview it again we will see that lets me close this one we will see this so this is focus I click on this so when it's when you're focusing on this it shows this when you focus on this sure stays all right so basically we want to show whereby when the user tries to click on this right and if at all this place is empty it's a show red it's a show red and of course nothing is going to happen here and if this place is also empty red and it will not allow these things to go ahead all right so let's uh let's go here and try to see if we can achieve that I hope we can all right so um let's see uh what do we do from here let's go ahead and then set some conditions for some conditions that will produce like Boolean results for what we have done so far now let's go here to the focus border collar when do we want the focus border color to show let's go ahead and set it first then after that we will go ahead and set up what should trigger it to show all right so let's click here and say um nanui wants to set up some things it's going to be I think it's going to be some conditions right yes we want to set up some conditions so let's say um which of them did I select okay this is the first one so I click on this to give it um we don't want it to just uh come how do I put it we don't want it to just appear on its own right we want it to appear from a condition all right so I'll click on conditional value and I will say uh if right so if something something happens then show the color right so I will go ahead and then say if um should we do we don't necessarily need to use a combined uh condition here let's just do it individually so we click on this and then we go to App State and then we pick the email State and say if email States all right uh then produce this so this is like saying if email States is true yeah we don't really have to go turn on something and say true so if email state is true that means um if there's something inside it all right so then uh is that what we mean let me see if email then this okay so I think we'll just set it up first and see what works if it doesn't work we will come back to it okay so let's see uh if email status here let's uh give it a color let's say this all right and then um uh let's uh else what should we show let's go ahead and just leave it the way it was uh let's leave it on set okay so else unsets just a little bit there that means it will be empty to not have a color okay so we click for that if then else condition okay um I hope I'm getting that right okay so let's go ahead and then click this if we have any errors we will go back and fix it I like fixing it that way so uh let's come here and then click on this and then give it a conditional and then here we will be picking the app state for password state all right and then we will be setting it to red as well so we're doing it individually and if this condition comes out right so go ahead and then do this else just leave it the way it was that means uh yeah so let's see okay now if we go ahead and preview it's we're not supposed to really preview yet because nothing is supposed to really happen if it happens it's just because uh we have to go ahead and then clear like what we haven't what we had before because we need a trigger for these to actually work so let's go ahead and clear uh what we did at first because I was just me trying to like explain something where is it um uh okay so I think I have Eve this is this then let's see all right so I think I am making a blunder or it's not working all right this is this is uh I think I have flawed a little bit there um okay so I think I did miss some things all right give me a minute let me try to check out what I had missed I will stop sharing briefly Okay so let me just try to catch up with where I missed uh okay I'm checking my previous project so just confirm what I had missed out okay I hope you guys are actually enjoying what I'm doing like uh learning like because you will have to be able to implement this in your project for your application to look like look nice all right so uh with that you you with this knowledge and information right you will be able to create uh something really nice like really really nice for your uh project right so um let me first check this okay exactly in the right track but I made some few errors which I will show you okay foreign so I I think uh I think what I had done earlier on was um I wasn't supposed to have fixed that initially so I will just try to uh correct that um let's see let's see let's try to delete it totally uh by deleting I mean we have to take off what I had done earlier let's see how can I okay so I think what I'll just do here is remove it totally um yeah this is correct actually remove it let's remove it uh okay so I think the problem is with what we have here already there's an original like a background uh this is the problem so I have to clear that first then come here yeah that's the problem and I can clear that without deleting all of this so let's go ahead and just remove it and then clear this this was the problem okay so let's go ahead and then like set it up all over again yeah so I'll click on here and then what I want to do is um it's the basically you can use the focus butter or the butter color anyone works but let's try to set it up for Focus butter uh is it a focus boiler Focus butter I think we should use the Border collar let's use the Border collar and um if that's the case or will this work like that let's just try it out I think let's click on this and say conditional so this is the real color so condition on that okay yeah I think that should work so let's come here to conditional and then we will go ahead and then say if we go pick the app state for email state and then um we will give it the color red right yes yes really good like that and then we can leave it here or we can just give it white color I think this color might be the white uh or we leave it the way it works uh anyone works really so um white color okay so I think um white color I will have to let me just say Ctrl Z pick me back taking me back all right so if this is true then show this else then show this okay the fold is variable value we don't really want to concern ourselves with that let's go with the password now and see uh what to do so we're click on this and say conditional and uh we pick a go to App State and pick the password state and then we'll fix the password the color to be read and um let me just leave this one here and see what's gonna happen all right leave it like that so here if we go ahead and test this we shouldn't see any results right let's leave all this is all our projects if we test it out nothing is going to happen all right so here it is nothing is happening nothing is happening you know so the reason is because we need a tree we need a trigger to be able to update the state and then show all of this all right so uh let's see how we can rebuild that uh if we come here and then we click on create account this is going to be our trigger we have set some conditions so guys so we have set some uh conditions we've said Eve like we've set a condition here but now every condition requires um some sort of trigger like something has to trigger the condition to be true all right and then from there it works so let's go ahead and then see what we can do to create a trigger so here's what we're gonna use in creating a trigger we click on create account and then we go to add action this is where it gets a little bit nice right uh yes this is where it gets nice so I will click there and then what am I gonna do I will just go ahead and then open the the should I say this is the action floor editor and uh just deletes this yes delete I want to create conditional action all right so I'll click on conditional action and then I want to set um I want to set a single condition true first right and let's set the condition right so is it going to be a condition or a conditional value if then let's see which one is going to be so if it's going to be a single condition we'll say um now what condition are we trying to set right now we want to set to see if the the value like the the app state is is empty if the app state is empty then uh then we want to go ahead and update the local state of that app State and set it as um as as true okay so if it's empty and then if it is not empty uh we will set it as false of course so let's try it first then we will check it out now let's go ahead and um this is like the trigger scenario guys so I'll click on insert and then I'll go here and pick the the email state and then equal to uh let's say it's not set it's set so I think I'm gonna say is set all right so um okay so I think some things are changing here so if email state is not set or should we say uh equal to if uh email state is equal to um specific value uh I think this is what we should use actually guys so I I have different ways around this thing but I think in this situation let's go ahead and then use this particular scenario that I want us to use okay so now we just want to go ahead and set a first condition first right first condition this says if email States is equal to like it's equal to true that means it has been fixed like there's it has a value something is inside it all right then set it as uh true okay something like this so we're giving it a specific value so we confirm so it now says if email state is equal to true then uh we need to go ahead and give it some action like what should happen if email state is true that means if it contains something if email state contains something let's say um let's go ahead and then uh update um let's add an action here and and say update let me click here and say update of data update App State so we're updating in the App State and we want to add the field so we click here and we have to choose the email State it's a Boolean so after you click on that you click in here you want to select the updates type we want to set a value to uh true so now hold on guys let's look at it again so if email state is true right so uh that means if something has been entered into the email right the email field okay then um we want to update the app state to true and when we update the app stage to True whatever card connection with the app state that required a true scenario before it happens will be activated so let's go ahead and just see it I hope it makes sense and then of course if it is false I set this to True let's click on this and say add action so we have to update this local variable again updates the the App State it's also called a local state and then it's still going to be the email States this time around so this is for the condition where it is really true that I mean this condition is really really true but if this condition is actually false so what happens we will go ahead and then uh update a set of value to false okay so false and um let's go ahead and close this I want us to run it first and see if it works so uh let's go ahead and then just run it and then after that I will try to talk with you guys and see how it's going if you're getting like a hangout of this so we can because I think after this we just need to go ahead and create for the password field and then we're done with the class so uh let me stop sharing and see how we're doing so um I think we are still uh Okay so ah barel it's good to see you here all right Burrell it's really nice to have you here okay so um um okay uh where where what am I going to talk about now so let's see Karim said could you share the project with a public link for clone uh okay so I think Karim you've asked me for this before so I will I will I will do that I will try to um I will create a clone like make it clonable and then share it okay are you asking me for the entire project or just uh yeah okay I'll I'll share it I'll just share it maybe after the class um so chica so yeah chica you will have to like re-watch it from from the beginning just to catch up right I I hope you watch it from the beginning so you can like catch up it's like super important for your project so guys we've done one hour our project is done running let's go ahead and then check it out and then uh we will close I think in 10 minutes if nothing has broken if something is broken we'll have to try to fix it all right so let's go ahead and then check it out and uh this is our projects uh okay why is it like this ah oh come on guys um this is a huge challenge for me it's running the very first uh of course this is how it's supposed to be why didn't I even think about it it's running home one it's running this home party right so it's showing this and we were playing around this right so um okay we don't need this to happen again I was just keeping this okay so I think let's go ahead and let me just go to settings and say um app details yes entry page is going to now be home too I'm so sorry this one I should have done I didn't think about it this is supposed to be the entry page so let's go ahead and just run it again so we're gonna we have to wait for another three two to three minutes and watch these play out okay so while that is happening I can go back here and try to do some explanation for this particular project that we had like another way of validating right so uh what we are trying to do here is first of all we created an App State so we come here to App State and then we added a state variable right so we created a state for our email like the email State and we made it Boolean and we also did the same thing for password State and then when we finished that we went ahead and then uh gave some conditions for the border of this text field right so if you scroll down here you'll see that we have some conditions here for the Border color don't forget we had already fixed an initial border color that's why uh if you go ahead and check it out check it out like this it will show you it will still give you the color you see here it gives you the color but now we we want it to show as a color uh a color red when a particular condition is not been met or it's been met depending on the logic that we write so uh here we went ahead and then did some uh if and else statement and so we said uh this is done so we said if email you know happens to be true then presents this that means if there's something inside it all right if this is that the case um before I try to explain it let's let's see how it works first okay so let me see where is it this is not the one this is the one okay guys so we have this now and um observe we have uh okay so guys I want us to observe what is happening if there is no if there is um if if everything is fine all right if everything is fine it should give us a wide bother have you seen what is happening it gives us a white border let's go back to the the logic so we said uh Eve the email States right uh is fine like if this is if the email state is um true that means way too I'm I think I'm mixing it up a bit but now we have let's look at it let's start from here first or to explain it so we have a white color here that means that um if this particular scenario all right is empty right so we should have a color here we should have the color red if it's actually empty right and then otherwise let's have this but now we're having the white thing here let's go ahead and type in something even if we type in something it doesn't show anything okay so I think we're mixing some things up I am mixing some things up well why am I not able to Okay so this is not showing and this is let's see if I try to let me take this off let's just do reverse engineering and understand what we did let me click on this nothing is happening um nothing is happening are we have made some blunders right this should be a blunder indeed okay so uh let me try to interpret this um okay so usually all these logical statement is always like a complex thing and sometimes uh it's very easy for you to mix it up and miss miss out some things so um I'm trying to figure it out from Rivers engineering so we have this you know let's say oh and this is also not working okay I am going to go ahead and refer to my other product and see where I messed it up and stop I'm gonna stop sharing now hang in there okay so I will just go through my previous project and confirm a few things okay this happens to be this happens to not really be so much of my strong points right yeah but I am trying so hard to make sure that I try to explain it simply so you guys can understand it um okay see to see hold on guys okay I'm gonna get it thank you uh okay so I think I have figured out where I mixed it up okay so let's see um all right so uh let's see I even had to I even had to go ahead and check another external resource really uh okay so this is basically what teachers go through um sometimes they make mistakes and they try to find ways to fix it uh okay so I did check out some extra resources right just to make sure that I find ways to get us unstocked um let's see I think where I got it wrong is in the logic behind uh behind I think we we got it right here um we got it right uh with what we did here right yes this is fine this is pretty fine okay so Elves leave it as this I might come back to change this to something else but that's still okay we just want it to work first and then this also works um okay so the problem here is actually what we did in the action flow editor this is not what we should have done like uh in essence we're not supposed to fix it up like this let's click to change it and um the the problem here is uh let me go ahead and I think I will just if I delete this conditional it deletes all of this too right so uh I just wanted to change just this one let's see uh let's click this to edit now we are not supposed to um go to the App State I think this is where I mixed it up yeah we're not supposed to go to the App State right we're supposed to go to the the widget States really so the widgets tag we're supposed to check for the text field and then of course check for the password field that's like the idea so not the not the not the App State so let's go ahead and then just go ahead and then let's go ahead and try this now [Music] um okay now this is this is not this is not gonna work let's just delete all of this and create the conditional floor again so here we go to conditions and then we will say a single condition and then we come here come to uh widget State and then we say text field so text field is set and not empty this is what we should have actually done so um like this none we can now go ahead and then start setting conditions for true or false okay all right so um I think you will have to like re-watch this video and try to catch up all right so and of course don't also make mistakes with the stage that I made all right that's gonna really benefit the people that are really in this class in real time otherwise others will be practicing and making those mistakes I'm quite sorry in advance okay so um what I what I what we are supposed to do now is first of all we are saying that the condition here is the if the text field is set and not empty is set and not empty so if this condition is true then we need to go ahead and update uh let's add the condition and say update local state and make it uh false each local state that's the app States add the field we want to update for the email States and then I'll click in here and then set the value to false all right it's already on false here so then of course if this condition that says that text field uh the text field for email is set and not empty if the condition is uh not true that means it's false what should we do we need to go ahead and also update the let's see it should work now updates the app state to uh let's go ahead and click here update the app stage to no not that click here and set the value to true all right so uh when when it is true all right then we will have that border but if it is not true okay we will have um we will have uh we will have everything working normally for us okay that's like the idea um I would like us to to check it out first before doing it but let's go ahead and just Implement for the password as once you can just quickly come here and copy this but it might be a bit uh complicated I think so um let's just copy copy conditional actions and then I'll click here and then paste I'm just pasting it at once Okay so uh come here okay oh okay so here we have for text field so this was for email let's click on it and change it from email to um where is it text field we want to change this to uh password okay so it's none password we confirm it's set and not empty and then we will come here of course if is set and not empty then it's supposed to update the App State let's see if let's see what we will update here so it's supposed to update the password state so we'll come here and uh what should we do uh let's just remove this and add uh for the password State okay and then click on this set it to what set the value to false all right and then the same thing with this particular part let's remove this click and then for password State click select the update type it's set value to true now and I think with these we should have um we should have our application working if it doesn't work okay let's just have let's just know that we have done the right thing this time around right yes we've done the right thing this time around it should work so come on what did I click I clicked on the wrong wrong button so here we should actually run it so I I I'm going to just go through it one time and then we will um test it I think by then it should be done working so we did try to set this field first so uh like set the colors so if you come here right so it says here if this is true then show this all right that's why when we're telling it that if it actually finds uh a text like if the if the the email uh widgets all right the text field is not empty that means uh if it's not empty update the the the App State and make it false that means if it is false don't show us the red border but if it is true this is where the red border is supposed to show okay that's like the idea of all of the things that we have done and uh we did the same thing for the text field and then later on we went ahead and then created all of these uh uh crazy cool logical flow just to ensure that our application is working very fine I think let's just wait at once and see the application work I hope it works so that we can end the class it's far ahead of our closing time we're supposed to do this in 45 minutes but it's longer than it was so I hope you've been able to learn some things from this and you'll be able to use in your final project because I am really looking forward to seeing you create like some amazing projects um let's see I'm going to type uh let me click on this now all right this is nice I think it finally worked so I clicked on create account and there's nothing in here and there's nothing in here and that's why it showed red that means it's empty okay so um uh what I can now do is I can just say no code you know called Africa HQ it's gmail.com right and now something is there uh of course something is there but it does not change we are not going to go about go about how to feel that like to fix that but um what I want us to do now is enter a password and then of course try to create an account now when we try to create an account everything is working now like it has it has been able to see values in the text field uh for for email and for passwords everything is working properly so now it works guys I hope that you have been able to understand some things if there is a little misunderstanding of how like the whole thing worked out uh you could just like re-watch the video skip to where uh skip the part that I made some mistakes and then just uh watch the part that we got it right okay and then of course we're going to have another class which we can like pay attention to questions in the second class the second class will be by 7 PM GMT plus one in the class we will be talking more about um what are we talking about we'll be talking about conditions for your projects right to help you uh be able to properly send your users to a particular page depending on the kind of role that they are so I will stop sharing now and I hope that you uh foreign this so yes Peter you can uh apply this to the influencer project yes [Music] um Kareem okay uh all right so I think that's going to be the end of our tutorial we've we've shoot past the time like a lot of it and I hope you can like go ahead and re-watch this and um see uh how you can like apply it in your own product all right thank you for being part of the class and I will see you in the next class which is by 7 PM GMT plus one do we have any questions I can take a question or two or we could push the question to the next class since we've already overshoot our time budget uh we together Can someone say something so that I'll know that we're all together I'm waiting for responses uh no responses okay I think people are sleeping all right guys so I am going to assume that uh everything is all good and uh we will see in the next class and uh try to see how you can implement this in your project and all the best okay great thank you for saying something Kofi all right have a great uh evening guys uh thank you to Joy hey maker thank you next class yes next class will be by 7 PM GMT let's do it in the next class have a great time guys bye for now

Channel: eelspace

Views: 4,440

Keywords:

Id: DYMs2n8tOnk

Length: 79min 38sec (4778 seconds)

Published: Fri Apr 07 2023