Search Bar with Provider and API Call in Flutter

hello guys in the last video we have seen how to perform API call with the help of HTTP package and provider so in this video I am 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 so this would be also of let's 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 Point input folder and we can just say border radius border radius Dot let's go with this circular and give it let's say 10 idiots 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 spend it spend it so save this just reload this okay so we got a search bar let me add little padding so that it should look nice so 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 and let'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 data 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 user name 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 when 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 red 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 let's say such 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 okay 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 data dot add and we can say add whole and we can add these pets over here is it okay so we need to add pets dot data so because data is the list of elements okay so if user has searched nothing so we can simply display data from original 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 Waiter on this values we can say simply pets Dot data Dot so you can use a VR this is going to filter the values so where so this element gonna give you one data part out of this so we can say what where 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 one as such from any of the word for example if I write e so this linear 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 condition 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 searched belts 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 the search 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 search text or not search so it will update the data so just save this portion okay 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 wet data we can simply say that's 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 so we just go here replace all these things and fine so just save this and reload it so we have one error like a jacket so here we are just removing this save this so let's quickly reload this okay so let's go back to this body and crochet this is the provider and we are doing such value that's fine and then with this provider we are doing this 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 enter 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 specs 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 the reference of this provider you can simply say my or you can say pets provider just for understanding just updating it updating and alter so let's try to restart it and cross check so are we missing something inside the provider it's the first time it is loading this so go here the update data or so we are doing this let's okay and we are missing one thing here so it might be adding it again and again let's just clear this such text Dot data dot dear and so if nothing is searched just add the original data otherwise based on your search you can ask data into this that's why 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 overliving let's restart it and it should work what's the problem here unused import okay 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 t and if I go for p you got add D if you 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 have 2 then we need to write it if you want to close it so let's go for key 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 do comment in the comment section otherwise like share and subscribe thank you

Channel: Jatinder Verma

Views: 11,712

Keywords: flutter, listview, list view, provider, search bar, filter, http, flutter_spinkit, api call, api, rest, rest api, consume rest api, in flutter

Id: o3rI2pDc8MQ

Length: 14min 40sec (880 seconds)

Published: Mon Feb 27 2023