Todo App using Rest API | CRUD App | Flutter English Tutorial

hello friends in this video we will build a flutter application where we will use a real rest api so this is the demo of the application so in this application we are having a to-do app where we can add a task like this is going to be our first task we'll say which says let's learn is the title build a real to-do is description once you submit you get a confirmation of success so you can see when you come back you see the task let's add one more task so let's add title first this is fantastic and for the description we are going to write this is amazing we get a confirmation when we come back we have a task let's edit one of the tasks so suppose if you made some mistake or if you wanted to make some changes to the existing tasks you can edit it and you will get the confirmation of updation success when you go back it automatically refresh you can click on delete and it will delete the true task and this is our thread application we are creating this is the reading and updating and deleting so we are covering all the four operations now we will see the api documentation as we are going to use a real api so it's important that first we know about the api which we are going to use so this api is live on internet which means you can also open this url and use it and see it okay so here you can see that we have to do a schema so we will mainly focus on to do section so in the to section you can see we have five different endpoint the first one is get all second is like create the third in get by id put is update by id and delete is for deleting it so we have five endpoint we will be using all of these five to build the application let's use one by one so this is the get all so here we click on the try out at right top and execute you see we got the response here so currently the response is not having anything but if you go to post and try to create something and after that if you will try to get it you will get some data so the title and description you see execute button let's click on this you see this has been executed and here we got the response you see there is created at updated at id these are some extra field which is being automatically added okay so let's copy the id once we copy the idn once we come to the get by id and if we paste the id you can see we are getting the tasks if you try to put some random id it should not work you can see one two three is invalid id okay so now we will go to get all and try to execute and you see we got one item because currently we have only one so like all all to do task is only one so let's create one more so now the all to do task will become two let's add one more so now we have three tasks and you can see now we have three now if i will do get all i will see all the three tasks which we have created so get all basically gives us all the tasks which we have created till now awesome so let's try to delete it so i have one id if i paste and execute you see i get success and this is deleted if i try to delete again it says document not found because that dot command doesn't exist we already deleted it let's try to edit or modify a document which has been deleted i know i might be like sound like a fool how can we delete like edit something which is deleted i am just testing it if this is correct or not okay okay so if i try to do it it says 404 document not found i hope you got the idea this is a real api and works like the way it should work okay so let's copy another id and let's try to update it so you see i get success so this id was of second task so now we don't have task two this is task nine the id is still same but the title has been changed coming to the delete let's try to delete the task nine okay so task nine has been deleted if i come at the first one execute you see i only get task three so now currently only we have one task you can open this url in your browser and you will find that you can also see the task and there are some metadata which can help you in pagination if we do okay so let's add one more task and execute so after adding if you will come to browser and refresh you will find that that can be also seen in your browser and because in our browser we send get request so whenever you type any url in your browser and press enter it send a get request to do all of this in our flutter application we will use this package which is http now we will start the coding and we will use that package and api to build the application so first of all i am having this much of code which i will remove and i am going to start from writing first line of code so you can see here i start by writing main and inside the main we have run app after that we will have material app inside the material app we will have a home page so let's create the home and home is going to be home page currently home page doesn't exist which means we need to create it so let's zoom in little bit and we will create a directory name screens inside that we will have home dot dot so this is the first page we also have a page for like adding the to do so that is going to be the add page dot dot we can name it home page as to-do list because on the home page we will have list of produce so let's write stf and to-do list page so now we have created our first page and it is going to return the scaffold that's it so now here we will return to do list page as our home so this works fine so in our scaffold it's empty so let's add app bar and the app bar will say title text and the text is going to be to do a list okay so now this looks good i'm going to change the theme and that's very simple so just write theme data or dark so now we have a dark theme there is a debug banner at the right top corner we can remove that easily by giving this parameter awesome so now we have the basic scaffold app so let's start by creating another page which is add page so currently we have only one page so the add page in order to navigate to the ad page we will create a floating button and that will help us in navigation so that is the ad you see add to do in the right bottom okay so when we will tap on that it should open a new page which will be navigate to add okay so in order to move to that page we need to first create it so currently we do not have that page so let's create it first let's import it okay so now we will return scaffold here and let's have a app bar and the title is going to be text with add to do awesome so now we have a page where we want to navigate on button click so let's create a route and this route is going to have a builder which will return this page now we will post this route and after pushing it will open that way so let's press on this it doesn't navigate because we haven't assigned this callback to the on press now it works and this is awesome moving forward we will create a form and child okay we have to write body okay so let's write body and we will have a list view inside our body we could also use column the reason of using list view is if you use list view when the keyword will open it will be scrollable you will not get overflow error so now we have two text field so in order to identify the purpose of the text field we will have a hint text and hint text work like a placeholder so title awesome so when there will be nothing this hint text will be appearing in that text field like a placeholder and the next one is description and the description can be longer so for that we will allow multi line so min line is 5 max line let's make it 8 so now you can see here we have like multi line so whenever we are having multi line the keyboard also needs to be changed and for that we can say text input type and multi-line so when you do this in your keyboard at the right bottom you might find a enter or next line button so the corner are like very much attached to the corner like the form is attached to the corner let's add some padding now we are going to have a elevation button and this button will help us in submitting this form to the server so here we have this button now so all the form control controls are currently like very much tightly attached to each other so we will have some space between them via side box or using size box so now this one looks good and yeah so now we should proceed to the next step which is submitting the form to the server so when we click on the submit button it should take the input from the fills and submit it to the server so this will be the form handling how we will take the input and submit so we will make a method called submit data and we will split this task into three different part it will help us understanding how things work and how you should have a approach towards the form submission so first we get the data after that we submit the data to the server and the third one is we give a visual feedback to the user if the data has been submitted successfully or it failed so let's start with the first one and this is going to be very small so don't think it's a three step task it will take much time it will not take much time okay so the first one is get the data from the server so for that first of all we will create a variable title and okay in order to get the data in the variable title we need to have a controller which can help us in accessing the value so for that we will create text editing controller and the first is going to be for title we will create one more and that is going to be for description so now we have two controller so we will attach these controller to their respective text field like this control it okay so now this has been attached moving forward using these controller we can have the value so text controller controller.txt basically like title controller and description controller.txt and we will store these in the variable so now we have the input moving forward what to do with these inputs so when we want to create the data we have some request body this is a request body which we are sending to the server so we need to create a body something like that using input of the form so here we are having the body so the task was hard coded now i replace that thing with the variable so now we will send these this data to the server instead of any hard coded value so whatever will be inside the form that will be sent to the server using body so now the get part is done the next one is submit the data to the server so using http we will do that so for that we will go to our pubspec.tml file and inside the dependency we will paste it okay so now we paste it and save it it's fine moving forward we will import that library which is or basically package and i will write alias http so now all the things which is defined inside just http needs to be accessed using http alias okay so you can see in the post we create the data and we send the data so we send a post request to this url and we send the data and the url can be found in request url also this is called as end point so most of the time the back end developer will provide you this endpoint if there is swagger documentation you can read that from there also so we have this url so now the next step is to convert the url into uri okay so now the url has been converted to the uri and we are making the request moving forward we will have a variable where we will make the request and store the response so as the http post takes some time like making a network call will take some time based on your internet speed that's why there is a wait before that http post now you can see that when we are making the request we need to send the body this is the request body which needs to be sent so for that inside the http post there is body you can just give the body and this body will be sent to the server along with this other information okay so now let's print the response and see if everything works or if there is any issue so let's restart the app so i restarted that but looks like it didn't work yeah now it's working okay so now i will open the debug console and click on add to do so now we write a task with a description and click on submit nothing happens okay the reason is i did not call this method on button click so now i have called so when i click on this i get a unhandled exceptions awesome i mean not awesome but like we got exception we need to fix it so let's see what is the error so it says type bull is not subtype of type string in typecast okay so there is some issue in typecasting so bull cannot be sent like this so for that what we will do the right way of sending json data is to decode it first so we will do json like encode it first encode it to the string so now we do json in code and we send it so now we get the response looks like that is like the request has been received by the server but i don't know what is the response so let's print the status code and the body let's submit it again it says 400 which is not a good sign it's a bad request exception okay so again it was not success but at least we are able to send it to the server let's look at this curl and we find that the content type is not like declared here so whenever you are sending the json you should declare the content type in header it's not required every time but it is required in most of the case that you declare the headers what kind of data you are sending in the body so we declare that content type is json in the header so now our server knows that in the body although we are sending a string but that is not a string that is a json so server will convert that string into the json or server will parse it that string into the json by itself so now we get the status code as 200 and success as true you can see success is true which means everything works so now whenever we make the request to the server for creating a to-do and if we get the status code as 201 which means the data has been created on the server so 201 is the success code for us so most of the time you might be not aware what is the success code so probably you can first of all print the status code and just know what is the success code and after that apart from success code all other are failure codes so in our case 201 is success code for creation so let's uh print something in the console so if the request is success like 201 it is success and if that is not success it will say creation failed so let's try to do it and confirm if it is working as expected so i will say item 2 and in the description i will say item 6 let's submit it i get creation success so everything was good let's try to make this request as invalid and let's confirm if that is working or not because the success was working not sure about the failure currently we have one more things to do to in order to test the failure we are not giving the visual feedback so we will test the failure after uh building the visual feedback thing so for visual feedback we will have a scaffold and that knot is careful basically a snag bar and that snag bar will give the visual feedback to the user for the success also there will be a visual feedback and for the failure also there will be a visual feedback so this is a method which we will use so here we will just pass the message which is creation success so now this one is done if i submit you see creation success so now we don't need to print that message anymore we can get the idea of success and failure from the ui so let's do the same for failure also so whenever there will be failure we will so a snack bar but the issue is the success and failure snack bar have same styling so let's have a little different styling in their behavior so that it will be easier for the user to understand without reading the message also because you know like whenever there is some warning you know by their sign that's red so here we are having a red background so success is white it's good if i remove the header or i can if i comment the header i get a error creation failed so you see you know it required some attention something failed so now we have this thing this thing completed and the last thing which is remaining here is the reset of the form when we submit the data to the server anytime for creation purpose after submission after success submission it reset the form so currently also it reset the form using like textual reading controller we can set some other values so we are setting empty string in order to reset the form moving forward now i will talk about something which is get all the data which is saved on the server which is the first api so currently we can save the data to the server but we are not aware if that data has been saved or not in order to do that we will like use the first api and you see we have the data here so we can just copy the request url and we will make a request to this url so once we get the url we will convert this into the uri [Music] and once we convert it after that we need to use http package and once you use the http package you can make the request so i will http get and we will just say you are here we do not have to pass anything like body or content because we are not sending any content we are just making a request and look things look good here so we are making the request and let's print the response response dot status code i missed the await part that's why the status code was not there because it was the future okay looks like this one is good if i restart it it doesn't work the reason is i am not calling this method like fetch to do how can we call it so in order to call this the best way is to call this inside the init state so init state is like whenever some visit stateful widget get rendered or displayed it's just called the init state and you see this is calling this one and everything is getting printed so the status code is 200 which is success in this case so if the response status code is 200 we got the data otherwise it failed so whenever we will get the data we need to take it so how can we take it so we will say like uh response dot body that will give me the data and we will use json decode that will give me the data in json format if you remember from the previous like post request which we did a few minutes ago while sending the data we convert the json into string and server takes the string as the input and server gives string as the output also we have to do the parsing thing by ourself coming to the response you can see that when you decode it you get a map so here you can see that this is basically map inside the map there are lots of things we are interested in items which is a string or not a string basically a list or array so we type cast it into the list okay so now we are having items and we will do a set state items equals to result so when we will get the data we will update the state and whenever the request is not success it will come to the else we can show error there so let's refresh now and nothing happened why because api is getting called data is being stored in the variable but like we are not displaying it in order to display it we will use list view builder and inside the list view builder i will return a list tile and it will have a text called sample text okay so now you can see we got a beautiful list view very quickly but it is in finite so we need to give some length so i say items dot length which means the amount of to do which we get from the api that will be the length so now item equal to items of index and we try to print it so you see now we got this data here so let's say as map because i am aware that each to do item is a map so now if i say title like in the map you say the key and you get the value so i say title i got the value for the description i will say item of description and i will get the value that's it so this is how it works coming to the leading so let's so uh index number or counting number basically so it will give us the idea how many elements are there so one two five there are five element so we can keep this leading into the circle after and it will make it more beautiful so let's try to add one more item here and let's submit to confirm if that list is real or not if i come back it is like not refreshing by itself i need to refresh or reload okay test with real so you see this is working as fine but the refresh was the other issue so let's solve that refresh issue so for that we will wrap this list view builder into refresh indicator and here we just have to call a sync method which is phased to do so whenever i will pull to refresh it will just refresh the list of data so now if i add any data i just have to pull to dfs and it will refresh it so when the data is loading it is not showing me any indicator so for that we can have a variable called is loading so it will keep the state of the loading status so once everything is done in the fetch to do i will say loading has been done each loading will become fall false and at the very first when the loading will start the each loading will become true and the else part can be removed for now because we are not using it okay so let's refresh this so now we have a variable which keep the track of loading status so now we will use a widget called visibility and that widget will help us to show a loading indicator which will let us know like data is loading so we will wrap the complete widget into visibility and i will have a logic called visible is loading so if it is true it will show the child so if data is loading it will so the list of item otherwise it will so indicator i think this is the wrong logic okay so if i refresh it it shows me this and it shows me in this for every time because if loading is true it should show the loading indicator which is child otherwise it should show the list so if i refresh it was not working as expected okay so it should be true when the fetch to do will be called okay let's let's do again so you see the loading comes whenever we do pull to refresh but i think this is not a good behavior so for this what we can do we can remove this thing like is loading true okay let's refresh so by default is loading is true and once the page has been loaded the pull to refresh indicator will only come okay so let's try to add one more task and let's confirm if pull to reference is correct or not if i submit it if i create some success go back the task is six if i refresh i get the seventh task which means pull to refresh is working as expected moving forward now we should integrate some more feature to it so currently we have create which we can like add uh to do we have read we can read the to do now we will move towards update and delete so for that in the trailing i will have a pop-up menu button so in this moment you will see what the pop-up menu button is in the pop-up menu button it returns a list of pop-up menu item so this is the more option is pop-up menu button so in the pop-up menu button we need to return some pop pop-up menu item so the first one is edit so if i click on this one i get edit and i get edit for all the to-do item so i need delete also so i now i will get edit and delete so you see we have two options for each to do which is edit and delete so whenever we will tap on any of them it will call a method and we will perform like a perform some action so each pop-up menu item takes a value which help us in deciding which button was clicked so you see on selected it gives us a value and the value will be same as the button clicked value so if you click on the edit the value will be edit and when we click on the edit it should open the edit page coming to the next one delete when we click on the delete the value will be delete and we should delete and refresh the page to show the latest data or delete and remove the item because we don't need to refresh we can also just remove the deleted item so if we click on delete nothing happens for now so let's move forward and let's have the delete api because that is going to be simple so i will start with delete so i will call a method called delete by id which is not defined yet i will define in a moment so i need to extract the id from the to-do so final id item underscore id if you remember the api returns us not id the key is underscore id so that's why i have written that as string because it's a string okay so delete by id is currently not valid so let's define it make that statement valid so delete by id and the id is going to be of type string it will be a sink and the return type is going to be future void awesome so in order to delete it we will first delete the item and the next will be remove the item from the list and that's it for the deleting first one is delete the item api call and remove the item from the current list how can we delete it so for that we need url so let's go back to the swagger and we have some id and in order to delete we need some id so if we come to the delete and if we give some id and click on x cube you will find it has been deleted and the request url is this one so let's copy the request url and let's paste it you can look at the end of the request url and that was the id of the to do which we wanted to delete so we will also do the same thing we will keep the id of the to do at the end of the url so let's call this convert this to the uri and paste it and here also you can see the content type is not required and the accept is optional so we can ignore that header and await so if the response status code equal equal to 200 then the delete is success and we will remove it otherwise it's not success we will show some error like deletion failed or something like that so let's refresh the page and let's click on first one task one click on delete and didn't delete i think let's refresh the page task one is not there at the top anymore which means it is deleted let's delete the first one again we have six item at this point if we re-press refresh now we have five item which means the delete is working but after the deletion it doesn't remove that item how can we do that so for that when the delete is happening we can do is loading so the loading indicator i think but that's not a good idea so for that what we will do we will just remove it without showing any animation kind of thing so items where so we will keep all the element which is not deleted so how can we verify that so we will say from the items give me all the element which whose id is not equal to the id which was supposed to be deleted so now we got the all the elements so now we have final filter so this is just a filtered item so in the items we will keep the filtered item so it has been deleted from the server and on the client side we just remove that item from the list awesome so now the delete is working and it is at same time removing it also okay so now currently we have only two item and moving forward remove item from the moving forward we have few more things to do like edit at this point we can yeah i think it's fine for the delete part i think this is enough we just need to show the error thing here so because that should be like used everywhere so let's copy and paste so error so currently i am like not re reusing the code very much but at the end of the video i will do little bit of refactoring and re reuse the code so let's delete everything okay awesome so now we don't have anything and it it was loading and it didn't show me any item because we do not have any item at this point okay so error is fine do we need to show the error anywhere else um any message i think things look good so success is not required here okay it's awesome so let's move to the edit page so for that we will copy or clone the code of navigation and we will do navigate to edit page so when we will like click on add item and when we add the item we get a form and we add it and we will use the same page for delete edit also but currently we have one problem here which we should fix first so when we create any item and go back so like go back to refresh so whenever we will go back it should automatically refresh because we are coming back from the ad page so most probably we have added something so we can do this very quickly so for that we just have to come to the add page code and here we will just make it async and the pus method is asynchronous method which means whenever you post something it takes some time when you come back like this method get completed so if i add a weight so now the code is waiting on the line number nine until unless you will not go back it will not run whatever is written after line number 19. so this is the meaning of await so now if i go back it runs the code and refresh the page and there was a drawback if you go to the add page and come back then also it will refresh it so we will not focus on the optimization for now but that was a drawback moving forward now when we click on that edit it will navigate to the add page but when we are moving to the edit page we will give the selected item to the ad page so now the add page so this is the ad page we will give the to-do item to the add page so now add page will do some customization on the top of this logic and make this add page behave like a edit page so here you can see we have a optional to-do map so if we click on the edit it move to this page you see and when it is moving to this page now it is having that to do map data so i will create a variable here and say each edit which will be by default false and inside the init state i will check if the to-do data exist which means someone is coming to this page using edit button because whenever we come to this page using edit button there will be to-do data so i will say each edit is true so now if i click on this you see i go to this one each edit variable becomes true but how can we feel it so i will say if each edit is true so the title as i need to do otherwise add to do so let's go and click on edit you see edit to do if i click at the bottom button it says add to do so i hope that what value this line is adding so just by passing that to do item it makes the page to behave like a edit page and in the ad page we are not passing that so it is not like the ad like edit page moving forward using this each edit variable we can make more changes so let's change the button now so if this is the edit page the button text should say update so you can see the button text is now saying update also the button is very small so let's add a little bit of padding and make it more appealing so this is very big so we can decrease it i think this one is good enough yeah so now if someone will press on the button so it will call the update data instead of submit data because when you are on edit you are not like submitting the data anymore you are updating the data which already exists so now this will called update data okay so moving forward now we will work on pre-fill so when you are editing something what happens is that you have some data which you wanted to edit so we will show the user what data they are trying to edit by previewing those data so for that i will create one variable to do inside that i will store visit.true and i will check if the tool is not null then i will say to do of title i get the title in title variable later on i got the description in the scripts title on description variable and i set the title controller.txt as title and description controller.txt as description so this will help us in prefilling the value if i go to edit you see this is pre-fill learn edit so this was valuable pre-filled if i go to the second one go back to refresh and it is also pre-filled so now we are having everything set up now i think we are ready to move to the logic how the api call will happen for the update currently if we click on the button nothing will happen so now we will do the api call so here also the api call will go similar to the create first of all we need to get the data using the text field we will get the data and because in order to update it we need to first know what is in the text field the next one is submit the data to the server earlier we were also submitting now also we will also submit and there is one difference so let's understand what is the difference in summation so let's take a id and let's go to put and if we put the id here and click on execute it like do this so here we have content type in the header and this time the request url doesn't look similar to the create in the create we were having some different url you see here we are having a url which doesn't contain any id but this contains id okay so this is submit update data to the server or updated data to the server okay and at the end that was the id so that should come from the to do map which we have sent from the previous page so widget dot to do will give us the data which is coming from the previous page if that will be null we will say return y because suppose that someone called this method in add like when they are on the add page someone call this method by mistake so at that time they will not have the to-do data so it should not execute anything okay so if the to-do data exists then it will go further and it will have the id and the is completed data and i can have the is completed but for now let's not use in is completed let's not go into the complication let's keep the thing very simple let's keep these completed false so we got the idea now you see it is a put at the top also you can see it is a put earlier we were having the post this also takes the body so now we will copy this thing here for the visual feedback so this is put if the request is you can see if i scroll down you can see in the left side there is 200 that was the success code so if it is 200 i will reset the text field but in the edit case it doesn't re reset why because we do not want to reset because they have they are not creating update success if they will click on the update button multiple times they are interacting with a single data also if we do not have any title and try to submit it will give us the error of updation fail so title is a required property here so now if i do pull to refresh the data updates but by default it doesn't update so if i suppose i read the title update working submit and go back you see the title doesn't update if i refresh now it updated but we do not want to do it manually we want to do it automatically so we will use the same logic which we used in add so we will just use await and make the api call again so now if we will go to the edit page and come back it will automatically refresh let's go to the edit and this is dynamic thank you so much and let's update the description also and i will make videos on pagination and like animation so currently there is no any animation involved in the removal or deletion of the item so now we will move to the code refactoring so this is one of the important part here so now we are having a code which is working everything is good here at this point but the code is very long it is like mixed everything is so much makes it hard to read and understand for any new people so we will refactor it and improve the user experience also so currently we do not have any to do here but we are not aware if the api failed or like there is no to do in the list so we will have the visibility and say if items is not empty so that list otherwise show some text and tell them no item in to do so that this will help the user to get the experience or idea yes there is no any item the api worked and api go to the server and server doesn't return anything which means there is nothing on the server and let's make the text a little bit bigger in order to make it more appealing or readable okay no to do item let's add a item and let's come back and let's see if everything works as expected or not submit let's come back it automatically refresh we have the item so this one is good if i delete it again show me the no to do item so things looks good here moving forward now we should do little bit of more improvement so let's add a to-do item now and if i go back it refresh and it show me the item which is good so now i will add a card on the top of list style which will make this more beautiful and the reason why i am doing this because after this i will do a major refactoring which will give you the scope why i added the card so you see now this one is looking good let's reduce the padding so now things look good but you can see that the card and the code is very bigger okay the code is very bigger so now what i will do i will create a folder for services and in this file we will move all the code to do service so this will handle all the api call related thing so we have get post put delete everything will be done in this file only so no api call outside of this file so we are just trying to keep a one type of operation in a one file so tomorrow if something fails in api we will look into that file not into the complete code base so let's start with delete by id so here i will come and create a static method which will be delete by id and this will be a sync and it will just take a id and i will just paste the code which came from the previous file and if you can see here if the status code is 200 which means it was deleted successfully so it will return true or false based on the status code is 200 or not so i am getting error because of http is not imported so let's import it and let's fix the error so now the delete by id is done so these three lines are not like that much useful anymore and this doesn't belong to here now the this all code belongs to to-do service and here we just pass the id and it works and in the response what we get we get if the deletion was success or not so it is success true or false success variable isn't good we should make edge success so this will tell like true or false like kind of a question thing so each success if it's true it will remove it otherwise it will give us the error so now this code becomes little shorter but moreover it was not make the code sort the main reason was to like keep the similar type of code in a single file so api call will go there that's why i am doing it so now i will do the same thing for the next method which is getting all the data so for this it will return the list of data and the method name is going to be fetch to do's and let's make it a sync so if we come here we see that if the response code is 200 everything is good okay if everything is good we need to parse it to the json and return the list so this one is good now and if everything is not good in if we will return null so let's make the list as nullable and import like io for conversion or dot convert things look good now let's remove the unwanted code from here and yeah so now i will say final response equals to to do service dot to do service dot fetch data so this will fetch all the data let's use await here so if the response is not null which means everything is good let's set the response in the items if everything is good there will be not null otherwise there will be some error so in the else part we can so the error so so error and we can say something went wrong and that's it so there's a typo event oh let's remove oh okay so this one is good now so now fetch one fetch is also refactored so both of the api call has been moved to the other file moving forward now i will create a folder utils where we will have the helpers so we will create a snagbar helper and in this file we will use the show error and paste it why because so error is being used in multiple files and the same code is getting repeated so in order to avoid this what we will do we will keep this file code in a single file and we will import the code wherever required okay so now let's delete this code also and in the fetch to do you can see it is asking for the the parameter so the first one is going to be the context and the other is going to be a message okay so the contact if you are having and like toast outside of the outside of the state full widget like this you need to pass the context so that's why i am passing the context from here okay so now we're talking about the card the card is also bigger like 30 lines of code so i will create a folder called widget and in that widget we will have a to do card and this file will have the code so i will create a stateless to do card and i will paste this code things look good now so let's import the material let's remove unwanted import so this card is dependent on few variables so let's have that variable so the first one is the index the second one is the map final map and item okay so still we are getting some error for navigate to edit page and delete by id so this method is defined in this file so you see this method is here so either i can copy this and move to that file or i can pass this method to that file also yeah definitely you can pass a method to the other file it's possible so let's pass it so i will create a function which will take the map and the function name is going to be navigate edit okay and let's keep it here so now awesome so now i will update this name like this so this is done so the next one is delete by id so let's clone this it takes a string so delete by id text string so i will say string that's it the id is still like undefined so id can be get from the item if you remember the to-do item is having the id that's it as a string because i am aware that the id is going to be string now it's time to refactor this thing so let's delete the card and we will say to do card and let's import it so now it will ask for few parameters which we have defined delete by id so delete by id the navigate is going to navigate and moving forward after that we have item it is going to be item id is not required there we are having an error it says navigate to add page okay yeah i got it so it should be not navigate to add page instead it should be navigate to edit looks awesome so now we like put all those like to do card in a different file so now things have been refactored in this file things look good now although it can be improved very much very much very much but like we do not want to like become the master you know like a one hour of a video we need to learn slowly step by step baby step so here also everything looks good till this point yeah so what we can do here so for this we are having this update data so the update data will come here like updated i jump in api call so after the updates on either it will be success or failure so the update data takes two things the id which we wanted to update and the body or the data which we want to update or replace with the current data um service let's open the ad page yeah so this is the update data so how this will work so this will work like this we are having the body which will be passed to the next page and here we are having the api call so basically we are moving the api call to the next file not everything so api call comes here here we are having id which is good and the map is going to be body let's update the variable name now i will return true false if the status code is 200 everything is good so let's return it if the 200 the result will be true otherwise false so now the api call logic can be removed from here and we can write some simple logic to do service dot update by id okay the response is going to be true false so i will name it as is success if this is success it will be like updation success confirmation yeah so now uh i think the update part is done let's move to the next one which is create so create is almost similar to the update so i just copy and paste the complete code and let's add it it doesn't require the id it only requires the body and yeah other thing is fine and the status quo 200 is good okay so instead of having all of this we will say to do service dot add and we will just pass the body and it will also return like true false so i will say is success and if the is success is true in that case everything is good here also we can take this snag bar and we can move to the other file let's have the context and message context comma message okay and for the success we don't have the success snack bar so let's remove this error it was two times let's copy the parameter pattern success okay so now here we will have context and named parameter message looks good this one is good let's have the same thing here here okay so now most of the thing has been improved only minor things needs to be improved the body so the the way body is working we are taking the input it can be like used as common because create an update both wants the body so we can have a getter map get body and we can paste this code here and we can just return this map so now wherever you will use the variable name body yeah so get the data will be come like that you see get the data now this is the get the data so the bodies now act like a variable so let's remove this one this one okay awesome so getter is a new concept if you don't know you should learn about this one so this is the getter which gives fetch the data from the form field and give us the value yeah i think that's it so if you face any problem while learning this concept please let me know and if i can help you i would love to help you you

Channel: Nitish Kumar Singh

Views: 69,686

Keywords: Nitish, Kumar, Singh, flutter, flutter crud, flutter todo app, flutter rest api, crud rest api, flutter tutorials

Id: Wsor0fci3Ss

Length: 60min 0sec (3600 seconds)

Published: Sat Sep 17 2022