#19 || Add/Remove Dynamic Items From ListView In Flutter with Cubit || Flutter Bloc & Cubit Tutorial

welcome back everyone in this video I will discuss how to add Dynamic items to list view in flutter using cuit let me show you the output first as you can see in the output I have two text box one for name and another one is for address and I have a button add employee suppose I'm giving the name as Amar and in address I am giving India and after that I'm clicking on the button add employee now once I click on this add employee then the name and address is added to the list View and the text box are cleared suppose I'm giving another name as Let It Be Rahul and the address is India if I click on ADD employee once again then that item is also added to the list View and if you want you can delete the item as well if I click on this delete icon then that corresponding item from the list view is deleted how to achieve this that portion I will discuss today here I have created this project and after creating the project in the pub ml I have taken the latest dependency of letter block which is 8.1.3 now inside the Le folder I will create a class and I will give the class name as person sorry here I need to give the extension as person dot dot now let me create a class having the name as person and inside this class I will declare two variables one is final string name and another one is final string address now let me create the Constructor of the class and to this Constructor I will pass this do name and this do address so our person class is created now here I will create the Cubit to create the Cubit inside the Lea folder I will right click and I will click on block new Cubit I will give the Cubit name as person so the Cubit folder is created inside it we have two files one is person Cubit and another one is person State first of all I will move to person State let me remove immutable from here and there is a class person state which has been declared as sealed now what I will do is that here I will change its name to person initial State and here I will create a Constructor const person initial State and let me write this code let me copy it from here let me paste it here and here I will make it as person State and in the person initial state I'm just extending the person State class here I will create one more state that is person let me give its name as updated State and inside this class here I will declare a variable final list of person and let me give its name as persons and to the Constructor of this class that is person updated state to the Constructor of this class I will pass this dot persons and let me import it as well so our state has been created now I need to create the Cubit so let me move to Cubit first file and here let me remove this import from here let me click and let me import flutter block now instead of this person initial it will be person initial State because I have changed the name there that's why it will this will be person initial State now here I will create a method let the method name be add person means whenever the user will click on the button at that time this method will be fired and this method will take two parameters name and address so let me declare two variables string name and string address and here I will do one more thing here I will create uh list of person and let me give its name as LST person and I will initialize it with MTR now inside this method whenever this method will be called I will add the name and address to the LST person so LST person do add and it is taking what it is taking object of person type so here I will create the object of person and to this person I will pass the name and address which the user will pass from those two text fields and after that once it has been added I will emit a state what state I will emit person updated State and to this updated State I will pass LST person because if you remember here inside this person updated State it's Constructor is taking a list of person so that list of person I'm passing here fine after that I need to create one more method that is void remove person means whenever the user will click on that delete icon at that time this method will be called and this method will take the index position and now here I will simply write LST person dot remove at and I will pass the index now here I will check if LST person dot is empty means the list doesn't contain any value at that time I will emit the person initial State else means if the list contains some value then at that time I need to emit the person updated State and to this this updated State I will pass that LST person fine now let me move to main do do in this main do do I need to wrap this my homepage with the Cubit which I have created so let me click here and I will wrap this with block provider fine and this block provider will be of type Cubit which we have created that is person Cubit and here also I will pass person Cubit now there is no need of this const I will remove it from here and I will add it here now let me move down and here inside this text field here to pass the name and address to the method this text field needs a controller so I will will move to the cuit and to this cuit I will create two text controllers two text editing controllers right let me create it text editing controller and let me give its name as name editing controller equals to text editing controller let me copy this paste it here and here here it will be address fine and whenever this add person method will be called at that time I need to clear these two text box whenever I will click on this add employee I need to clear this two text box right and to do that here I will call or name editing controller dot clear method copy this paste it here and it will be address editing controller. clear correct now let me move to main do do once again now to this text field in the controller I need to pass that and to do that here I need to write context dot read and here I need to specify the cubit that is person Cubit and now I can access that name editing controller similarly I will copy this and to this text field I will paste it here and instead of name it will be address editing controller fine now we need to dispose the text editing controllers and to do that I will come here and I will override the dispose method and to this dispose method here I will write the code context dot read and here I need to specify the type of the Cubit that is person Cubit and here I will do one more thing I will move to person Cubit and here I will create a method void dispose and inside this method I will dis ose this name editing controller as well as I will dispose the address editing controller and now from this main do dot here I can call the dispose method so our text editing controllers are also disposed now whenever this button will be clicked at that time I need to call the add person method so this button is here inside this on PR I need to call that particular method so here I will use context. read and now it will be person Cubit with the help of this I can call the add person method and to this add person method I need to pass the name and address and to pass the name and address I will simply copy this paste it here and with this I can access the name editing controller and I will use the text property similarly copy this paste it here and it will be address editing controller so I have called the add person method whenever that button will be clicked now I need to add the added items to the list View and to do that I need to create the list view fine so after this after this button here I will use a expanded wiget sorry it will be a expanded wiget and to this expanded wiget as a child I will use blog Builder and to this blog Builder here I need to pass the Cubit that is person Cubit and I need to pass the state as well which will be person State okay now to this I will use Builder and this Builder will give us the context and the state now here I will check if state is person initial State then what I need to display in the UI so here I will return build empty list because initially the list V will not contain any item so here I I'm calling the build empty list method which I will create later on and similarly I need to check the person updated State as well so here I will check person updated state and instead of this build empty list here I will call build person list and here I will pass state do persons now I need to create these two methods right so let me create it widget first of all I will create build empty list here I will return const center and in the child wiget in the child property I will pass text and I will give the message as list is empty so our build empty list is created and here I need to return a container if none of the condition is matched then this container will be returned fine now I will copy this once again or let me create the method here widget and the method name will be build person list and this method will take a list of person and let me give the name as persons now it will return list view. Builder and here I need to pass the item count in the item count I can write persons do length and in the item Builder here which will give us the context and the index so context sorry context and index and here I will return a list style and to this list style first of all I will pass the title property and to this title property I will use text and and to this text here I can do one more thing here I can declare a variable final person equals to persons of index so it will give us the details of the individual person right now here I can use name and dollar of person do name right now I can use subtitle and to this subtitle again I need to copy this paste it here and here I can use address now person dot I need to call person dot I need to import this one person. address now I need to give a delete icon for that I will use trailing and to this trailing I need to use icon button and to this icon button I will use icon property to this icon property I will use the delete icons so const icon of icons. delete and to this onpressed here I will call the remove person method which we have created so again context. read here I can call person Cubit and with the help of this I will call remove person and here I need to pass the index let me put a semicolon here as well okay that's it now let me save this and it is giving some error I hope okay the semicolon is not required this meta package is also not required let me save this so this is the output initially the list is empty now here I'm giving the name as Tom and let it be Australia click on this button and you can see the item has been added let me give another name Let It Be James and it is USA click on this button again the item is added and if I click on any item here then that item will be deleted click once again the item is deleted and we are getting the message list is empty this is how we can add items to the list view dynamically that's it for today's video thank you so much for watching

Channel: Ripples Code

Views: 1,329

Keywords: Flutter Bloc Tutorial, Flutter Cubit Tutorial, Flutter Bloc Pattern, Cubit Pattern Flutter, Bloc Flutter Tutorial for Beginners, Cubit Flutter Tutorial Step by Step, bloc Flutter Tutorial Step by Step, flutter bloc complete tutorial, flutter bloc and cubit tutorial series, flutter bloc and cubit from scratch, add remove items listview flutter, dynamic item listview flutter cubit, how to add remove dynamic items from listview in flutter with bloc cubit

Id: IXoXdIi8U-Q

Length: 18min 58sec (1138 seconds)

Published: Mon Feb 05 2024