 Hello guys, so in this video we are going to cover the CRUD operations on ListView. So in order to perform all that operations I have designed a layout for reference that is ContactList where I can save the contact number along with the name and we can display it in the ListView and we can edit it and update it, we can delete it as well. So let's get started. So first of all I just removed this default code. Let's change this title to ContactsList and for theme we need this purple color and so let's remove this home page and we will create our own home page, delete this. Let's create a home page form underscore page dot dot. So here on home page we need to maintain the state of these things because we are not using any database or file system in order to save the contacts. So we have to use the state management. So let's create a state full widget for the same in order to hold the state. Give it a name, a home page, okay just save it and from this build let's quickly return a scaffold and in the scaffold we need app bar and the app bar should have some title. Let's give it title that is a text widget and it is ContactsList and just mention counts here and save it. Let's go back and use that home page over here and save it and let's go back to this emulator and see we got this thing. So just for reference we keep it here. So first of all we don't need this debug banner so let's go to this material app and use that debug show checked banner mode false save it so it is hidden. Now what else we need this contact list should be coming in the center. So let's go ahead and check for another property of app bar do we have any center tile here. Let's make it true and save it so you got it in the center. What we need we need to take input from user so let's go to the body part of the scaffold and return here a column because we need the elements column wise so let's use a column here and define the returns here and what we need here we need two text fields so let's use text fields the one is this so let's add const as we are not giving any dynamic content save it and you can see one edit text over here. So I need some padding around it so let's wrap this with a padding and I just keep it eight. Now we want to see some border like it is coming here. So let's go here and use some decoration decoration so we have input decoration and inside which we need some border for border we have outline input border and we have border radius here border radius dot all and here we can use radius dot circular and give it 10 I think that would be fine okay here you go. So we got this and to display this in text we can use here hint oops under this decoration we have hint text that is contact name save and you got this fine the same way I will create one more text field copy paste and this is for contact number save it okay so we need some spacing here just before this I will use a const iced box of height 10 and just cut this comma so since we are using const on the top we don't need it here so later on when we use some dynamic component we can use that so let's use some spacing after this as well and that's fine now here we can mention the name here we can mention the number so in order to enter the number the keyboard should be of number type so what I will do now we can use keyboard type here keyboard type that is text input type dot number yeah so once you save this you will be able to see the keyboard is changed to number and one more thing we can add on over here we can have max length so that means I want maximum 10 digits we can enter over here after that it will not work so let's try with this one two three four five six seven eight nine ten and then if you try it it will not work okay that's fine that's fine for this now what we need after this we need two buttons so let's use some spacing here and use buttons so we need two buttons in a single row so for that we have to use row widget let's use row here and children and under children we have elevated button whose on press we will decide what to do later on and the child would be text where we can enter that is safe okay now this would be const since we are using this on press we cannot use everything as const let's cut this comes from here paste it here paste it here use it here use it here and use it here as well and that's all let's save it and see how does it look that's fine so same way we need one more button I just use comma here paste it and they give it a name update save it now we need it in the center and we need some spacing so let's use main x alignment main axis alignment dot space even the so that's fine now next we need less list view okay so in order to work with list view we should have some data so what we are maintaining here is name and contact number so we need a list which is holding name and contact number so let's create a variable over here so we would have a list of so we need to maintain two things let's create a class for holding two values that is text dot dot and we will create class contact which would have two variables that is name and number okay or you can use it contact and so we need a constructor for the same so that we can assign the values but let's create a named constructor where we have required this dot name and required this dot contact save so here we are now going to create the list of contact and we will create a empty list so how do you do so list dot empty and you have to use growable property with true value so this means we will hold the contacts over here okay so that's fine with this and we can use the list view with this contacts okay so let's go down here under this row and use the list view over here create the list view dot builder because we are using the dynamic one so here we need to use item builder let's assign the function which gonna return one row so let's say I will create a another function get row that gonna return me the widget okay so that's all for this and let's quickly add the property that is item count which is we are getting from contacts dot length and this get row we need to create over here just go here and create method and return type we need to mention widget and we need to return here a widget so what we want we want to return a list and here we need to return the title which would be a text widget and this would be a basically let's go here and see the design so first of all in tile we need this and then this so this would be the title part so instead of using this title we need to use one column over here and then we can use children first one would be the data part and the second one would be the contact number so both we are getting from here okay so we need to pass here the data part so we just need the index over here okay let's go ahead and use the index because it is inside the class so it will be able to assess the contacts variable that is list of contacts so here what I do is I just use contacts and then index dot name and same way I will use here the contact number so that is contact so I just save this before that that we resolve one error the error is we need to pass the index over here so let's quickly use index here and done let's go back here save this okay so we got some problem here problem is we need to define okay so it is not defining with the boundaries so what we need to do here is we need to wrap this list view into expanded so that it should have some boundaries so the wrap with the widget expanded save this and quickly restart this okay so it worked so what we can do in order to check that it is working we can check here if basically your contacts dot is empty then do what then simply display a text which is saying no contact yet otherwise just display the list so we just use some style to increase the size of the font and we can use the size of the font let's give it 22 and since everything is constant let's use const here and save it okay so we don't have any contact yet that's why it is coming that's fine just before this I will add little spacing save it okay now once any contact is added it should be displayed over there in this list view okay so in order to get data entered by user we need controllers so let's create text editing controller for name controller is equal to text editing controller and same way we need one more controller for contact and we need to assign these to the respective text fields controller that would be name controller so since we are using this we need to cut this const and use it with this same way we need to use the controller over here and that is contact controller and just cut this const and use it here save this and now let's go to the save button and write the code here so here first of all I will get the name that is coming from name controller dot text and I will use trim over here to remove spacing same way I will use contact is equal to contact controller dot text dot trim and I will check here if this name dot is not empty and contact contact dot is not empty if both are not empty then we can save it okay so how do you save it we just need to use that list contacts dot add we have already created that contacts list on the top that is empty now we will add the elements into it so to add a value we need contact and we need to pass name and contact okay but in order to maintain the state we need to put it into set state okay set state and we need to do save let's try with a contact let's say Ramana and 1 2 3 4 5 6 so it will be done and save it so you can see you got one item okay we can clear this text fields as well so how do you do so for that we need to use name controller dot text is equal to this empty text and contact controller dot text is equal to empty text and this will look better let's save it and try with a new one let's say Eric and some number is save this and you can see it is working fine now we need to little modify this list item so just go here and wrap this list style we have another widget with card that will make it better okay so this is how it is looking like okay now we need some here the circle kind of thing and the icons for delete and edit okay so let's go back so here under this list style we have this leading property so here we can pass a widget so for the circle we have circle avatar so here you can pass the child the child we have let's say we need the text the text is so what we are doing we are displaying the first letter of this name so name we are getting from contacts and then index dot name and it's first correct and save it and check it out you got it so here we have this two variations of color so what we can do we can add a condition here to change the color so go to this circle avatar and do we have any color for this we have background color so let's use this based on the index if index mod 2 is equal to is equal to 0 that means we need this we need this bluish and I think this deep purple color so let's try color start deep purple yep let's try with this otherwise we use color start purple and we need to define foreground color as well so that is white always so we don't need any condition for the same so let's say foreground color that is color start white and save this okay so almost working same kind of color little variation let's try with deep any other purple ascent and save it yep I think that will fine so you can change the colors as per your requirement let's keep it this and if you want you can just pour this text over so go to the style of this and use text star font weight to font weight dot ball and since it is a const so let's specify cost so I think that's fine now we left with this trailing icons so we have another property of this this style that is trailing so trailing is again expecting a widget so we need two widgets so what we can do we can use a row here because we need two entries so let's use the children so there will be a problem with the row let me let me go ahead and use first of all so we need icon here and the icon would have some icon start so we have edit icon do we have edit yep and the second icon we need icon icon start the lead or bin okay let's try to use this const here and if you save it we got a problem again so what to do is actually this this row is again unbounded let's wrap it with the widget and give it some width sized box and give it some width let's say let's say 70 save this and restart it so we got this trailing here oops so we have restarted let's do it again Eric and give it some mobile number save it second is let's say Sonia and give it some number and save it now it is working as were expected but we have little modification like the name should be bold let's go to this name part and give it a style text style and give it font weight that is font weight dot bold and let's use this const here and save it so what we left is this part should be coming in the left side so that means here we need to mention the cross axis alignment that is cross axis alignment dot start and just save it okay so main axis alignment we are not using here because for column the main axis is top to bottom but we need to align this left to right so for that we have cross axis alignment okay so design is almost ready save functionality is working fine and we need to apply delete functionality and this edit one so let's quickly apply the delete one first so in order to add some action on this we can wrap it with a widget either you can use gesture detector or we have ink well as well so once you wrap this we have on on tap property where we can assign a function and here you can delete so we are facing error because we are marking it constant let's delete this and same way I will wrap this icon as well with widget that is ink well and use on tap here and we will write the code here so this icon is a constant so add const here and same way add const here as well and for delete we can quickly write the code here all set state here and we will say contacts dot remove add because we are already getting the index so we will remove a particular let's save it and check it out whether it works or not so let's delete this Eric and Sonia it is working fine so now we left with only update functionality let me add Eric and the number something save it let's say Tina and some number save it and let's add one more Mina and save this so what we want when I tap on this it should edit this so that means it should display the same values over here in this text field so that I can modify and update okay so what we can do so we can just assign these values to this text so for that we have name controller dot text that is coming from contacts index dot name same way you can try with contact and here we will be using contact controller so save this and let's try to tap on this and you got these values over so you can modify this and once you tap on update button so we can do what on update this update button let's search for update and here we need to write the code of update so same way as we are doing here in this save we will just use these two things that is we need to get values so let's try with the condition the same condition like we are doing over here we can use it over here and paste it here so here we need to close the if and instead of using add here we will use update so how do you update so let's try with contacts and then we need to go for a particular index so you need to remember that index so what we can do is we can create a variable to maintain selected index okay so dot name and you can assign that new name okay and same way for contact you can try with another way as well so but I'm going with this so let's quickly create this selected index as well so I just define error here so that I can quickly come back go here and create a field that is selected index so let's give it int type and initial value I will keep it minus one that is nothing selected so once we tap on this point edit button so we are doing what we need to set the state of that selected index to the whatever index it is okay so let's go to the error where we have created so here we have this contacts so we have this contact and why we are facing error here contact is not reference let's remove this maybe because of this okay so we don't need this line since we are not adding it we are updating it this is the one way of updating so once it is done we can clear it and we can save it and you can set the selected index back to minus one because nothing is done so let's go ahead and try with this edit Tina and you got Tina here and spelling mistake I just converted into Tina let's update it and you got your Tina has been updated okay so I think that's all we have done we have done insertion delete edit and destroy with this let's say and update it so it is updated and everything is done so that's all for this video if you have any doubt do comment in the comment section thank you