Flutter Firebase & DDD Course [28] - Adding Todos UI

to do finally we've implemented everything there was to implement and now we can start working on the reorderable to-do list let's start with creating new and empty to-do's [Music] hello welcome to reso code 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 in this part of the domain-driven design flutter tutorial series we are going to place the first proverbial brick on our path to finishing this app fully and we're gonna do so by creating this uh add a to-do button at the bottom of the what is going to be the to do list which is going to be reorderable like this again in this part we are only going to focus on adding a single to do we are not even going to display them in the list because there is actually quite a lot of work behind the scenes of what goes into managing this survey to-do list so let's get started immediately we are going to be operating inside this single child scroll view again where we already have a body field and a color field so let's actually jump to the app we are currently building right here so we currently have only these two fields and we are also going to add a list here but for now we're just going to do with the single add to do button so let's actually go ahead and create a new file for this add to do tile widget so right under node form widgets we are going to right click create a new file add to do dial widget dart and over here let's just create a stateless widget with the name add to do tile all right just like that let's import material dart and we are good to go let's just quickly add this widget to the note form const is to do tile let's import it and for now we're just going to focus at least from the start of this part on the ui or how it looks so by saying that it's a tile you probably already have predicted that we are going to use a list style and you are absolutely correct so let's just return a list style like this and this list styles title will be a text which will say add a to do like this and then it's going to have a leading icon just like the in the app which is already finished and this leading icon will be a plus symbol so it will be icon icons at and as always you can get this code from the link in the video description so let's just make this constant right also this text should be constant cool and actually to move this uh whole tile or at least this leading icon a bit more uh from the left and from all of the sides actually let's wrap this icon inside a padding and let's say that it's going to be 12 pixels from all sides and let's also make the padding constant and now we can actually remove these two const keywords because if the parent constructor so to say is constant then the parameters are constant automatically as well so this is everything when it comes to how the add a to do list style will look like but now we're getting to more of a core of the problem what we are trying to solve here and that is actually adding the empty to do so we are going to be operating with the note form block so whenever the list style is tapped so on tap we want to get hold of our trusted node form block so let's say block provider to import flutter block here and now we can use just the context extension so context dot let's say block it's of type note form block right let's uh import it and we want to add an event to this block which is going to be from our note form event union and it's gonna be that to do's changed right because after all we are trying to add a single new to do to the list of all to do's and this to those changed if we take a look at this takes in a an immutable list so kt list of to-do item premier tips all right so how can we get hold of such to do item primitives well we cannot just sort of uh create them here and uh do something like list off so create an empty list and inside of that once you import kt.dart uh just create a new to do item primitive dot empty right this is a class which we have created some while ago precisely for the use within the block because uh blocks or at least the events of the blocks do need to operate with data which is uh simple in nature which is not validated because it's precisely inside of the blocks or inside the value objects which the blocks create rather where the validation takes place and because of that the parameters of the events need to be simple they need to have primitive types they cannot have validated value objects and that's why we have created this to do item primitive class which does not have a validated name for example it's just a simple string we've created this precisely so that it can be passed into the block through an event right you can go watch some of the previous parts for example the part where we have created the node form block event to sort of get a more of a refresher of what i have just talked about but this is the gist of it basically blocks need to take in primitives and now if we come back to the add to do widget we cannot just do something like this because what this would do is that the to-dos would always have just one to do right because uh we are we will be constantly updating them to be just a list of a single to-do item primitive right after formatting this a bit more so that we can see everything on the screen now you may object that what we can do actually instead of doing this is to maybe have a block builder here or maybe just get hold of the block again so doing something like context block note from block get the blocks state which is of type node form state and from this we can get the node and we can get the to do's right and sort of somehow add them together because we have the to-do's which are already present inside of the block state and we would be able to just add a single new empty to-do item primitive to these already present to-do's right well this seems like a good solution on paper or maybe not even on paper but just on first glance the problem here is that if you take a look closely the to-do's which are present inside of the state are obviously already validated which is precisely what we want we want to have a list of maximally three items so that is list three right and it's not holding to do item primitives instead it's holding validated to do item entities this is all good when it comes to the actual state the problem is that uh mixing to do item primitives and to do's is just not possible i mean what's the point of this we cannot add them together we cannot say add elements to the list of three items no we just need to fully operate with to do item primitives here while we are in the presentation layer and we cannot even touch the validated list3 and to do item entities if you think about it it makes total sense this is what all of the other widgets are doing what we are trying to accomplish here is nothing different for example if you take this note body field this text form field operates with a string it's not validated in any way shape or form it's just a simple string then we take this string put it through an event of course through an event called body changed we put it into the block where it's then validated through a value object and we want to do precisely the same thing with our to do's we need to operate exclusively with a primitive type which is in this case a kt list of to-do item primitive and then only inside the block we need to validate it so in some way we need to come up with a solution which will enable us to use our to-do item primitives from the ui we need to be able to manage this kt list of to-do item primitives from multiple widgets actually because we have this add to do tile and then we are also going to have the [Music] list view here from which we will be able to completely to do write some name of the to-do name here right we are going to need to be able to reorder them and all of these operations are working with the exact same kt list of to do item primitives so how can we make all of these different widgets operate with just one list like this well of course the answer is to pull the state up and use a provider for everything we are going to provide the ktlis of to do item primitives down the widget tree to all the widgets which need to use it right so let's do just that let's go to to do item presentation classes which is a file we've created some while ago inside the misc folder and we are going to create something which is kind of like a block or a qubit but it's actually going to be a value notifier i'm sure many of you have used it if not it's basically like a very simple change notifier which has just a single value which can be updated so it's going to be a class which we are going to call form to do's and it's going to extend a value notifier which will have a type of kt list to do item primitive so as you can see we are always just operating with the primitive type which we need to have access to throughout our whole node form ui basically let's import kt.dart and this needs to have a constructor with a call to super and we're just going to populate the superconstructor with an empty list of to do item primitives by default once the form to do's value notifier is created now we want to have this value notifier be available throughout the widget tree which needs to use it so because of that we are going to go to the node form page and right above the form we are going to have a widget change notifier provider so let's import provider if we can and we cannot do that which is uh unfortunate so we need to go to pop spec yaml and add a dependency provider the classic provider not favorite pot so let's do just that provider goes here and now we can use it hopefully so change notify provider yup and now we need to create and we are going to create an instance of form to do's which is again just a value notifier which holds kt list of to-do item primitives now we're going to be able to operate with these form to-do's from the add to the tile and later on here we are going to create the list which is going to be reorderable for now we're just going to ignore it for a few parts maybe actually just for this part in the next part we are already going to start implementing the list now that these form to do's are available let's jump back into the add to do tile widget and let's actually implement its logic right so firstly we do not want to allow more than well three to do's to be present inside the list of three right and this is all done for us because list of three items is actually a validated value object so if we take a look at the note form blocks state at the note which is held inside of it and the list three which is held inside of it we can see that we actually do have a is full getter on the list three and we can use this getter determining if the list is already full for enabling or disabling the add to do button because of course if there are already three to-do's present we do not want this button to be enabled we don't want users to just click it and get a uh you know the error message instead we want to proactively prevent the users from clicking a button if we know that it's just going to create a failure down the line so that's why we're going to use the enabled property on the list style so enabled and we need to set it in accordance with the list threes its full property or getter so because of that we actually do need to get hold of the node form block state which is going to give us the validated value objects contained inside of the edited or newly created note with which the node form operates right so we are going to just copy all of this or cut it out we're going to return a block builder of note form block note form state and let's say build oops build dir will be returning the list style and we can now set the enabled property to be gotten from state that note that to dos which is a list of three that is full and of course if it is full we want the list out to be disabled so let's negate this thing right of course we also need to sort of change the logic which is currently completely wrong inside the on tap handler because this is what i have just used for the example of why we need to have this form to do's value notifier but this logic is actually completely wrong so sure we still do want to add a to-do change event but what's gonna be passed into it is uh very much different so again we want to operate exclusively with primitives inside of the presentation layer and where are our primitives stored well of course they are stored inside of the form to do's value notifier so whenever a list style for adding a to-do is tapped we first want to edit or update the local state for the presentation layer so that means that we want to update the form to do's and add a new empty to-do to them so we can say provider dot off let's actually import provider of form to do's and let's pass in context and let's say listen false so that we don't get exceptions because if listen is true from an ontap handler and not from within a build function itself you're just going to get a bunch of errors and then we want to get hold of the value which is of type ktl is to do item primitives right and since we are using a immutable kt list which is good actually because immutable data is just easier to handle and uh the value equality is basically there by default so that's why we are using it but you cannot just add an element like this like you are used to just a regular list you can add an element to a list but you cannot add an element to an immutable list instead you need to reassign the whole list so we are going to reassign the currently present form to do's okay the list to be a new list with plus element so one element more and that element more will of course be a to do item primitive which is empty like this right but of course uh this is getting completely unreadable we're going to create an extension on a build context in just a bit just to make this much much more readable but for now let's stick with this and finish the logic of the ontap handler but basically after updating the form to do's we can now pass these form to-do's to the event which is going to in turn pass these form to-do's to the block where they're going to be validated and all that good stuff so even though it looks horrible with these uh long chains of calls to the provider and to the value notifier this is actually code which is correct logically so let's see actually if after pressing the edit to do list style three times the list i will be disabled because it should be because after we press it for three times the list should be indeed full it should be validated inside of the block and deemed as full by our logic which we have written some long time ago so let's add first to do one two three and as you can see we can now not click it it's disabled so even without uh printing out anything to the console or seeing the to do items visually in the ui we just know that everything is working because it's disabled the list style is disabled which means that the list of three to-do's is completely full which is definitely a good thing to know that everything works we can of course make this block builder a bit more optimized because currently we are rebuilding this part of ui on every single stage change which is coming from the node form block but of course as we have gotten used to we do not need to rebuild everything on every single state change we can just build this when the previous state p and current state c do not equal in just one property and that is p dotnote dot to do's dot full or is full right so only if the is full property's value changes so it's not equal to the current value of is full right the previous value is not equal to the current value only then do we need to rebuild this whole list style ui so again if we go away from the screen come back for example here they're already due to this present as you can see so now we should really need to only press this list once and it should get disabled immediately so let's try it boom and it's not working so why is that well here's the catch we are nowhere initializing the form to do's with some sort of already present to do's form to do's are always created now as an empty list of to-do item primitives so the to-do's which are already present here do not get taken into the consideration so how can we initialize form to do's with the to-do's which are already present in the note we are about to edit well of course we are going to need to utilize a block listener so actually instead of block listener we can also combine it with the block builder by using a block consumer as we've already seen and here we can use listener which passes as a context and a state and also we want to listen only when the previous state p and the current state c do not equal in is editing so p is editing is not equal to c is editing so basically only when the block is first created and then we initialize it from the node form page right here and if the edited node is of some value then we know that we are editing an already existing node and that's precisely when we do want to run this listener so what are we going to do inside of this listener well of course we are going to get hold of the form to do's here of their value actually like this and we are going to initialize these to do item primitives according to the to-do's which are present inside of the validated node entity so we're going to say that these primitives are equal to state dot nodes which is the validated entity that to do's that value now this value can either hold a value failure or the kt list of validated to do items so we want to fold the either type so in case of a failure f we are actually just going to ignore the failure here and just create a list off to do item primitive like this all right don't worry you're gonna be able to see everything in just a bit like this so just an empty list basically which does not have any items and in the case that there is a value inside of the list of to-do's which means we are going to obtain the to-do item list which is of type kt list like this now we need to convert these domain to do items which are validated value objects or actually they are entities not value objects but anyway they are validated we need to take them and convert them to the primitives with which we are operating throughout our whole presentation layer for the purposes i've outlined at the beginning of this part so we need to take this to do item list and to convert all of the elements of a list we are going to map it map oops and we want to map each and every single element which we are just going to call an underscore and we want to convert it to a to-do item primitive now luckily a while ago we have already created a to-do item primitive from domain factory constructor which just simply takes in a to do item which is an entity and then it basically just assigns all of the fields which it can assign simply and then in the case of the validated to do name it's going to attempt to get its stream or crash if there is a failure present there so we can just instantiate it to do item primitive here from domain and convert the to do item called underscore and here we go we now have a kt list of to do item primitives here awesome so what this means is that if we now click on this become an in-demand flutter developer note style or how it's called and now we're going to add a single to-do this button should be in disabled immediately and sure enough it is which is a good thing to see so again let's try once more for example here hello there this thing does not have any to do by default so we need to press edit to do three times one two three and sure enough it's disabled but in the case of becoming an in-demand flutter developer we just hit once and now it's disabled so we know that everything works cool now as i have promised we are going to quickly but effectively remove all of this mess because actually we are going to need to access the form to do's also in the next part and we definitely do not want to keep on writing this long line of ugly code just to get hold of the value which is present inside our form to do's value notifier so because of that we are going to create an extension on the build context that's right so right inside of the misc folder we are going to create a new file build context x x dot dart x for extension of course and uh over there we're just going to simply say extension form to do's x on build context let's import build context from let's say widgets that's the most neutral of those packages which we can import and yeah so basically instead of writing uh this long bit of code right just copy it this provider all form to do is context listen follows that value and we want to have a getter on the build context which is going to return a kt list of to do item primitive the getter will be called form to do's and we want to return from here provider of form to do's blah blah blah all of this needs to get returned and the context is of course coming from this as a context because this is an extension so this keyword means build context all right and then of course we also want to have a setter so we're going to have set form to do's again needs to be its name and it's going to accept a single value of ktl is to do item primitive let's call it value and we want to reassign these to do's to the value which is being passed in right so now that we have this nice extension we can just copy its path sort of so at least in vs code we can right click and copy relative path now we can go into add to do tile widget say import paste that path in there now instead of lib we're going to say what are we going to say actually package notes firebase dvd course that's the correct thing which we want to say all right and now replace all of the backticks or backslashes with uh forward slashes and here we go we have successfully added an import to which points to our build context extension because again imports for extensions are just not automatically added as of now which is kind of unfortunate in my book but anyway what can we now do is instead of saying provider of all of this we can just say context form to this and we are set so this is what we have replaced here and we can also replace this thing this thing and believe it or not also this thing yep so with all of these uh horribleness replaced this code has immediately gotten a new look and a breath of fresh air it's immediately much more readable and also we can actually remove the provider import from the add to do tilewidget.dart file because everything which is using provider is now concentrated inside of the extension file so this has been it for this part where we have implemented this add to do tile we've also created the form to do value notifier which is responsible for keeping track of the state which is used from within the presentation layer which by the way needs to be the most primitive state possible it just cannot be validated because after all validation needs to happen from the block or from the qubit or whatever else you are using in your application layer that's because uh we just simply need to operate with primitives in the presentation layer just like text fields operate with strings we in this case need to operate with to do item primitives which are not validated so if you do not want to miss the next part of this series where we are going to move forward and implement some more of the to do item reorderable list view which we are currently creating be sure to subscribe to this channel and also join notification squad by hitting the bell button to make sure you grow your flutter skill 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 flutter 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 floor news and resources aimed at improving your app development career over there you can also subscribe to my mailing list to get the best flower resources delivered weekly right into your inbox now if this video helped you give it a like and also share it with other developers who are surely going to find this beneficial as well leave a comment if you have anything to say and see you in the next [Music] video [Music] you

Channel: Reso Coder

Views: 3,142

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: hWo9Eo3VrUc

Length: 37min 35sec (2255 seconds)

Published: Wed Sep 16 2020