CRUD Operations on ListView in Flutter | Contact List App | ListView Insert, Update, Delete, Display

hello guys so in this video we are going to cover the crud operations on list view so in order to perform all that operations I have designed a layout for reference that is contact list where I can save the contact number along with the name and we can display it in the list View 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 remove this default code let's change this title to contacts list 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 stateful widget for the same in order to hold the state so give it a name a home page okay just save it and from this build that's quickly return a scaffold and in this 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 contacts list and just mention cons 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 Nest would be should be coming in the center so let's go ahead and check for another property of app part do we have any Center Tire yes let's make it true and save it 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 this scaffold and return here a column because we need the elements column wise so let's use a column here and Define children's shape 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 X over here so I need some padding around it so let's wrap this with the padding and I'll just keep it eight okay 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 water for Border we have out line input border and we have border radius here solder 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 the syntax we can use here hint oops under this decoration we have hint text that is contact name save and you got this right so same way I will create one more text feed 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 it 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 here you go 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 already 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 save okay now this would be const since we are using this on press we cannot use everything as const let's cut this cones 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 give it a name update save it now we need it in the center and we need some spacing so let's use mean X alignment main axis alignment dot space evenly so that's fine now next we need this 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 error 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 Tech 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 let's create a named Constructor here 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 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 context 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 the turn type we need to mention widget and we need to return here a widget so what we want we want to return a list type 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 the entire 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 hola 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 so 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 let me 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 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 wrapped with the widget expand it 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 con Tech 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 cons share 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 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 these cones and use it with this same way we need to use the controller over here and that is contact controller and just curve this cost 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 stream over here to remove spacing same way I will use contact is equal to contact controller dot text Dot print and I will check here if this name dot is not empty and 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 that did and we need to do save let's try with a contact let's see Ramen now and one two three four five six 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 next is equal to this empty text and contact controller Dot X is equal to empty text and this will look better let's save it and try with the new one let's say addict and some number is leave 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 this 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 its 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 we have any color for this we have background color so let's use this based on the index if index modes 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 dot deep purple yep let's try with this otherwise we use color start purple and we need to Define four count 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 as well so go to the style of this and use text star font wait to font weight dot board and since it is a const let's specify cost so I think that's fine now we're left with this trailing icons so we have another property of this disk tire that is foreign 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 uh there would 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 star so we have edit icon we have edit yep and the second icon we need icon I can start delete or bin okay let's try to use this cons here and if you save it we got a problem again so what to do is uh 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 okay so we got this drilling 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 per expected but we have little modification like the name should be bold let's go to this name part and give it a star text Style and if it font wait that is spawned with DOT board 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 close access alignment dot start and just save it okay so main access alignment we are not using here because for column the main X is top to bottom but we need to align this left to right so for that we have cross access alignment okay so design is almost ready save functionality is working fine and we need to apply the lead 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 just straight 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 const let's delete this and same way I will wrap this icon as well with Widget that is Inc the 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 call 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 for so now we're left with only update functionality let me add ICT 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 textbook 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 save this and let's try to tap on this and you got these values over here 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 up date 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 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 inch type and initial value I will keep it -1 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 so 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 that and we can save it and you can set the selected index back to -1 because nothing is done so let's go ahead and try with this edit Tina and you've got Tina here and spelling mistake I just convert it 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 see 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

Channel: Jatinder Verma

Views: 30,516

Keywords: CRUD Operations on ListView, flutter, ListView Delete, ListView Edit, ListView Update, ListView insert, jatinder verma

Id: drk6d2WilLo

Length: 31min 57sec (1917 seconds)

Published: Fri Oct 14 2022