#17 || Filter/Search List View in Flutter || Flutter Bloc & Cubit Tutorial

welcome back everyone in this video I will discuss how to filter list view in Cubit let me show you the output first you can see that this list contains a list of players and here we have a text field to search for the player name here I'm searching R O then you can see that the player with the player whose name contains r o that player name has been displayed similarly if I type here PA a the player name which contains PA has been displayed and if I remove everything from here then all the player name has been displayed now how to achieve this let me discuss here I have created this project and after that in the pub. EML I have taken the latest dependency of FL block that is 8.1.3 now before starting to code here let me move to extension and in the extension here I have installed the extension named as block once you install this block extension then it will be very easy for us to create the block as well as the Cubit now let me move to the LIF folder right click here once you right click then you can see here we are getting two options block new block block new Cubit these two options are coming because here I have installed that block extension let me click on block new Cubit after that we need to specify the Cubit name I'm giving the Cubit name as player now inside the LIF folder you can see that Cubit folder has been created and it contains two files player Cubit and player State let me move to player State and let me remove this immutable and here you can see the first class which has been created is the player State and a class has been created named as player initial let me change its name to player initial State and inside this player State here I will create a variable which will contain the list of players so let me copy this and let me paste it here now inside this player initial State class I will create a variable final and the variable type will be this and let me give the variable name as players after that I will create the Constructor of this class and to this Constructor I will pass this dot players similarly I will create one more class that is player filtered State and let me give the variable name here as filtered players let me change the Constructor and instead of this do players it will be this do filtered players so our state has been created now let me move to cubit in the Cubit you can see that it is extending Cubit and here the state name is player State and initially we are emitting the player initial State and here if you can see that this player initial State Constructor is taking the list of players so here also we need to pass the list of of players so I will pass all players now here I will create a function filter player to filter the players and I will filter the player based on name so it will take a parameter of type string and let me give the parameter name as name now here first of all I will check if name is empty if the name variable does not contain anything then I need to display the list of all players in the list view so I need to emit which state I need to emit the player initial state so emit player initial State and to this initial State obviously I will pass all players because this all player contains the list of all the players but if the name is not empty then in the else portion I need to filter the player based on the name so here I will de variable final filtered list equals to all players dot where let me change it to player and now in player I need to check for name because I want to search or I want to filter based on name then the two string now I I will check or I will call the method contains if this player name contains that name which we are passing name. to lowercase and let me call this that to lower case function from here also and after that we need to call the tool list and after that we need to emit the player filtered State and to this player filtered State here I will pass this filtered list fine now let me move to main do do in main do do I need to wrap this my homepage with blog provider so let me click here and wrap with block provider now in this block provider I need to specify the name of the Cubit which we have created that is player Cubit and here also I need to use this now this const is not required let me move the const here now in this UI you can see there is a text field and we need to type the player name in this uh text field and here also I need to create a list view to display the list of the players so here I will use expanded widget and in expanded widget as a child I will use use blog Builder and to this blog Builder I need to specify the name of the Cubit that is player Cubit and we need to specify the state name as well that is player State fine now here we need to use Builder now this Builder will take context and State now here I will check if state is player initial State then what will happen in this case I will return uh widget that is build player list this we need to create this function we need to create and to this I will pass state DOT players similarly let me copy it paste it here in else if here I will check if it is player filtered State then here I need to pass state do filtered players else I will return a container now I need to create this so here wiget let me copy this function name and this function will take a parameter of type this one so let me copy this paste it here and let me give the name as players now it will return a list view. Builder and first of all I will specify here the item count so in the item count I need to write players do length and in the item Builder which will take the context and the index and here I will return a list tile and to this list tile I need to pass title and before that I can do one more thing here I can declare a variable final player equals to player players of index so individual Player information will be stored inside this final player variable now in the title here I will use a text widget and in this text widget now here I can write player of what I want to display player of name similarly I can use subtitle and in the subtitle I can display play text off player of the property name was name and Country so here I can paste country semicolon semicolon okay fine now let me save this once I save this then you can see this is the output now if I start typing here suppose I'm typing vat kohi okay it's not working because because here in this text field in the onchanged I need to call that filter player method so the text field which we have created inside this unchanged I need to call context do read I need to specify the type here that is player Cubit and based on that I can call filter player and to this filter player I can pass the value because this value will contain whatever we are typing in the text field now let me save this once again now if I start searching here like Maxwell then you can see that uh the name of maxv has been displayed the name as well as the country similarly if I am searching for suppose it's uh birat then you can see birat KY has been displayed along with the country name this is how we can filter a list view in Cubit that's it for today's video thank you so much for watching

Channel: Ripples Code

Views: 1,001

Keywords: Flutter Bloc Tutorial, Flutter Cubit Tutorial, Flutter Bloc Pattern, Cubit Pattern Flutter, Bloc Flutter Tutorial for Beginners, Cubit Flutter Tutorial Step by Step, Flutter Bloc Pattern Architecture, Flutter Bloc Implementation, flutter bloc complete tutorial, flutter bloc and cubit tutorial series, flutter bloc and cubit from scratch, filter listview in flutter, search listview flutter with cubit, filter/search listview in flutter with cubit bloc

Id: N4bS93uejF0

Length: 12min 9sec (729 seconds)

Published: Fri Jan 26 2024