 Hello guys in this video. We are going to create to do that. So here you can see on the home screen We have search bar and we will list all the to do over here. So let's go here and start creating it to do just add and From here you can view it Come back from double tap. You can edit it as well. So let's go and update it And you can add one more so that we can see the search as well and from here you can market Completer and You can even unmark it So let's go and search for something. Let's say FYR. You can see the first one is coming Let's go for second and second one is coming So the search is working fine and we are also providing this delete and That is all about this app So we will be doing with that state for the time being so whenever we will move to any state Management solution then we will implement the same with that state management solution Let's get started So first of all take a look on the design that I have already created in order to save the time So on this main I have just added this scaffold color so that I don't need to specify the background color for each page And then I have added a bar theme where I have specified the background color and foreground color Then I have this home page. So let me just go to the pages So on home page, I have this search for and this text and here I have added a condition that if to do list that is my list of to lose So if it is empty, then it should be displaying this message Otherwise, it should be displaying the list view. Okay, then we have added a floating action button and So on the click off add button So we are moving to this to do page So this to do page contains two text viewers and a button So you can refer to the code. I will add the source code link in the description you can refer to my repository and Then we have repository as well. So there I have created to do repo So in this we have created a to do list and I have created some methods like get to lose Add to lose mark to do completed or not deleted to do updated to do and then search the tools Okay, so let's complete this repository part first So let's go here to add a to do. We are already getting the to do as a argument. So what to do to lose Dot add and simply pass this to But here whenever we will be creating the to do so we need to update the One field. So I just show you the model. So here I have kept this idea the optional one The rest of the things are required. So let's go back here and quickly update this ID of to do So to do dot ID, which should be what? to do's dot length and plus one So I will be updating it like this. So you can implement whatever logic you want Let's go to mark to do complete Okay, so for this what I can do. I need to iterate through the all the to do's so what to do is To do and to do. Okay. Let's give it item in to lose and For each item. I need to check if my item dot ID is Equal to is equal to to do dot ID If it is smashed then we need to do what we need to change this Mark completed. So for example for that we can do what? We are getting this to lose from here and This to do from here. So what I will do? I will say item dot is Completed is equal to so I will just toggle that state if it is Marked as complete. I will unmark it if it is unmarked then I will mark it complete Okay, so that is it Let's move next to the delete. I will use to do's dot. There is a method remove where Where it is giving you element. So that is here to do. So what I will say element Dot ID is equal to This to do dot ID So if it is messed then just delete it So just double equal to so that's it and for update So for update, we need to do what again? We need this kind of logic. I Just reuse it Go here. I need to update all the items. Oh We don't need this This we can skip. We have to say item Dot we have to update only two things title is equal to the item we are getting from to do dot title and The second thing we need to update is description Okay So we left with this part only where we have to return the list of searched text So for that you can first of all cross check for The title that is being entered by user. So let me just go back and show you so whenever user will enter something over here This method would be called which is getting the text. That is the title So based on the title, we will add the condition. So first of all, we will check if title is not empty Then write your code Otherwise you can simply return your produce You can add your logic whatever you want. So if it is not empty, then I will do such. Otherwise, I will return the to do list Or you can also return this empty one. So that is totally depend on you. Okay, so let's go here and We have to write that To do's dot There is a function where Which will give you each element one by one and for this element you have to check for the title element dot title thought So we need to convert into lower case so that there should not be any issue with the different case So just check for this if it contains The text enter by user that is title Again to lower case so that no case issue so we can assign this list to To do's or you can say filtered list we have already so So this actually is not giving you so we need to just explicitly write to list Then you will be getting your list back Okay, that's it So with this we have completed with the repository part Now we can close it Close it Let's open this home page from where we are going to add to do so once we add to do we will be coming over here Okay, so here on the click of add You have to write the logic over here So we are just checking if the data is not empty that is let's go here if this title and description is not empty Then we have to do what we have to call this save into Repository so let's do what first of all we need the reference to to do rapport So for that what we will be doing we have already created the object over here. It's not created So here we need to create one object for Repository so let's write to do repo to do Repo is equal to To do Repo, so this we can pass over there on Floating action button click So before that let me just Define it over here as well. So I will say final To do repo and to do repo and just Hit here and here I will say take quiet This dot to do repo. Okay. That means whenever you will navigate to this ad this gonna ask for one argument That is to do repo. So let's pass this Repo instance. We have already created So it's value can't be null Let me cross check We are already creating it Let's go back here. We can't do this with the cost. Let's remove this cost And what else over here? Let's remove this cost here as well Okay, okay, so I will show you what it is. Let me just finish with that floating action button first Save this So this gonna navigate to this page and here we are getting the rapport and on the click of add button We are doing what with this So we have to assess it from widget widget dot To do rapport dot Add to do and this to do you will be getting with to do and By saying We have named or not. Let me just cross check Description so we need to pass two things over here that is title and Description right or let's cross check if it is The method to do is not defined So let me import this. Let me just undo. I Think it would be named one. Let's do what? Imported and you can see it is coming like this and for is completed I will always make it false for the first time Okay, so this to do is expecting the named arguments. That's why it was getting the problem. Oh Save with this Now it should be able to save Let's go back And come again, and let's try to add one Let's add Okay, so we have added it, but we miss to add pop over here Let me do that as well and save this Now this will be popping back to home page and On home page, so it will not be affecting the new changed Values so for that what we need to do whenever we are doing this navigator dot push There is one more function which we can chain with this that is then So then means when it is coming back from any pushed screen from the stack so once it is coming back, let me do what read the body part and Just if I just mention over here when Come back from Add screen So what to do? to lose is Equal to we need to get the to do again from the to do rapport the to do Rapport dot get to lose and just set the state This gonna update it Okay, so let's try to go here and Add this and you can see both are visible now Okay, so let me do one more thing once it is added. We can display the Message as well. Okay, so let's show the snack bar We can cross-check if we are getting something back. So if this value is Not equal to null Then we can show the snack bar. So what we can say So scaffold Messenger Of context dot show Snack bar and here we need to pass this snack bar. Let's add some text by saying Let's add something. Let's say Whatever value it is we can remove this Okay, let's try this time and this Let's add and this Is not coming out One more thing we can add is let me just do that as well. That is Background color save this Okay, so Let me just cross-check what we are missing So what we are missing over here is whenever we are doing this pop We missed to add the argument that is to be sent. So we can send this title over here Okay Save this now this title whatever we are sending is a pop it should be coming over here and We can display the message according. So earlier it was null. That's why this was not visible So now it should be visible. Let's try to add one more. Let's add And you can see it is coming for added successfully Okay Now the ad part is done Let's do what we need to do view part Click on this icon which is opening this To do list. Okay. Now it should not be editable Let's do what go to Two things over here. One is this should not be editable Second is we need to pass the to-do over there whenever we are navigating to the screen so let's go here and wait for Two things we need one to do over here To do so this to do should be optional and say This start to do and this should not be const because we are using this optional one. That's fine So let's do what now once it is initialized We have to check for one thing If there is any to-do received then we can add that into that controller value so that it can be displayed So what we can do we have to use the same screen for Update as well. So we will do what we will add one more variable over here. That is spring action Which is required Required this dot action So based on this action, we will decide whether to add Update or delete. Okay. So let's do what based on this. We will check over here if That action so that is widget dot action Is equal to is equal to add If it is related to add, we don't need to do anything If it is related to edit, we have to pass the to-do if it is later to view Then we have to pass the to-do. So that means if the action is Not add and do what simply use title controller dot text is equal to To-do that is widget dot to-do dot Titer and we have to this right exclamation over here in order to get the value from Nullable variable. So let's do the same for description controller and save this and We have to go back over here and Here we need to pass one more thing. That is action So this one is my floating action button, so I will pass action as add and Another I have this one This one is what let me just cross check. This one is for remove. This is for view So for view, I need to pass the action that is view Okay for Edit I have not implemented any UI part. So let's save it So let's quickly restart Okay, so let's quickly add one. Let's try to view it now Okay, so it is saying null check operator used on null value So that means we missed to add Need to do let me just cross check where it is missed find To-do page So here we have passed action, but we missed the to-do part, okay We missed the to-do part for this View we have to pass the to-do as well. So let me just write and same way for second That was on floating action button for add. We don't need to pass any to-do. Let's save it and just cross second Let me run it again. Let's add one quickly save it and Let's try to view it now and you can see your data is coming over here But the thing is this data is editable, which should not be in case of view So in case of view, we need to add a couple of checks over here Let's do what go on the top in the app bar Here we need to change this text based on the condition So if widget dot action Is equal to is equal to add If it is add then we will be displaying add to-do otherwise Otherwise, we will add one more check widget dot action is equal to is equal to Let's say edit then It should say edit to-do Otherwise, it should say simply to-do details Okay, this is the one thing then the second thing is we don't need to show the add button This button should not be coming in case of view to simply use a condition. So what to do is widget Dot action is equal to is equal to view Then simply say const-sized box Otherwise display the button Okay, now you can see Let me just go back and try to view it again and Okay, this is updated to-do details button is hidden now we left with this part that to make it read only So for that we have this is enabled property. What to do is simply write if your widget dot action Is not equal to So we can add the condition if it is not view then true Okay, so let's Copy this and add the same logic on the second one or is enabled and Just save it Now it should not be editable Okay, so all done with this One more thing we can do here is where we are using elevated button and The text over here we need to change Again, it should be changing as per widget dot action It's equal to is equal to add Then add Otherwise, you can say update We have already added the check for displaying button So just two things left over here With this we have added a check for updated file, but we need to add the logic for update over here But this should not be coming like this So here we need to add the logic So check if widget Dot action is equal to is equal to add And do all this thing otherwise Otherwise, we need to do we don't need any if condition over here Because we have already handled that So here instead of doing add we need to call update to say update to do And So once we are updating we don't need to do anything else Well, let's save this Before update it should be working now. Let's try to update it But for that we need to add some action So let's go back over here so Let's go to that Search widget then expanded and then this this style we can wrap with widget Cut this and Say ink well and it's child We can add that tile Okay. Now we can add some event over here Go here On so we can use on double tap in order to do edit part. Let's do it over here So here for edit we need to add the logic. We need to simply do navigator dot push and we need to push to Material page route as we already done and Here we need to pass the builder function so which should be to do page Here repositories fine action, we need to add this is update or you can say edit we have used and What else we need we need to pass to do as well as we have to display the information simply say to do so here we need to get the to do from to do list based on the index and I think that's it and Same way once it is done we have to use that then and Once it is getting the value. Let me just Create the body part The same way we can add the condition. So or you can write here Come back from update Or edit whatever you write. So simply say to do is equal to to do for a pop up dot get to do set the state and Now we can check for this if the value is not equal to null. So then we have to do what? Same code that we can use it over here opales paste it and say Updated and you can change this color as well to let's say orange Or some shade of orange. Okay, that's fine. And let's go back here in the update case So We have already written the code for the same. So that is all for this. Let's try with this First one to 11 and you can see it is added to do update. Let's update and It is not updated. So it is saying updated, but it is not coming on the home So let's quickly cross check what we missed. Let's try to add one more and cross check. That's fine double tap triple one update and It is coming updated, but it is not Okay, let's try to delete this one. Oh We have not added any logic for the lead Let's go back home page find find I can so on the click of this view and Delete so here we need to do what the lead? Simply say to do rap. Oh dot Remove lead and the past this to do and once it is deleted Simply say set the state and you can do what? to lose is equal to to do rap. Oh dot cat to lose and Then we can show that scaffold messenger. We can just use that from find copy this and will Paste it over here and simply change this value to do dot title deleted and The color you can make it red Whatever you want Give this so this is for deletion. Let's try this You can see first one deleted successfully and Then we left with two things. The one is we need to mark it complete and Uncomplete For that we need to find the reading icon and Here on press we need to write the code. So what to do is? Let's use to do Rappo dot Mark completed and past this to do and then simply do what? to do Equal to to do Rappo dot Get to do is and you can simply say set the state this is what we need to do and We also need to do what? this icon it's already Coming like this Let's save this and try to use and You can see it is working One more thing we can add a condition over here Let's go here and change this icon as well color color Again, we can add this condition It is completed Then say colors dot purple otherwise Let's start Great and save this Now it should look little better and same way we can add this coloring to the card as well if you want So for card we have the background It's not background. We have that surface paint color that is based on that To do dot is completed then we can make it colors dot red Otherwise colors dot white Let's try this And see this seems better Yep Now we left with the update part. So what we were doing over here We were creating a new to-do. That's why this was not able to match this idea over here Okay, so this was a problem So what to do is Let's go back here on This So instead of creating a new to-do what we need to do we need to get the already existing to-do since we need The already existing ID so we get dot to-do Or you can do what you can simply specify the ID over here. Let's do this here Simply do what? to-do to be updated Dot ID is equal to widget dot to-do dot ID Well, let me just do like sorry this So now it should be working. Let's save it Let's try to update the same first Just change to this and you can see it is updated. So let's add one more Add Let's add one more now we left with only search part Let's try to search first So nothing is working Just go to that search part. That's a find We have to go to home page and find the text field and here we will be adding one own change The own change will be giving me one function that is giving me new value back What I will do over here. I will say to-do to-do is equal to to-do repo dot Search to-do so this gonna give me the list of to-do's. That's why I assigned it Back to to-do's variable. So here we need to pass this title. That is the value Whatever user has entered. So once it is done, we can simply set the state and save it So now it should work Let's try to do something you can see now with F. It is coming to only and We have rest of the things. Let's try with sweet and you can see It is coming. So we can just remove this This is how we can do the things So that is all for this video. If you have any doubt do comment in the comment section. Otherwise like share and subscribe Thank you