Flutter Search Bar TextField Tutorial - Search & Filter Data In Flutter

in today's video we're going to be taking a look at how to build a search bar using flutter we're going to be building an application that is going to display to the user a list of products that we're going to be fit in from an API and then the user is able to filter through these products by typing in some kind of a search Q for example I want to search for wireless earb birds so I'm going to type in Wireless or something like that and then it's going to show me all of the results that correspond to that specific search query that I've entered to do this we're going to be pulling all of our information from an API and then we're going to be taking a look at how we can use this search bar in tandem with that API to create this whole cohesive application as always if you're enjoying the video thus far then please don't forget to leave a like on the video and subscribe to my channel so that you get notified every time I release a new video and with that said let's get into the video so to get started the first thing that we're going to be doing is actually taking a look at the dependencies that we're going to be using for this project to actually build the search for functionality we're not going to be using any external dependency the only dependency that we're going to be using is a package called do which basically is a very powerful HTTP networking package that we're going to be using to actually communicate with our rest API and get the list of products from there so with that said let's copy this come back and then I will come to the pspec yaml file and paste this under the dependency section as always links to all of the resources that I mentioned within this video as well as a link to the source code can be found in the description below so feel free to take a look at it if you're confused at any point so now that I've added the dood dependency under the dependency section I can come back to my homepage which is is a stateful widget class that I've created which for its build function currently returns a scaffold and we're going to be starting everything from scratch one other thing that I'd like to let you know is that I have created a models folder under my lip folder where I've created a product. do file where I've pasted in the code for what the product is going to look like that we're going to be getting from our API you can just basically download the source code for the actual project and then copy and paste this file in because this is just a generic model file and there's nothing special that we're doing here this is basically going to allow us to take the Json that we get as a response from the API and then convert that into an instance of a dart class so with that said I will close down this file but you can download the source code and then put this file here but it's not necessary for what I'm going to be showing you in this tutorial and let's talk about the final thing and that is where we're going to be getting our data from we're going to be using the freest ai.com API for products it provides you a bunch of different apis but specifically we're going to be working with the products API and specifically the end point which says w1/ product so this is the actual endpoint that we're going to be using and if you take a look at the actual search cury parameter you can see that to the/ we1 product endpoints we can add a cury parameter called search where we can specify what our search term is if we want to search for specific products so we're going to be using this as well later on so with this said let's get into the actual coding process now so to get started with the actual development process the first thing that I'm going to be doing is actually actually start debugging the application on the simulator and once the application is actually running on the simulator then I will resume the video so welcome back everybody as you can see the application is now running on the simulator and I have a blank scaffold being shown to me so the first thing that we're going to be doing is actually coming to my scaffold and then adding an app bar here so that we can show the f-commerce title for our application within the app bar like so so now that this is done the next thing that I'm going to be doing is actually taking a look at building the body for the actual UI so the body for the scaffold is going to be a to a function called build UI and once this is done then I'm going to basically Define this function I'm going to say that this function will return a vidget it's going to be called underscore build UI and then within this function I'm going to return a sized box. expand widget and then it's going to have a child the child is going to be a column and the column is going to have some children which for now is going to be an empty list with this done hopefully everything's still working so we can proceed to The Next Step so for the next step what I'd like to do is firstly take a look at the logic for loading the products and then from here we'll take a look at Logic for setting up our actual search field so to load the products what I'm going to be doing is using a function which is going to fetch the data from our API and then to display the products I'm going to be using a list view so let's take a look at the list view side of things first so what I'm going to be doing is actually creating a function that returns yet again a widget and I'm going to say that this function is going to be called underscore products list view like so once this is done this function will not take an any parameters and I will say that we are going to return a sized box and then for this sized box I'm going to give a height to my actual list and the height in this case is going to be 80% the height of the screen so I'll do media context size of context. height and then 0.80 there we go and then I'm going to give it width as well and the width will be the complete width of the screen so I'll just paste this code in because it's very similar to what we've been doing before then I will specify the child for this actual container and and the child in this case is going to be a list view but specifically we're going to be using the list view. Builder function and the reason for that is because we need to programmatically build our list based upon the actual products that we fetch from our API so we need to define the item Builder function here which is basically going to Define how each of the child within this list VI are going to be built it takes in two parameters a context and an index and then basically within the function we return the actual child for this list view so I'll leave that to be empty for now and then for now we can set the item count to be zero so with this done I can take this products list view I can come back to my build UI function and within the column I can add to the children's list a call to the products list view function so now with this done we can move to the next step that is to actually load the products so to load the products we're going to be using the endpoint that I had shown you previously which is/ we1 / products so let's go ahead and do that so to do this I'm going to be doing the following thing the first thing that I'm going to be doing is that on my homepage state I'm going to be creating a list which is going to keep track of the products that we're going to be showing within our list view so I'm going to say we're going to have a list and this is going to conin products within it and this product class comes from the product. file and then I'm going to say it's going to be called underscore products and to begin with it's going to be an mty list like so and then we can import the product class from do/ Models product. once this is done the next thing that I'm going to be doing is on the actual homepage State class I'm going to define the init State function and then within the init State function I'm going to say that after the Super classes init State function has been called I want to call a function called load data so that we can actually go and fetch the data from the API then once this is done I'm going to define the function I'm going to say it's going to be called load data it would not return anything for now it's not going to take in any parameters I'll mark it as async and open it up and then we can actually start the actual logic here for getting the products so the first thing that I'm going to do is Define the URL or the endpoint I should say where we're going to be getting the information from so that is going to be URL is equals to and then the actual products endpoint so I'll copy and paste that in it's going to be the following https colf freest ai.com apb1 SL products once this is done we're going to be using now do to actually perform our request so I'm going to do the following on my actual State class I'm going to create a variable final doore Doo and set that to a new new instance of the do object and then we can actually import this package as well once this is done I can come back to my load data function and here I'm going to do the following I'll say that I'll create a variable type response call it RS and set it equal to aore do.get and we're going to be getting the data from this URL that be specified so once this is done the next thing that I am going to be doing is then making sure that the responses data is not null so if the response. data is not null then what would I like to do well in that case for now let's do this let's print response. data like so and that's pretty much all we had to do so I'll save the file I'll actually open up the debug console and then let's actually come back and let's restart our app and let's see if something gets printed out so as you can see in the debug console we're grinting a list being printed out which contains Json objects each object corresponding to a specific product so now what we need to do is iterate over this list and for each of these Json objects that we're seeing convert them into an instance of the product class that we have created so it's going to be pretty simple the first thing that I'm going to do is basically create a list which is going to keep a track of the products so I'm going to say it's going to be a list of products I'm going to call this products equals to n Mt list and just to not confuse you guys you can see that the products list that is on our homepage State class is actually underscore products not product so this is a different list so then what I'm going to be doing is that if I made sure that the response. data is not null then I'm going to do a for Loop where I'm going to iterate over all of the actual Json objects that I get in the data so for that I can do for warp in response.data I can do the following and here I'm going to do products. add so remember this is this products lists that we've defined I'm going to do product. fromjson and pass it the actual Json which is going to to be the P variable so there we go so what we're basically doing here is that to our products list we're adding a new instance of our product class and this instance is Created from the Json file that we passed to it and the Json contains all of the data so the from Json is a helper Constructor which basically allows us to take in a Json object and then return to us an instance of product so now that this is done the last thing that I'm going to be doing is once all of this is done and we're outside of the actual for Loop and outside of the if Clause is to call set State and then do products which is in this case going to be underscore products is equals to products and that's pretty much all we have to do and that's to command save with this done I'm going to come back to where I am building my actual list and here for the item Builder now I'm going to say that we are now going to be returning a list tile and then the next thing that I'm going to do is that for for the outm cones here I'm going to say that it's going to beore products. length and then save and then for the list tile here what are we going to be showing so let's firstly show just the title of the actual product so for that I can say that the title for the list tile is going to be a text widget and the text widget is going to have some data and that data we need to get from the product so how do we access our products from the products list well what I can do is using the index that gets passed to me create a variable which stores a reference to the product so this is going to be a variable called Product of type product and we're going to get the product from the products list at the specific index that we're building this list tile for and then here we can do product do name there we go so let's do save and hopefully we should see it but let's restart the application and oh I had a break point so I'll skip that and there we go you can see that the actual products are being printed out and we can scroll through this list so now we are at the point of actually creating the search bar so that we can search through these products so how are we going to be doing that well to do that what I am going to be doing is basically coming to my build UI function to the actual column and before we add our actual list view I'm going to add a call to a function called search bar so on top of our list view we're going to have a search bar then I'm basically going to Define this function say that it's not going to take anything in as its parameter and then I'm going to say that we are going to be returning a sized box then the size box is going to have a specific width which will be the 80% width of our screen so for that I'll use media query. size of context. width time 0.80 and then I'm going to have a child which is going to be a text field and then the text field is going to basically for now show nothing let's just see how it looks so it looks like this one thing that I'd like to do is maybe just change the decoration property on this so I'm going to say that it's going to be cons input decoration and maybe the Border can be outline input border there we go then let's do save there we go it looks much nice and then I can add a hint text here as well which basically says search and then it's now looking much better then what I'd like to do is that on the text field I'd like to basically Define the onsub submitted function call back which gets a value passed to it and this value is basically whatever the user inputs within the search field and then what I'd like to do is that whenever the user types in something and then submits it I want to call our underscore load data function so I'm going to do underscore load data like so and then here what I'd like to do is pass the value but currently we're not taking in the value for the load data function so I'll modify the function and I'll say now it's going to take in a optional named argument and this argument will be string optional search text there we go looks good so let's do save let's come back to our search bar function load data and then basically for the the load data function do search text is value and that's pretty much all we have to do and do command save so now with this done what I'd like to do is come back to where I have my load data function and here I'm going to say that in the case that our sour text is not null then I'd like to basically add a query parameter to the end of this URL so to do that it's going to be the foll I'm going to say if the source text not null so if it not null then what would I like to do well then I'd like to basically to my URL append the following cury parameter and that is going to be question mark and then you can actually come to the freest ai.com products API documentation you can see that the query parameter needs to be question mark search equals to so let's do that question mark search equals to and then we basically put in the Cy here so the Cy here is going to be the actual seource text and that's pretty much all we had to do and do command save so now with this done to our actual URL if the search text is given we're appending the following cury string and this is going to ensure that the actual products that get return to us have that specific search term within them so with this said that's pretty much all we have to do so we can test this out so to test it out what I'll do is restart my application okay I can see everything now basically click on the actual search tab you can see that we're getting this overflow error so let's quickly fix it by coming to the actual scaffold and then saying the the resize to avoid bottom instent property is false and now if I type anything in here for example Ultra and press enter or you can press the tick here you can see that now the only result that is being returned to us is Ultra Book if I want I can say this to be head for example and press done now we're seeing just headphones I can do wireless and then press done and there we go we're seeing all of these Wireless products so now what I'll do is restart my application and the last thing I'd like to do is just make the list Tes a bit better so firstly I'd like to add an image for each of these products so for that I can come back to my list H and then here I can add a leading property and the leading property is going to be image. Network and then here I can do product. image there we go save and now we're seeing the image then for the subtitle i' like to have the brand and the price so I can do subtitle again a text widget and then here I am going to say that the first text is going to be the actual products brand so product. brand let's see how it looks there we go it says Sony DJI and then I can have after this an actual Dot and following that I can have the actual price of the product so that can be product. price. twring let's see how it looks there we go I'd also like to add a dollar sign to the price so I can do back SL dollar sign to escape the actual character and there we go we can see the dollar sign as well and then finally I'd like to add a trailing widget for the actual ratings so let's do that as well so for that to the same list T I'll add trailing is a text widget and the text widget is going to contain the following text which is the product. rating. two string yeah we can see the rating and then after that I will have a space and then a Star Emoji so that's pretty much all we had to do so with this done let's give a final test to our application so I'll come to the search bar type in Fitness and then done and there we go we can only see products that relate to Fitness I can type in something in the middle as well for example tread and hopefully this should show me treadmill there we go so everything looks great the last thing that I'm going to be now showing you guys is that in the case that no products are found for example I do tread X I don't think there's going to be anything like that you can show the text which is no products were found so for that it's going to be fairly simple what you're going to be doing is coming to your column and here you're going to be using an actual collection if statement and where I'm going to be doing the following I'll say that the products list view is only going to be added to the column in the case that the products is not empty and then I'm going to have another if statement like this and this is going to be products do is empty so in the case if it's empty then I'm going to do a text and then say say no products found there we go and then save and there you go you can see no products and then after this I'm basically going to be wrapping the actual text with an actual padding widget just to add some padding from the top like so and I'm going to say the padding from all sides will be 25 just so that it looks a bit better there we go so with this that's pretty much it for today's tutorial I hope that you enjoyed and learn a thing or two about how to implement a fully functional search bar within your flutter application and then use it for various different purposes like we did when it comes to interacting with the restful API if you enjoyed the video then please don't forget to leave a like on the video and subscribe to my channel so that you get notified every time it release a new video and as always stay happy stay healthy keep learning keep growing and I'll see you guys in the next video bye-bye

Channel: Hussain Mustafa

Views: 1,691

Keywords: flutter search listview, flutter search bar, flutter search list, flutter search listview example, flutter search ui, flutter listview, searching in flutter, flutter show search, flutter show search example, flutter show search tutorial, flutter search bar tutorial, flutter widget search bar, flutter widget of the week, flutter, flutter tutorial, flutter app, flutter tips, google flutter, flutter widgets, flutter developers, flutter search text field, filter, list, grid

Id: 8zxQyKH7Oco

Length: 18min 43sec (1123 seconds)

Published: Sat Jun 01 2024