How to Dynamically Filter API Calls in FlutterFlow

in this video I want to show you how to dynamically filter data coming from an API so I've got some products here this coming in from an API call and I have two different dimensions I want to filter on the category and the brand and if you just click on these you can see we filter this down and we've got Apple and Samsung let's just bring it down to Samsung right there you can add more in or clear everything out and then you've got the whole list all right so let's jump into flutterflow and see how this is built so here's the page but let's first jump into our API calls to see what the data looks like so we're using this dummy Json API and if you just go over to this URL here dummyjson.com you check out this API this is just a little resource that provides a bunch of endpoints for you to query when you're developing apps so we've got products and carts Etc and this is the endpoint we're using products so this is the URL right here and let's just test it and see what our data looks like okay you can see we get back products property with an array of objects which are just each individual product right here so you can see this first one is an iPhone 9 with a description and here are the two properties we'll be filtering on brand and category now to make this easier I've selected some Json paths if you don't know what Json paths are we've got a video tutorial you can check out right here but jsonpath is a query language that allows you to filter the data coming back from API responses because normally you don't want just the whole thing you want Little Bits see I want this array of products and this didn't just send me an array of products it has a product's property with an array in it so I have to filter down to this and so right here I've got this and I just grab these from the recommended tab where you just click selected and then it'll add into your selected Json paths which then will be available in flutter flow I also grabbed some other Json paths just for Designing the app and flutter flow okay that's all we need to know here okay let's jump back into the editor take a second to look at how this is built so here here we've got two check box groups and we've added in the options manually you can of course set them from a variable so if these are Dynamic you could select a Json path and set it to there so these are updating based on the data coming from your back end but here I've just hard coded them in here it is important that these are identical to those property names coming in from the API call so if you saw before in our API call we can just go take a look at this real quick we can see that category here the smartphones look like this and we're going to be using these property names later and it's a lowercase category okay so two check boxes with the values you want to filter on right here then we just got a list view with a backend query on it calling that API call no the real magic happens over when we're generating our Dynamic children that is we've made a query back here to our products and we're getting back from that that big Jason response that we saw when we just tested our API so we're getting back this monster right here well of course we don't want everything we want to filter through that so let's go into here so we've we've got that big dump of data from our backend query and now we want to generate Dynamic children but which children do we want okay well let's first put in a variable name we'll just call this these are going to be our products so we'll call it that but what do we actually want that is what out of that big dumped Json response do we want to generate children from so we're going to be doing two things here first we're going to be telling flutter flow what do we want to be generating our children from and second how to filter those children so there's two things we want here because we could generate children based on anything from that response so if we go look at this again and we test it maybe we want to generate children based on all the images of products you can imagine this if we've got some sort of like image Carousel and we want to generate all of those images children then we want to reference these images but no we want to generate a child for each one of these objects in this array of products so we have to tell flutter flow hey that's where we want our children to come from so let's call these products and let's come in here and here same icon from our API that's our big dump response and so that's what we want of course we don't want everything we want to stipulate our Json body but once again right here we're not really doing anything right we've just said oh that's the whole Json response we want that path we set up before and you can see all the ones we saved back from when we set up the API call and we want that products okay great so now we're generating the children that's the first step we're telling flutter flow to generate all these children so let's just see this first so confirm just telling us that we're going to generate all these children so beautiful we can see that ghosted out Children here just to indicate to us that hey you're generating children so when you actually run this or test this you're going to be able to see all those okay great that's the first step the second step is to set up the actual filtering so we've got our products here and let's go back in and we've got this available options right here and we want to say hey we want to filter through these list items we don't want everything we want it to correspond to like whatever we've checked right here and we can see right here we have a filter condition so the big picture is this flutter flow is going to go through each of the items in our list of products so each of those objects and it's gonna check for some condition and so if this condition that we set up here is true for each one of the items then we'll see it if it's false we won't see it so maybe we were on just a Samsung products page we could set the condition to say brand equals Samsung and so if it's true it would show it if it's false it would not okay cool but we've kind of got a more complex setup because we're not going to hard code things in say this item's brand equals Samsung no it's coming from these widgets so how do we do that well let's come into our filter condition and of course we want to check for conditions so let's twirl this open and we don't want one condition because we have multiple conditions namely the category and the brand so we want multiple conditions okay beautiful and of course if you have other things you want to filter on you could just add it right here so before we set this let's think through this logic right here because this can get confusing once we have multiple nesting of conditions going on we had one condition right here but now we're saying we want both of these to be true and if both of these are true through then this will be true and then it'll show it these both have to be true for this to be true so for instance here if it's a SmartPhone and the brand is Apple then it would be true then we would show it okay so let's set this up first with category so let's click in here and you might think that we'd come down to widget State and do something with that you know check if the category of the item we're looking at the product we're looking at is inside this and that's true we'll get there but we can't do that yet because of how check box widgets State Works in an app so when your page first loads check boxes start out as null then when you check them they will be a list of strings right here namely smartphones laptops whatever you have and then when you uncheck them there'll be an empty list so if we tried to do this right when it loaded it would be looking for an item in a list when this isn't even a list it's not so we'll do that widget State thing but first we have to check for the null and empty list condition and I want to show you a little debugging technique I use all the time to figure out what a widget state is so let's just cancel out of here and come into our functions and I've got a function written here called widget State log and it's going to return us a string and the arguments the things that we pass into it is going to be a list and it is nullable and that's important it can be null because we're going to pass in to this function our checkbox widget and we're going to see what the state of it is so here's our function it takes in a list of strings that's called a widget State that's just what we set up here and I'm just simply returning the widget state but turning it into a string just a built-in Dart function great so now we've got to print this somewhere so let's just grab our title right here let's set it from a function widget State log and we are going to set it from a variable and we're going to grab that widget state which is from our category B beautiful confirm that conf and set a default variable value I'll just call it products and we're good to go so let's test this so here are Pages loaded we've got our function running here which is telling us the widget state of this one that we passed in we can see that it's null when we click one we can see that it's a list with one item multiple items and then when we close everything out then we've got an empty list and if you think about it what we want to do is when it loads and it's null we want to show everything and when it's an empty list we also want to show everything so we gotta check for these conditions and of course you can make this function except any data type you want and if you just click on the widget State it'll tell you in the parentheses here what type of data it is okay so let's just clear this out and now we have to figure out if the widget is null or an empty list so if we go over to our functions and we have all this code in the description I've got this is null function and we want the return type to be a Boolean we want it to return true or false because remember we're looking for a true or false condition and we're passing in a list because that's what our widget is and it has to be nullable because that's what we're checking for so here we just have a simple if block we're saying if the widgets State that's what we're passing in right here is null or the widget state is empty and this is just a property on lists in Dart if either of those are true then we're just going to return true otherwise we'll return false because remember filtering through the list a True Value will show it and a false value will hide it so if it's null that means nothing has been checked in our check boxes well then we want to show it and if they've been unchecked we also want to show it so that's why I returned true here alright great so now we're finally ready to finish up our filtering so let's go back into our list view into our products and we've got our Json path of our products we want to filter through these items and we want to check for multiple conditions the first condition will be checking this category and we want to first see if it's null so we're going to say if it's null then do something if it's not null that is if someone has checked something right here then we want to do some other logic namely see if that item is in here has the property of smartphones okay so we need a conditional block here and the first one we're going to check for is that no value so let's come into here go into our functions we've got our is null function and we want to check for our widget state of our category beautiful so there we go that's our custom function passing in that category great so let's confirm this and we want to just say if this condition is true so if this returns true we want the value to be true this might feel a little bit weird but it's just because we're using a custom function if we were checking for a condition without using a custom function sometimes this is a useful way to apply an opposite statement like in here over the whole condition okay awesome finally now that we've checked for null that is to say now we know there's something in this list the user has checked something then we can now check if each individual item is whatever's checked okay so how do we do this well just like before we want to check if the thing is in that list of the widget state so we're going into category here we're saying list contains item and what do we want oh we got some different stuff here so remember what we're doing when we're filtering we're checking each item of the products so each product we're going through and we're checking these conditions and this item in the list here is that whole object that has a title property and price and branding category that's this whole thing but we don't want everything we're just checking for one property in the object and that is the category okay beautiful so let's confirm all that confirm and we're done with our first condition checking against this category check boxes now we just need to check for our second condition so let's just come in here and copy our variable foreign and paste it in and let's just change this over to our brand one so now we're not checking for null on the category one but for the brand and we're checking if the list contains not that list but the brand list if that contains our item and remember we're not the whole object we just want the brand beautiful confirm confirm confirm confirm confirm all right let's go test this out awesome we've got our whole list here with nothing checked let's look at just our smartphones and just Apple smartphones and when we uncheck everything we've got our whole list back so our logic is working perfectly now I know this one got kind of technical but that's the power of flutter flow is that everything is exposed to you so if you're having trouble please leave a comment below or contact our support we'd love to help and we'll see you in the next video

Channel: FlutterFlow

Views: 24,430

Keywords: how to dynamically filter api calls in flutterflow, connect api to flutter, flutter

Id: 478SCxqpakw

Length: 14min 54sec (894 seconds)

Published: Thu Jan 12 2023