Flutter Firebase & DDD Course [4] – Modeling the Sign-In Form Events & State

the eye of fasaad abstraction is in place after the previous part and by using this interface we can write signing form application logic without having a clue about how the authentication is actually implemented this means that we can write the block code without even touching firebase off [Music] hello welcome to reso coder where you are getting prepared for real app development so that you will get freelance clients or a job and be confident about the apps you built so subscribe and hit the bell to join us in our quest for becoming in demand flutter developers as you can see on the diagram right now a block receives events from the UI which contain raw data and then the block outputs states which contain validated data this is signified by the red arrow which means entities and valid valid objects and the purplish arrow means raw data and the block which we are going to create in this part is the sign-in form block and also be sure to check out the written tutorial from the link in the description where you can find all of the code written in this video links to all of the explanations and overall go through this lesson at your own pace so if you are not yet familiar with the block library I will recommend you to familiarize yourself with it first before continuing with this fourth part of this tutorial series and I actually have a bunch of tutorials which you can check out from the cart in the corner regarding the block the library which we are going to use in this tutorial so first things first before implementing anything with the block library we of course need to add a dependency for it to our pub spec dot yeah mol file so let's open that up and we're just going to use a hand extension here pops Pegasus envious cold and we want to add flutter block and once it's in here we are good to go let's just save our pub spec dot yamo file and we are currently using the version 3.2.40 sign-in form and this block will use this eye of facade which we have created in the previous part we're going to also create off folder so just like the domain layer has a feature called off also the application layer has the same feature so it's also called off for authentication but then in addition to just off which is the top feature we are also going to have a sub feature for off right because this off facade which we have right here now currently is responsible only for registering signing in with email and password and also signing with Google but of course over time we are going to add some other functionality to this eye of facade for example currently we don't have any way to check if the current user is already authenticated so of course we are going to need to add that functionality later on to this eye of facade to really just be able to tell if the user is already signed in right there for the functionality which we are going to implement now in the block is really just for the sign-in form for registering and signing in so we're also going to create a sub feature under the root or folder called sign in form and now we should just create the block files but as you know block is a little bit verbose in this regard because you need to create actually three files in order to get the block going and because of that there is a handy extension for vs code which you can find on the vs code marketplace and it's called block so make sure you have this one by favics angle off just install it and also a very similar plugin is also available for IntelliJ or Android studio if you are using that IDE and also all of the links to these extensions are in the written tutorial so once you have that we can now right click on the sign in form and we can create block new block let's just call it sign in or actually sign in form call we do not want to use equatable and we have just created these three files and actually we can yeah we can just move them to the sign-in form feature we do not need this intermediary block folder so we can just delete that and now we have these three files and if you know something about block you immediately know what we should be doing next and if you don't really just check out my tutorials which are specifically tailored for explaining the block pattern and the block library so what do we have here we have sign-in form block and then we have sign-in form event and sign-in form state files and here it's very important to keep in mind that if you look at the diagram which is right now on the screen the states and events are a part of the presentation layer only the block file or the block class is a part of the application layer so this means it's perfectly fine if the states and events have some terminology and some classes which are really flutter related that's because we do not really need to separate them from the flutter framework all that much because states and events are actually a sort of a view model it's the block which holds the application logic if we now go over to the sign inform event the first thing which we need to do is to come up with all of the possible things which the UI can perform to trigger some logic inside the block so what can we do from within our sign-in form well if we go ahead and check out the sort of a live design which we have right before our eyes we can see that the user in the UI can either sign in with email and password then the user can register and also sign in with Google and additionally because blocks in the application layer are responsible for validating the data which is coming from the UI and remember as you can see on the graph right now blocks will be fed raw data which in this case means raw string email and raw password string also so therefore is also important to add events for when the email string changes and when the password string changes and we are going to implement these events not as separate classes as is usual with block instead we are going to use fries because we do not really want to have just classes we really want to utilize the power of unions so let's now eight a sign inform event priests union so I'm going to use code snippet so I will just write F Union and import the freest a notation which I for some reason cannot do which is interesting so I will probably just need to copy it from some other some other Union for example from auth failure but the thing is that because we are inside a file which is a part of another file we cannot add import statements directly in here we get an error for that so what we need to do is to actually add the import to the sign informed block file right here we need to add import to the block file and now this import can be used from also the part of event file and this Union should be called signing form event okay and the first event which can happen is email changed which will accept one string email string and it's going to be called just email changed okay and after we hide the sidebar we can now just copy this event below and we're going to create another one password changed and also change the class name password changed and with this done we are now going to create the rest of the events which are for pressing the register button and then the sign with email and sign in with Google buttons so again let's just create an F Union case this one will be called silent form events and register with email and password pressed these are really long names so let's also create a similar name for the class awesome now let's just copy this long name of an event and we're going to change it to sign in with email and password pressed similar thing for the class name and lastly we are going to have sign-in with Google pressed cool so this will be the last event for the block so sign-in with Google pressed and let's also rename the class with capital starting a letter and now we can generate the file for this so that we can actually have the frist Union but again we are missing something we are missing our trusted part statement which should tell the Builder into which file to generate the code for this freest union but as you can see again we cannot specify the part statement directly as this because we are inside a file which is itself a part of another file because of that what we can do actually is to specify the part statement into which the code should be generated inside the block file which is referenced as a part of directly so we're going to create Simon form block that freezed that dart file this will be the part and this means that our event code will be generated not into silent form event that frees dart but into signing form block that frees that Dart cool and with this said we can now kick off cogeneration so let me just write it here and after some time we are going to be good to go awesome now that we have all of this event code generated for us let's move on to defining the possible states for the UI again we are going to use a union and not just simple classes so let me immediately get rid of this and instead create F Union sign in form state whoops cannot write capital Apps probably okay signing from state and now let's think through which states we're going to have here and also blocks usually output different states much like we have different multiple events but in the case of sign-in form block which is responsible for validating the UI data it's much better to have just a single state class and not have multiple Union cases or maybe multiple classes if you are used to implementing the block states with just pure classes so actually what I have created here is wrong I should not have created sign-in form State Union but instead just a simple data class so yeah sign-in form states will be the class name with underscore and now we should be good to go okay and again we did not need to specify the part statement here because it's already specified in the block file itself cool and also we have an error inside the block file because there is no longer an initial State but we're going to get to that later we are going to once we define the states so what kind of states can be present in our app or the other way to ask this question is what do we need to communicate back to the UI from the sign-in form right so this is the sign-in form which we have here and of course whenever the string and the email field changes we need to validate it so that then later on we can show an error message below the text field if the email or password is invalid and this validation is of course determined by our nice value objects right here email address and password this is where everything is validated so we know that we somehow need to pass back validated values which are going to be the email address and password value objects because as you know the events actually transport only the raw strings right so to communicate back the validated value objects we of course need to add them to the signing forum state so we are going to add add required email address email address let's import email address and I have just no clue why we cannot import anything and it's rather unfortunate maybe it's because I'm running on a very experimental floater version which I should probably not be doing but whatever we are going to just import everything manually I guess later on and similarly we should have a password here so ignore the fact that nothing is imported we're going to fix that up later but basically we are communicating back to the UI through the state the validated email address and the validated password and what should we communicate back next well of course whenever the user fills this successfully with some valid data data at example.com and password will be over six characters long and we then try to sign in you are going to be able to see a progress indicator right because we need to reach out to the server tell that server hey this is the data which the user entered can he actually sign in or not so in order to see this progress which you could see below the button we need to communicate if we are currently submitting the data from the form to the server and this will be possible with a boolean is submitting so these are pretty obvious this is what we would do usually anyway but then what we need to have here next is the success or error back end response so as you could see if we try to sign in with something which is not actually a valid user email and password we are going to get a snack bar saying that this is an invalid email and password combination and this is actually communicated with auth failure which we have created in the previous part we are going to get to all of this later on so this is the failure which is actually responsible for showing that snack bar in the UI so this means that we somehow need to communicate back the response from our authentication back-end and well if we take a look at the eye of facade we can see that we can easily represent either a failure or success by returning either or failure unit right so this is also the type which should be present inside our state to indicate either successful sign-in or that something went wrong along the way so we're going to have ad required and either auth failure unit and we're going to call this all failure or success but the thing is that this is kind of problematic because initially there will be no response until the user presses a button right and because the right side means successful sign in and the left side means that unsuccessful sign in we also need to have a way to tell the UI that just no sign in happened yet there is nothing to really do because unsuccessful signing of course we are going to sign in the user and show him his notes which he has added to the database if the sign is unsuccessful of course we're going to show some sort of an errors nag bar but we also have to have the middle way where we do not show neither snack bar but we also do not progress into the core of our application so how can we do that well of course again we can just assign null to both failure or success but again nulls stink a much better option is to use an option that's right there is a type called option and it's much like non nullable type and it works very similarly to either so basically let me show you what it does we have an option here option either or failure unit and of course we cannot import anything because I'm stupid enough to run the latest father version and nothing worked with it so excuse me for that but anyway with an option you have some and Nana or actually none and some much like with either you have left and right so as you can probably tell none means no value is present and some means that some value is present inside the option so it's much like if you set something to null but again you get the benefit of having to check if something is none or some you cannot just possibly ignore the null and then get a nullpointerexception so that's what we are gonna be doing if the response from the server is Nana this means that no sign-in has happened yet and also it's a good convention to also add the option trailing keyword so you could say at the end of a field name whenever it's an option and then again there is one last field which we need to communicate over to the UI and that is whether or not to show the input error messages because if I go to the emulator and I just restart the app actually here we go the app is restarted and now when I start writing an email here which is completely invalid and also a password which is just totally short you do not see any error messages just yet the first error message shows up only after the user presses some sort of a button for example register or sign in only now you can see the error messages for the first time and now they're going to be auto validated these fields so that even when you add something valid and then you make it invalid again the error message will appear immediately but again this error message appears only after the user presses some sort of a button for the first time so after this button is pressed we need to communicate back to the UI that the UI should start Auto validating the text fields and this can be accomplished with a very simple boolean again so let's just create a required bull show error messages ok and now with all of this done we are just going to go to block and we'll need to import everything manually because yeah I'm running the latest version of flutter alright so I have just copied everything from the old early finish tutorial and it's right here so now we don't have any errors regarding the imports which are missing and that's cool but we have one error and that is that we are using the sign-in form initial state which we have actually removed now we need to create the initial State our selves right because we have just this sign-in foreign state which needs to be filled in with an email address password and all of these are things so how is the initial state actually gonna look like well first of all we need to create a factory for it so sign in from state that initial and from it we are going to return this constant factory sign-in form State States and we're going to fill it in with some sensible initial values so the email address should be initialized to an empty string so it's actually going to be invalid therefore from the beginning and that's also a part of the reason why we cannot even think about rubbing the error messages right from the start because an empty email field if you think about it it's really invalid and you definitely don't want to greet your users your first time users for that matter with an invalid email for no obvious reason like the user didn't even start filling in that email field you really do not need to tell him that it's invalid he knows or fee knows or whatever the next field which we should have here prefilled is the password field so again is going to be basically invalid right from the start and then show error messages will be of course false that's what's really important we are not submitting right from the start and also the auth failure or success option will be none because there is no response yet from the authentication back-end and with this done we can now go right to the block file and we are going to say that the initial state is sign-in form state dot initial just like this we are now going to get to implementing the logic for the block in this bar because as you can see that would make this part very very long by what we can do at least one thing inside this block class is to prepare it fully for just writing the logic in the next part and so in order to do this we need to have the eye or facade present inside the block so that we can then call methods on it so we are going to create a final field I off sod and again I cannot import it unfortunately Hasan will be its name and let's just create a constructor for final fields and now I will somehow import it over here all right cool now that I have added the import statement manually we are all prepared to just start writing the logic for this block in the next part so make sure to subscribe to this channel if you not want to miss it and also to go through this tutorial at your own pace once again and to get all of the code also check out the written tutorial available from the link in the description and if you are serious about becoming a great flutter developer who can build real apps for clients or at the job go to flutter that education a link is also in the video description to get the top curated fighter news and resources in that improving your app development career over there you can also subscribe to my mailing list to get the best photo resources that we learned weekly right into your inbox and if you don't want to miss more tutorials like this and also the next part where we are actually gonna get to implementing the sign-in form block logic be sure to subscribe to this channel and also join notification squad by hitting the belly button to make sure you grow your flutter skills because Iran Rizzo coder I am determined to provide you with the best tutorials and resources so that you will become an in-demand flutter developer if this video helps you with understanding how to model the events for a blog and also how to think about what should be going from the blog to the UI through the block States be sure to give this video a like and also share it with our developers who are surely going to find this information beneficial to leave a comment if you have anything to say see you in the next video [Music]

Channel: Reso Coder

Views: 17,313

Keywords: resocoder, tutorial, programming, code, programming tutorial, flutter, flutter tutorial, flutter firebase, flutter firestore, flutter firebase auth, flutter firestore tutorial, flutter firebase tutorial, flutter architecture, flutter architecture patterns, flutter domain driven design, flutter ddd, flutter database, flutter todo app, flutter todo app tutorial, flutter todo app firebase, flutter app tutorial, flutter app example, flutter clean architecture

Id: 1P7q51rkPZw

Length: 31min 58sec (1918 seconds)

Published: Fri Mar 20 2020