How to Filter Data in FlutterFlow - Part 2

this is our second video on how to filter data in flutter flow in our first video we looked at how to filter data on a back-end query so that's if you go into here and you come down and click this filter button and how that stuff works in this video we're going to look at how to filter data with like buttons and we've all had this experience with apps before you go into Airbnb and it first shows you like all the data well of course it doesn't show you all the data but it shows you just sort of like default data and then you say oh I want a certain location so you use a button or an input and you put it in there and it'll show you just those properties from the location or you'll push a button that says I want it to have a pool and you'll click that button and then it'll filter the data it's displaying according to only ones that have pools and we're going to show you how to do that in flutter flow and specifically I want to show you how to filter with these things these form elements down here drop down check box group chips and rating bar and I'm also going to show you a really easy trick to reset your filters so you don't have to like undo everything manually if you want to start over with a new set of filters okay so let's look at how our data is set up and then do some filtering so in our database here let's go over and here's our collection it's just a collection of fruits we've got a name we've got a color attached to it we've got price and an image okay great so let's first start out with a check box group okay so I'm going to come into my column here and I'm just going to add I'm going to search for a check box group right there add that in and let's just drag it on top okay great then you can Define your options down here and maybe we want to filter by the color of our fruit so let's just do a red and a green and that should be fine Okay so we've got the options that we want to filter by well then we need to add in a logic to actually do the filtering so we come on to wherever we have bound our collection to so here it's on our wrap but for you it could be on whatever you have and we're gonna go to our filter here we're going to filter by our name right because these are all the fields let's look back here real quick so these are showing up all of these right here all these fields that we have attached to our data and we want the color and what relation do we want okay so what this means is you can see this all here like equal to not equal to right blah blah blah well how do you know which it is well if the widget that we're using to filter here these checkbox groups if it's outputting a list or an array that is a collection of values then you're going to want to do in or not in depending what you're going to do that would be for us to be in if it's outputting one value like radio buttons where you can only click one at a time or maybe we have got an input where the input is only giving us a string then you're going to want to use equal to or not equal to greater than unless or one of these twos and you could kind of like reason your way through it if you don't want to do it that way there's another way to figure out what kind of value you're getting out of a widget and I'll show you so I know it's going to be in but you could just press anything right here and actually you know let's do a a wrong one to see what it just looks like and the value Source right here is not going to be a specific value because that would be like if we wrote something in right here if like if we wrote red and no but we want this Dynamic we want it so when the user clicks on it that's when it filters so we don't want a specific value we want a value from a variable and what do we want we have unset and what do we want well let's click in here we've got so many options but what do we want we want it from a widget state right because here's our widget our checkbox group and we want this to be filtered based on the state of the widget what the heck does that mean but when something is clicked or unclicked collected or unselected that's the state of that widget and whatever state that is we want to filter by that so we want a widget State and we click in here it's going to show us the available options because we've got other widgets on this page like this title and our app bar right remember in flutter everything is a widget but flutter filler does this nice thing where it's going to recognize only those things that are available Okay cool so now we see here we can see what kind of value it's going to return for us so we see our checkbox group this is right here and it's going to say oh what we get out of here what is returned is a list of strings so that tells us right there oh it's to list right well we can have a list with greater than here so we can just click in right here we can confirm it but of course this is not going to work so if we could confirm current variable is not valid because we're trying to say hey it's greater than this well greater than a list of values a collection of strings a collection of words because what's going to come out of here is divide both of these click for instance it's just going to say red and green that doesn't make any sense right so let's cancel out of here let's change it to in because we want to say when it's in the list from a variable just like before we grab our widget State awesome boom and now we can confirm Okay cool so let's go test our app right here let's reload it awesome and so now if we click on red it's not working oh yeah because if you got to come in here and you always got to confirm it it wasn't scrolled down so sometimes I forget about that great so let's go back and instantly reload awesome and if I just want to see only my red fruits there we go my red and green beautiful look at that display and I can just unclick them all if I want to start over but of course that's kind of annoying right I wish there were a way we could just press a button and it resets and indeed there is let me show you so let's go back to our app right here and currently this is something that's on the roadmap that's coming but currently we don't have anything that you can reset it but we kind of do and it's kind of fun hacked so let's come into here and let's just grab a button button and let's drag that in right under our checkbox group and we're not going to make it pretty because this filtering stuff here so we're going to call this reset and then we're going to come into our actions we're going to click on Tab of course what we're going to want to do here is we're going to want to navigate to and we're going to navigate to our current page so our current page is filters and we are going to navigate to our current page okay and then let's just change the transition type to you could do instant but I found if I say fade and just give it a few milliseconds I get the sort of cleanest reset okay awesome so now let's go back to our app great let's just grab a red and our green fruit and now we want to reset we want to start over and you can imagine we had a bunch more here and I can just say reset and everything resets we clear this so the UI is re-rendering to its initial State that's an easy way to do a reset button okay awesome so let's get out of here and let's filter let's get rid of our button right here we don't really need that let's get rid of our checkbox group and let's try filtering according to a drop down okay let's come in here and add to our column let's say drop down boom up there let's define some options this time let's just do apple and cherry all right so we've got those once again we need to set up our filtering and we're getting an error here of course because this filter doesn't make sense anymore so once again let's think about this so we are going to filter on color not color this time we're going to do name and what's our relation this time well of course we're just selecting one so we're going to want this to be equal to and dynamic variable we're going to set that widget stay and we see our drop down beautiful and confirm and let's run our app and let's grab our apples we got two of them beautiful okay next widget let's do some chips those are fun delete our drop down let's add in some chips these are cool drag goes up oh not in there no I don't want to do that I'm going around inside our inside our column beautiful let's define some options let's do apple and I don't want to train because that doesn't make any sense and let's do cherry again that's great we can allow multiple select here and so if we have multiple then of course we're going to want a relation of n right here because we're going to get a list of stuff back so we're going to say n and blah blah blah you all know this by now and we can see up yep we're going to get a list now here's here's the thing you might say oh if I didn't allow multi-select what's going to happen well let's check it out if we go over here and we say to our choice trips and we unselect allow multi-select what's it going to be then we're going to get back a string so it's different if you allow multi-select then it's going to return a list but if you don't do it then you're just going to get a string so you're going to want it to do one of those singular value relations like equal to okay let's change about to multi-select allow multi-select filter in widget State list beautiful confirm scroll confirm and let's see our beautiful chips let's grab our apples and our cherries and look at that wonderful okay now the last thing let's filter according to our rate rating bar let's dump that in drag it up top here that's nice now we don't really have any stars like if you're rating something but we do have the cost of each of these things so the way this widget works is that each of these are one value like one two three so this would be three right so we can come down here and we can change the icon you have this in some apps like Yelp where it'll say you know one dollar icon if it's like the cheapest up to five is the most expensive so let's look for a dollar oh maybe a bunny there we go let's grab that so now that kind of makes more sense and of course you could add labels and stuff on here okay great and then let's come up here now we need to get rid of this filter we're going to add one in we're going to filter this time according to price and what are we going to say well we're gonna say less than or equal to so we've got a really primitive example here if it's three dollars so if there's three of these checks that's three dollars so we on anything that's three dollars and Below to be showing so we got a filter according to or show according to anything that's less than three or equal to and we want it equal to R ating bar beautiful and confirm once again and back to our test reload and notice the default was set on three so we're actually already filtering it because if we go up to 4 we get our Peach added in let's zoom out a little bit here let's go down to one and beautiful so that is filtering with buttons in flutter flow let us know if you have any questions and comments Below in our next video we're going to be doing Simple search filtering like we got an input bar and you type stuff in and then it filters the list according to that and we'll see you then

Channel: FlutterFlow

Views: 19,613

Keywords:

Id: Xw_Axw-GIkE

Length: 13min 3sec (783 seconds)

Published: Fri Sep 30 2022