Add Dynamic Items to ListView in Flutter using GetX || Flutter || GetX

hi my name is amar in this video i will discuss how to add dynamic items to list view in flutter using get x as you can see in the output here suppose i am writing the name as storm and address as usa and after that if i click on this add employee then you can see the item has been added here right now suppose here i am giving another name like john and let it be australia and if i click here then that item is added here and if you want we can delete the item as well if i click here then you can see that item has been deleted from the list view how to achieve this that portion i will discuss today okay now here i have created this project by using the gate cli tool after creating the project in the home view what i have done here you can see here i have taken a column widget and after that here i have taken this text field to provide the name and this text field to provide the address and there is a elevated button having the text as add employee as you can see in the output these are the two text fields right now i will move to the home controller and in the home controller i will write the code to implement the functionality which i have discussed correct now here you can see inside the data i have created a folder model and inside the model folder i have created a file named as employee model dot dot and here i have created these two properties name and address and here the constructor is taking these two parameters which are required correct now in the home controller here i will recreate rx of list of employee model and let me give its name as employees equals to let me paste it here this correct so here i have created an object of list of employee model fine and here i will create the object of test editing controller and let me give its name as name text editing controller equals to let me paste it here copy paste and it will be address fine after that here i will create the object of employee model which will be initialized later on that's why here i have used the late keyword and here i will declare one more variable where item count equals to 0 dot and i'm making it reactive with the help of dot obs now in the on close what i will do i will dispose the text editing controllers which i have created and to do that here i will write name dot name text editing controller dot dispose and address text editing controller dot dispose correct now as you can see here whenever i will hit on this button then the name and address should be added to the list view to achieve that functionality here i will create a method add employee and this add employee method will take two parameter name and address and here i will create the object of employee model and here i will pass this name and address which has been which has been passed to this method that i will pass to the employee model there is no need to use new and after that here i will add this to employees dot values dot add and here i will pass the employee model now if you don't remember what is this employees this employees is nothing but the the list of employee model correct and once it has been added to the list what i will do is that i will use that item count dot value equals to employee model dot value sorry employees dot value dot length means whatever with the length of the employees list that will be assigned to this item count variable correct and here if you can see that here i have created this delete button as well and whenever i will click here then this item should be removed from the list view and to achieve that here i will create one more method that is remove employee and what it will take it will take the index from where it will be removed and inside this method here i will use employees dot value dot remove act and here i will pass the index position and once the item has been removed from the list the corresponding size i need to assign to the item count variable that's why i have written this code here correct now i will move to the home view and in the home view for this text field i will assign the controller as controller dot name text editing controller and for this text field here i will assign controller controller dot address text editing controller correct and whenever this add employee method will be hit or pressed at that time i need to call controller dot add employee okay and this add employee method will take the name and address and to achieve that here i will write controller dot name text attending controller dot text and here i will write controller sorry controller dot address text editing controller dot text okay and once the add employee button is pressed i need to add this to the list view and to do that here i will use expanded widget and in the expanded in the child i will use list view dot builder and in the item builder i need to write the code okay and here i will return a list style and in the list style in the title i will pass text and here i need to display the name of the employee correct so here i write control dot employees dot value of index dot name i need to use this and here i will pass subtitle and just let me copy this let me paste it here and in the subtitle here i will display the address correct and in the trailing i will use gesture detector in the gesture detector as a child i will use icon and in the icon i will use icons dot delete and i will set its color as colors dot red and here i will use const and for this gesture detector i need to use on tap and in the on tab here i need to call controller dot remove employee method and here i need to pass the index correct and there is something wrong here i need another bracket fine now once the item has been added if you can see here that once i add item let me show you suppose here i am adding john and let it be australia click here now once the item has been added these two text fields are cleared to do that in the home controller once the item has been added here i need to write name text editing controller dot clear and address text editing controller dot clear correct and in the home view i need to wrap this list view inside the obx so i will wrap this list style or what i can do is that i will wrap this list view inside the obx widget correct now here i need to specify item count and in the item count i will write controller dot item count dot value now let me run the project now once i run the project this is the output now let me add a name here tom usa and let me click on the add employee now you can see the items has been added and these two text fields are cleared correct now let me add another name and click on this button then you can see this item has been added now if i click on this delete then this item has been removed from the list view this is how we can add dynamic items to the list view in flutter using a text i hope you have enjoyed my video please subscribe to my channel thank you so much for watching

Channel: Ripples Code

Views: 20,324

Keywords: flutter getx tutorial, getx tutorial, state management using getx, mastering getx, getx tutorial for beginners, getx tutorial step by step, route management getx, dependency management getx, what is getx, why to use getx, advantages of getx, add dynamic items listview flutter, add dynamic items listview flutter getx, add remove dynamic items listview flutter getx

Id: 3G-dPzwO9s4

Length: 11min 10sec (670 seconds)

Published: Wed Sep 14 2022