 Hello guys in the last video we have seen how to perform API call with the help of sttv package and provider So in this video, I'm going to cover One question asked in my video. So it would be nice if you would add search bar So although I have replied with my previous video where I have added a search bar in Firebase cloud operations So this time I'm going to perform the same thing with the help of this provider packet So we will update this app and add the search bar into this in order to search data based on the entered information So let's go here and we need one more variable. Let's say search pets so this would be also of pets type and We will just keep it like this Initially it would be empty So what we have to do whenever user will type something So for that we just need to add one Text field over here in this body part So let's wrap this List view into the column widget so that I can add one more widget over here. That would be my text field So this text field would have some let's say decoration That is input Decoration and inside this decoration. We need hint that would be let's say search and What else we need we can add some border as well so out wine input border and We can just say border radius Border radius dot Let's go with this circle that and give it let's say time radius that's fine. So save this So once you save this you are getting some error over here. So here this view need to be restricted So we don't have any length of this view. So what we can do we can just expand our builder list view with widget that is Expanded Expanded so save this just reload this Okay, so we got a search bar. Let me add a little padding so that it should look nice and What else we need so if you want you can just add more decoration. Let's say go here and we would add one suffix icon that would be icon and I can start search That's add const Save this So it would look better Okay, so here we need to get this data So whenever user will type something you need to get it So in order to fetch that data entered by user, we need to use one property here that is on Changed so this is gonna accept one function So let's do what use this one and here you will be getting whatever value entered by the user so this value I need to search with That pets do we have that particular? Let's say username for this example We have used username. I think what title we have used username. So we will search based on the username so let's go here and Now here we need to define the functionality So for that we just move to the logic part that is our provider and here. Let's create one function So that would be search Which one I accept one username Okay Fine. So this will do what what to do is Let's go here and simply create a provider. We can just copy it from Here You can either create a new one or you can keep the same reference. So let's keep it context and listen pulse and We just use provider Dot such and You need to pass this username that is ready Okay, so that's fine. So let's go back here and Here what we need to do. So we need to do some repetitive work So in order to avoid it what I do, I just do create one string here. That is that's a Search Text so initially the search text is empty So what I do, I just create one more function over here that would be used that is up date data Let's go back and check what we are doing here. So we are just keeping the data. Okay, so this would be called once and All done We fine So we just go here and simply check if the search Text dot is empty if nothing is searched by user then we simply need to do searched pets dot data dot add and We can say add all and we can add these pets over here. Is it? Okay, so we need to add pets dot data so those data is a list of elements Okay, so if user has searched nothing so we can simply display Data from the regional pets That is this one which is called Once okay, otherwise if user has searched something then you can do what? You can simply say filter on this values We can say simply pets Dot Data dot So we can use a veer This is gonna filter the values so we are so this element gonna give you one data part out of this So we can say what we are the element dot Username So here you can just convert it into lowercase so that we don't search for case specific Now here you can either use starts with Or you can use contains so contains gonna search from any of the word for example if I write e so this Linea contain e this Erwin contain e this Clementine contains e so all that contains e would be coming over there So it's better to use that starts with for example if I starts with e So it should show only this e portion this one second one not all that contains e So for that we just need to use starts with and here you have to use your search text And once you have searched everything simply just convert it into list So once it is converted into list we can add this list into your search pets So search pets dot add so we have multiple so let's use Dot data dot add all Because this data is a list and Done so once this is done. You need to do what you just need to notify the listeners Let's use notify listeners and we can just copy this and come here So once user gonna type something we will get it over here and we will update it into this such text is equal to whatever username and Once it is done. We just need to do what this update data Okay, so this will update data and according to that source text or not search So it will update the data. So just save this portion Go back here and If we are missing anything so let's go to home page and Here what we need to do So here we have this list view. So what we can do we can just Instead of using this pet data, we can simply say pets not pets we will say so we need to get data here So we are getting it from this pets. So we don't need it anymore and We just use this provider and we can say provider dot Searched pets dot data We just go here and replace all these things. So just save this and Reload it so we have one error like a jacket. So here we are just Moving this save this. So let's quickly reload this Okay, so let's go back to this body and cross check This is the provider and we are doing Search value at spine and then With this provider we are doing this Okay, okay, okay So So what we are missing we just need to just cut this List view And we can discover it with the consumer so that we can use it So let's use consumer here And for this builder we can just pass this function and pass this And so Now here instead of using this Where it is This value we can use Okay, so here actually we need to define pets provider because this Gonna give us provider reference. So with this pets we can simply use Like this Okay, so This was just one mistake So go here and instead of using this provider we can use this Pets which is giving us to the reference of This provider and simply say My Or you can say pets provider Just for understanding Just updating it Updating And All that So let's try to restart it and cross check So are we missing something inside the provider? So first time it is loading this Go here Update data So we admit this That's Okay And we are Missing one thing here So it might be adding it again and again. Let's just clear this Search text dot Data dot Here And So if nothing results just add the original data Otherwise based on your search Even as data into this That's fine That's Okay, okay, okay So I think everything is fine So we are missing one thing here So here we need to just update the data because we are not updating this data So let's use this update data over here And we don't need this notify listener as it is already used over here under this Update data Okay, so that's all I think Let's restart it and it should work What's the problem here? Unuse import So let's delete this line and meanwhile You can see your data is loaded And your data is loaded Let's try to search with something Let's say E And if I go for P You got eddy If I go back Back And if I go for L we have only one So do we have something else? Let's see for C So we have three Let's use L Then we would add two Then We need to write it If you want to close check So let's go for E And E And E I And A So for A we got this For E we got this So that's all This is how we can use the search bar So that is all for this video If you have any doubt To comment in the comment section Otherwise Like, share and subscribe Thank you