Todos App in flutter

hello guys in this video we are going to create to-do's app so here you can see on the home screen we have search bar and we will list all the tutors over here so let's go here and start creating a 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 mark it completed and you can even unmark it so let's go and search for something let's say fir 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 set State for the timing 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 app 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-do's 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 of 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 so 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 Do's add to-do's 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 tool 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 ID as the optional one rest of the things are required so let's go back here and quickly update this ID of 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 do's 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 uh Mark completed so for example for that we can do what we are getting this to Do's 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 its 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 start there is a method remove where where it is giving you element so that is your to-do so what I will say element dot ID is equal to this to do dot ID okay so if it is Nest then just delete it so this double equal to so that's it and for update so for update we need to do what again we need this kind of project so I just reuse it go here do I need to update all the items so 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 fine 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 to-do's 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 term produce Dot that 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 entered by user that is title again to lower case so that no case issue so we can assign this list to Do's or you can say filtered list we have already oh 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 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 repo 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 wrap up so this we can pass over there on loading 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 required this dot doodle wrapper okay so that means whenever you will navigate to this ad this is going to ask for one argument that is to do wrap up so let's pass this repo instance we have already created so its value can't be null let me close check we are already creating it let's go back here we can't do this with the const let's remove this cons and what else over here let's remove this const 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 repo 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 report 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 close the 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 so let's do what import it and you can see it is coming like this and for is completed I will always make it false of the first time okay so this to do is expecting the named arguments that's why it was creating the problem so same 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 missed 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.push there is one more function which we can chain with this that is then so that means when it is coming back from any post screen from this tag so once it is coming back let me do what read the body part and just you just mention over here when come back from add screen so what to do to produce is equal to we need to get the to-do's again from the 2D repo so to do repo 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 you 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 dot off context dot show bar and here we need to pass this sniper 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 add this let's add and this is not coming out one more thing we can add is let me just 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 add part is done let's do what we need to do view part if I 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 see this Dot 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 so required this dot action So based on this section 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 related to view then we have to pass this to do so that means if the action is not add then do what simply use title controller dot text is equal to to do that is widget Dot do Dot title and we have to just write exclamation over here in order to get the value from a label 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 uh 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 point to do page so here we have passed the action but we missed the two Loop 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 check it 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 couple of checks over here let's do what go on the top in the app part here we need to change this text based on the condition if widget dot action is equal to is equal to add if it is ADD then we will be displaying at 2. 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 so simply use a condition so what to do is visit dot action is equal to equal to U 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 written 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 overdone 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 so again it should be changing as per widget dot action is 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 referral but we need to add the logic for update over here so 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 so say update to do and so once we are updating we don't need to do anything else so 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 Inkwell and its child we can add that type okay now we can add some event over here to 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 have already done and here we need to pass the Builder function so which should be to do page here repository is 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 so empty set to do so here we need to get the 2D 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's Dot get to lose 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 copy this 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 eleven and you can see it is added to 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 grow sec 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 so we have not added any logic for delete let's go back home page find find I python so on the click of this View and delete so here we need to do what delete simply say to do repo Dot remove delete and the pass this to do and once it is deleted simply say set the state and you can do what to do is equal to to do repo dot get to lose and then we can show that scaffold messenger we can just use that from point copy this and we'll 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 save this so this is for deletion let's try this and you can see first one deleted successfully and then we left with two things the one is we need to mark it complete and complete before that we need to find the eating icon and here on press we need to write the code so what to do is let's use to do repo Dot Mark completed and pass the studio and then simply do what to do is equal to two wrapper Dot get to those and you can simply say set this date this is what we need to do and we also need to do what this icon is 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 again we can add this condition it is completed then say colors dot purple otherwise plus Dot Gray 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 balance dot White let's try this and see this seems better yep now we're 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 ID 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 widget 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.turu dot ID 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 let's change to this and you can see it is updated so let's add one more at let's add one more now we left with only such part let's try to search First so nothing is working just go to that such part let's say find we have to go to home page and find the text field and here we will be adding one own change account change will be giving me one function that is giving me new value back what I will do over here I will say to lose to do is equal to to do for Apple Dot search to do so this is going to give me the list of to-do's that's why I assigned it back to to lose forever 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

Channel: Jatinder Verma

Views: 475

Keywords: Flutter, Flutter tutorial, Todos app, Todo app, To-do app, To-dos app, To-do's app, Todo's app, Flutter project, Flutter app development, Mobile app development, Dart programming, Flutter beginner tutorial, Todo list app, Flutter UI design, State management in Flutter, CRUD, Flutter Firebase integration, Flutter app examples, Flutter coding tutorial, Flutter for beginners, Flutter development series, jatinder verma, jatinder, jatin, jatinder.verma6, widgets

Id: 9qkkRwVe7UQ

Length: 36min 6sec (2166 seconds)

Published: Thu Sep 07 2023