Flutter Firebase & DDD Course [25] - Body Field

the note form page is already in place but the actual form for the user to fill in is missing let's start by creating the fields for inputting a node body and selecting its color [Music] hello welcome to risocoto where you're 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 on our quest for becoming in-demand flutter developers so here we are in the already finished app and as you can see the note form page for creating a note should indeed have a field for the note body to be filled in hello there which is of course uh multiple line text form field because there can indeed be multiple lines in a note body and then of course we have to be able to select a note color just like this then later on in future part we are going to implement the to do list which is of course reorderable like this so hello with one l we can reorder it it goes up if the keyboard just doesn't show up randomly but as you can see it just can be reordered just like this which is nice but they will come later for now let's focus on the actual note body field and the color selector so if i go to the app which we are currently building this is the current state of the node form pages you can see we don't have any actual body of the scaffold we just have its ad bar and that's it so let's now implement the body so that we can add a form with a body field to it so as usual scaffold needs to have a body which will be a form and this form will have a child and as is usually the case with forms in flutter whenever you want to have multiple fields which you probably do want to have them but you also want them to be scrollable you should not use a list view for the form fields to be held in but instead you should use a single child scroll view joined with a column why is that well list views they have their optimizations so that the widgets which are not shown on the screen are not really rendered and this just creates problems especially when you are trying to test your apps but overall you should just not use list views with form fields instead just use a single child scroll view which will not have any sort of optimizations so that the invisible widgets are not rendered and this will spare you of all the problems that go together with it when it comes to forms you may think that we are now being wasteful because we are rendering even widgets which are not gonna be visible but i mean forms usually don't have an unlimited amount of widgets they really have widgets which can fit into maybe one screen or two screens at the very maximum so i mean you're not going to have that much of a performance penalty if you render all of the widgets all the time so the child of this single child scroll view should be a column like this and this column will have children and this is where we are going to put the body field and the color field and the to-do list uh creator and all of that but actually just as was the case in the sign-in form even in this note form page we do want to auto-validate the form that means show error messages based on the state which is outputted from our block this node form state it just has this boolean show error messages i'm not going to go into the details of how it's implemented if you have forgotten how you can check out the previous part where we were actually implementing this block but basically when this boolean is true then we want to auto validate the form which means that error messages are going to be shown always and basically on every single change which occurs in one of the form fields they are all going to be validated and the user will see messages always of whether or not there is some sort of an error going on so therefore we do need to get a hold of the blocks state and rebuild this form whenever the value of show error messages in the node form state changes so of course we can do that with a block builder so let's wrap this with a block builder it's going to be note form block and node form state and we can now say auto validate and set its value to be from state show error messages but of course we do not want to rebuild the form on every single state change because that would include state changes like updating the node body field or changing uh the is saving from true to false so therefore to limit when we rebuild this whole form which would be kind of wasteful we need to say build when and provide the previous state current state and we want to rebuild this only when the previous states show error messages does not equal to the current states show error messages now we are cool this form will not be wastefully rebuilt so now that we have that let's go ahead and create a body field widget in a brand new file so that we just don't uh clutter this file up completely so let's do just that under the note form sub feature in the presentation folder we're going to create a new folder called widgets and over there let's just create a new file called body field widget dot dart let's just quickly create a stateless widget body field let's import material and let's immediately just hop into the note form page and add this field to be the first child of the single child scroll views column so we're going to say body field all right actually we can make it constant and put a constant constructor over here so const body field right so that we can optimize the app just a little bit actually in order to be nice for our developers we should probably provide a key here so that possible other uses of our app will be able to pass a key into this body field and then subsequently into the super constructor you should always have something like this because then especially if you're building a library you can drive people crazy if you don't have keys on your widgets so now that this is sorted out let's think about how this field will look like well it's going to be a very very simple text field right so let's just say text form field and we can immediately see it appearing over here it looks kind of horrible it's stretched all the way across the page so that's why we are going to wrap it inside of padding so let's wrap with padding and we're going to actually say 10 logical pixels and now it looks something like this which makes it look much better than before when it's sort of offset from the edges let's immediately handle the visual stuff which we can immediately see so we're going to handle the decoration input decoration and in addition to the decoration provided by the theme as you can see we for example have the outline instead of an instead of the default underline for the form field we are also going to say that the label text will be note again hard coded for the purposes of saving time in this tutorial series and that's it for now so as you can see we have a label which is animated upwards which is nice and then there are certain things which the note body should adhere to which are defined inside of the value object of course so if we go into the domain then nodes then this value object's file we can see that we have a note body and over there there is the static constant max length it is set to 1 000. now of course if the note body which we if the string which we pass into this value object is going to be longer than 1 000 characters we're going to return a failure and you know what happens then this node body value object will be invalid however we should really try to prevent the user from inputting more than thousand characters in the first place so instead of just showing failures all the time it would be nice to limit the amount of characters which can be actually inputted into the text form field and indeed we can do that we can limit the character count on the field by saying max length and then we can just get the constant from the note body value object so let's say max length just like that and now as you can see hopefully on youtube as well that we have one thousand characters limit we cannot input more than thousand characters and also when we type in new characters they are being sort of uh edit or the counter increases below and also you can see that we don't have any return key on the keyboard to create a new line in this text form field that's because we need to actually explicitly tell this field that it should accept multiple lines so let's do that right now we're going to say that max lines is going to be null which will make it infinite basically so we can have multiple lines in here which is nice to see if we go away and go back now we you can see that we have the return key here we can create new lines which is nice and also to sort of provide this uh note field to be a bit bigger even initially a bit taller when it comes to the visuals of the app we can say that min lines is going to be 5 and what this is going to do is that this node field this node body field will appear to be taller right from the get-go and now what should we do next well of course we need to handle the unchanged callback which gives us a value and over here we do not want to do any kind of a logic inside the widget inside the presentation layer but instead we should perform all of the logic inside the application layer and for that we already have our node form block so all we want to do here is to get the block using block provider or we can also use context dot block let's say node form block let's import node form block and then we're just going to say add and the event name is node form event dot body changed and the new value of the body is of course value and this will trigger all of the different changes of the states which we have just implemented in the previous parts of this series and lastly we need to implement the validate method or validator method on this field which is going to pass us a string for us to use which is the current string input it into the body field but we can actually discard this string because uh we're not going to use it because we actually do already have the validation values all done inside the note form state right that's because the note entity itself holds all of the validated value objects including the node body and just like the validated value object sounds it means that there is the validation already going on so if we are over the maximum length for example we are going to be able to get the failure the proper value failure from this value object so we do not need to perform any additional validation inside of the presentation layer with this kind of a domain driven design approach we are doing in this series we have actually already done this kind of a thing when it when it came to the sign in form so this should not be a new thing to you what we are implementing right over here and again just like in that sign-in form we're going to do things a bit differently when it comes to the validator over here that's because as you are used to we usually get the state of a block by relying on a block builder right block builder will provide us with the state of a block whenever it changes we cannot do it right here that's because the block builder takes some additional time to propagate the state the newly updated state to the ui and that just creates problems let's say if you want to have more information just check out the part where we implemented the sign in form because over there we are doing the same thing and i explained why we need to do what we are about to do in more detail but basically we just cannot get again the state using a block builder which we currently don't even have here but we need to access the state directly on the block instance which we are going to get uh using the extension or the block provider so again just call context block get the node form block and we need to access the state directly on this instance gotten from the block provider like this this will ensure that we always have the most fresh state available in the validator and that the validator will do actually its job properly because otherwise we would have an old state over here and you would basically be able to type in one character more or practically you would have always the possibility of having a failure but not notifying the user about the failure in the ui that just how it goes and now on the state we want to access the note note like this and on this note we want to access of course the body because this is the field for the body and then its value and now we can fold the value if there is a value on the left which is f for failure we want to say f dot maybe map if there is something unexpected we are just going to return null we'll just format this a bit so that we can see what we are doing i know this formatting is crazy like this and of course in the case that the value is correct we want to return null because hopefully as you know by now if validator returns null it means that nothing no error message is displayed to the user around or below the text field but in the case there is an empty valley failure which indicates that the field is of course empty then we want to say cannot be empty below the text field and in the case the field exceeds its length we're going to say exceeding length and also we want to specify the max allowed length which we are going to do by saying f which is the failure and since this is an exceeding length failure case this carries together with it the max allowed value which is nice from the visual point of view though one thing still bugs me and that is the counter and the maximum allowed length of the note body i mean it's nice to see it over here but what if we actually want to hide it in order to make it look like it is in the finished app right so in order to hide this counter we can say that the counter text in the input decoration will be empty string like this and now as you can see the counter text went away and we can actually make this note decoration a constant because we are not using any translations so all of the strings are constants right cool so actually now we can even try to save the node to firestore and i'm actually quite surprised that it worked because i think it shouldn't have worked because uh we technically still have oh no it should work right nice because the to-do's can be empty right when we go to the note the to-do's the list three it just says that there cannot be more than three to-do's and when there are no to-do's it means that this uh this value object is valid then the note color we have a default color already always selected as you can see here it's always said to be the white color unless the user specifies otherwise and the only thing which was previously causing us errors was that the node body was empty which is an invalid failure an invalid value by default but now that the node body is actually filled in what happens is that the whole node is actually valid so that's why we can see it over here that it was added to firestore which is awesome and also when we don't input anything into the node body we should see an error message for sure it says cannot be empty we add some text over here and as you can see it's added right to firestore so this is a may zing however there is a single small problem which we can fix pretty easily and that is that while we can create new nodes easily editing nodes there is just something wrong with that if we click on this newly created node you can see that there is no text present inside of the note right but for example here it should say become an in-demand flutter developer but it doesn't say anything we cannot see any text inside of the note body field so why is that well of course if we go into the widget which we have just implemented nowhere in here are we trying to get the value of the body from the edited node and put it into the text form field basically this text form field will always be blank when the page appears so what we need to do is to get hold of the edited note and put its body value to be the pre-filled value of the text form field in order to set a text of a text form field we need to use a text editing controller and set it as the controller parameter of the text form fields constructor now there are multiple ways we can manipulate and manage this text editing controller we could for example use a state full widget and implement this pose and in its state but that is just pain in the rear side of your body so that's why we are instead going to use flutter hooks which we have added a while ago into pop spagymo it is a very cool package which allows us to use a hook widget and getting hold and also properly disposing and doing all that kind of life cycle stuff with text editing controller it's as simple as calling use text editing controller like this we're going to put it into a final text at the thing controller notice that we are still in the build method everything happens inside the build method with flutter hooks and now we can just set this text editing controller to be the controller for our text form field if you want to learn more about flutter hooks more in depth you can check out the tutorial from the card in the corner by the way and now in order to get the edited notes body value into this text form field we are going to wrap everything inside a block listener for the note form blog and note form state and inside of this listener we're just going to set the text editing controller's text to be equal to the text coming from state dot note dot body and now this is a validated value object so we need to say get or crash in order to just get the raw string and now you may be thinking but hey isn't this going to cause issues when we for example try to create a new note right because then the body is implicitly invalid because we have an empty note in there an empty note has an empty note body which is invalid state for the node body it should be throwing us the failure or actually crashing the app right because we have said where is it we have said get or crash and when the body is invalid as it is with an empty node the app should crash we should get some sort of an error an exception right well that's not the case or should i say it's not going to be a case rather because we're going to add a magic line over here and that is listen when and we want to limit when this listener is being run to previous state current state when the previous states is editing is not equal to the current states is editing and if we take a look at the node form block whenever we initialize the node form block and we are creating a new note right over here when the initial note option is none when there is no initial note in other words we emit the states unchanged so we basically don't emit anything because of how block is implemented which means that judging by the default node form state this means is editing is false and it just doesn't change so this listener where we are trying to get or crash the node body will not run so we will not crash even though the node body is indeed by default invalid however this is editing will be switched to true right here whenever there is an initial note being passed in to the block with this event when we initialize it but when it's actually switched to being true this is editing flag this means that the initial node should already have some data in it it should have a body which is not invalid so that's why we're now going to crash the app right here so let's try right now if we now try to edit this become an in-demand floor developer note nothing works which is interesting to say the least so i have just found the cause or possibly found the cause for why this thing of setting the text editing controller's text to be the one from the edited node's body just did not work i did not notice it immediately but as you can see down here we have five errors going on inside this body field widget so that's why the app just did not even load this new code because as you know when you have errors in your in your code the hot reload just doesn't work which kind of makes sense so over here we have an error for some reason i did not see it before something must have happened i don't know what uh which is interesting so we have some formatting issues i guess um okay so what is going on here honestly i have no idea unchanged then what how did this happen um yeah so i guess let's just adjust cut out this does it work now okay it's even formatted nicely which i kind of like so okay we just moved this bit of code somewhere completely out of place and now we have moved it back in so that it looks nice and uh yeah so all right this is how the code should look like and of course you can get this code from the link in the video description so that you don't have to go through this formatting and weird errors nightmare but anyway when we now run the app without any errors it should build pretty quickly and what should happen is that this code will actually be loaded into the running app and we should actually see that when we try to edit the note we should see this edited text inside of the form field and we do which is awesome become an in demand for a developer and this gibberish is also gonna be here and when we edit this gibberish to say something uh hello there you can see that this node will actually be edited on firestore or updated on firestore should i say and now we can see its new value over here right and actually that's it for this part because it's getting quite long so we are going to implement the other fields in uh future parts of this tutorial series so be sure to subscribe to this channel if you haven't already in order to not miss that new part and also join the notification squad by hitting the bell button to make sure you grow your flower skills because here on riso coder i am determined to provide you with the best tutorials and resources so that you will become an in-demand flutter developer and if you are serious about becoming a great flower developer who can build real apps for clients or at the job go to flutter.education link is also in the video description by the way to get the top curated flutter news and resources aimed at improving your app development career over there you can also subscribe to my mailing list to get the best photo resources delivered weekly right into your inbox if this video helped you give it a like and also share it with other developers who are going to find it surely beneficial for them too leave a comment if you have anything to say and see you in the next [Music] you

Channel: Reso Coder

Views: 3,288

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, flutter bloc

Id: iPQaE8vVXaE

Length: 32min 54sec (1974 seconds)

Published: Fri Aug 21 2020