hi there I'm Josh founder and CEO of flexperts um and I'm here to show you today how to make Dynamic menu or filterable category lists uh in flutter flow if you like this content please subscribe to our Channel and if you need help with your app or want to learn more about coaching sessions uh you can check us out at flexperts. I'm joined today here by my cat foodie who's apparently trying to stop making this video but we'll see how it goes um this wasn't the review I was actually originally goi
ng to make today I was going to make one about for each Loops which is gonna I'm gonna do right afterwards but I was starting to make a menu uh to be able to navigate all these different demos I'm making for the videos and I thought maybe it would be interesting to show how you can actually take one of these gorgeous looking wonderful templates uh for filterable category lists but actually to add the the logic to it to make it work the way you would expect it to work once I find my mouse under m
y cap okay so what we've got here I haven't really I stopped after I just changed a few uh colors and some of the names so this is one of the basic templates in flutterflow and this could be used for an e-commerce store or in my case I'm going to use it for a menu of demos and so let's go ahead and let's set this up with the logic that you need to actually make it work so as always we're going to round in circles and we'll start with kind of the Firebase so when you're looking at a list like thi
s what you've got is essentially a a list of something for this page generally rule of thumb it's pretty good to have a one thing per page it's a good rule of thumb one type of thing so in this case we're going to have our we're going to create a collection and I'm going to call it demos but again this could be products this could be something like that um and we're going to do that and then you could potentially also have a category like categories um I use kind of some naming formats like this
to make it a little bit more standard uh demo categories let's see uh and so this one much in the same way as groups this is actually going to be fixed information so I'm still going to start with my same same old boring three Fields just because and to be honest I I make a joke about it being not important but if you're actually in a team uh it would be potentially um useful to know who would created different categories and stuff like that in my case here I don't really use this but and so ba
sically here this is just going to be the name of the category uh actually let me create my fourth new category this one is the one that I always create which is just the document ID and so the name of the category is there that's all the one we care about and it's gonna be a string okay so now we've got our demos and I can actually be smart why don't I do that more often it's a good point there um with that this is duplicate this I call this one demos great so we're gonna delete that one becaus
e you still can't reorganize these and I'm a little bit OCD so we'll make a demo ID again this is just going to be the document ID and then we're going to have the name of the demo and based on that template we're going to need I think some let's say let's call it details it's going to be your subtitles and extra secondary text we might want to use and I think there was an image in the template that and then what we're going to do here is we're going to do category now you can either do this as
a single select in the same way we did in the other video with groups so if each demo is just going to have one category um that makes sense however if you want to be a little bit more flexible you can actually make this a list of categories even if you think right now you're only going to have one category this is kind of helpful for future proofing your app by making it an array of categories you're just giving yourself a little bit more flexibility and you're not losing anything at that point
cool so uh so if we go back here so this we're going to have be a list of demos uh do they have a list here in here so where's that uh okay so I'm gonna talk okay in that case what I'm going to do so in this case I'm actually going to do my search at the top of the page um so I would be going in here I would add a back-end query I would query my collections I'm querying demos I want to get all of my demos and I either don't want to filter them or let's say I can order them by name because it's
going to be most likely or maybe I'd want to do most created date actually this time might make more sense and I'm going to do decreasing which is the newest first time stamps count upwards a little bit counter-intuitive there so okay and I'm not applying any filters here that's because local filtering is going to be much more effective uh than Firebase filter especially for something like this where I know I'm not going to have thousands and millions of entries I don't mind pulling in all the i
nformation and so now I'm just going to move this to make this a little bit simpler because what's going to happen is that would scroll with that I've already got it up there so I don't really need it so let's go ahead and take this here can we just remove that and that way now what I can do is I can just generate on this column um just a little Point here uh for columns you don't want to use columns when you're going to have more than about 20 items in a list you would want to use a list view t
he performance of your app will really suffer otherwise so okay we're going to call this a demo item I'm actually going to add item so I'm just going to call it demo so basically I'm calling this based on what I think each one of these is it's a collection of demos each one of these is a demo and I'm going to generate this from the demos documents so this is essentially the alternative by the way generating children from variable is the alternative to grabbing it it's when you're grabbing a lot
of stuff from Firebase and then you want to kind of filter it down um and so what I'm going to do now if I were to just click confirm confirm this would generate all it's giving me a nice warning that I don't need these because it's just going to use the first one inside the column to generate that's going to be the template so here we go um maybe all of these great so now we've got this is a a demo and so now we can do the really basic hookup here uh uh so you're going to see demos documents th
at's the top of the page demo item is each demo and what we want to do here is we want to grab that oops and then I missed it my image is not an image path this is actually really interesting I I'd left it as a string an image path technically is just a string as far as Firebase is concerned flutter flow is calling it an image path in order that it can help you only put images where images should go basically uh this is a demo item now I'm going to see image path and I'm going to connect it righ
t there why did I call it can't talk and do you think at the same time it's not great for someone who's supposed to do demo videos uh image third time's return so we're going to hook this up to the image [Music] it also means unfortunately I have to create images for each other that's okay and then this we're going to create the name We've Ended up I was wrong we're we're not going to end up using these details if we ever wanted to it's there we might use it maybe on the next page to show more i
nformation about it so there we go that's the basic kind of list now we've got a tab bar here this is going to have three categories so in actuality we don't want to show all of the items in each place so let's go ahead for starters and let's copy this over here and to here and I've come up with three kind of basic categories that I want to do which is demos about you know actions and demos about layout and then demos about code I don't know if that's actually going to work out we'll see but my
structure in Firebase was flexible so that's kind of okay so what we're going to do here is we this is the column for the layout ones so what we want to do is go back to here and I'm going to call this uh demo layout so that they start to have different names for each of those three lists and since the first change I'm moving the second chain you're going to make is I've got all of my demos documents not all of them are layouts what I want to do now is filter them and I want to filter them based
by is it a layout type of demo so in our demos documents we have that categories uh we had the to go back and show we made this property called category categories I guess um which is a list of strings so now we know what our categories are if I were going to create them as items in here uh it would be one for layout will be one document for that but we're not even going to end up using that we're just going to keep it simple with string values right now so I'm going to filter this data how am
I going to do that first I'm going to filter it because remember we're starting with all the demos documents so I'm going to filter it now when you're filtering you have this thing called item and list that means item in list of what you're filtering so the original list is the demos documents you now need to go through each one and see if it's the right one in this case if it's a layout so we're going to go to item in list and we're going to grab get document properties and we're going to look
at that now remember this was not a single string this is a list of streams so we're going to look at that category and what we're going to do is does this list contain the item and in this case what we want to do is a fixed value does it contain the word layout now if you notice this is a variable that's a problem I don't have a variable for categories I don't have anything else I can link it to it's already established if I'd done my actual category of demos a demo categories I could but I jus
t want to do a simple string value how can I do this you have two options one is to use combined text if you use combined text here I can just simply write layout not combine it with anything and there you go it's now going to filter based on layout the other option when you run into this issue is to actually use code expression don't need to enter any arguments and just literally just make it type make sure you type the quotation marks and call it layout check errors they both work in certain c
ircumstances one works a little bit better than the other but that is the exact same as doing specific value so does the categories array for this particular demo contain the word string value for layout if it does this is a Boolean check this is a true false check so we're going through each of the demos documents and we're filtering them based on if each one which has a field called category if each one in that list of categories contains the item layout if it does true show it if it doesn't f
alse no further changes confirm confirm I'm not going to go ahead and just quickly copy that over to here filter paste and then obviously I'm going to go ahead and this one we want to know does this list contain in this instance we're going to do actions so does the demo document contain actions and by doing it like an array like this it means that I can give multiple categories now we're going to have um it wants me to reconnect them um and also I forgot to use your name and I might cut this pa
rt from the video because it's not that exciting um I'm going to call this demo action and we're gonna it wants me to start again maybe that's good practice fill through this remember item in list is what you're looking for not the demos documents admin list item in list get document property category which is an array so we're looking at the list contains the item and this time we'll do it with combined text just for the fun of it and that's going to be action okay confirm and you have your def
ault this is often quite good to set um just helps you avoid null errors and then finally we're going to do the same thing here this is demo code uh confirm and then all right some of these things you'll see me doing by the way are potentially not necessary like in terms of when I'm just clicking things like I did just there and it's just because maybe there used to be a bug in flutter blue that they've probably fixed by now but I'm just so used to doing it this way category this contains item a
nd we'll do it this time with code expression again there's kind of in this case no difference between the two I just want to be able to put it's the same as doing a specific value uh check errors now because I'm at 15 minutes I should probably stop but I'm going to give you one more bonus which is because there's one more feature on this page which is here search bar how does this search bar work um I'm going to pause and leave a silence here in case I want to cut this video okay so this integr
ate this in order we've got a search icon button we've got two of them which is a little bit weird I would maybe just take this one away because it's not going to do anything and what I'm going to do is I'm going to set up a live search you know a little padding just a little padding um so when someone types in here the normal user experience we would expect is that I would be seeing layout demos that matched my search as well so how can you search through a filtered list like this well the grea
t thing is we've got all of our documents up here so the easiest way to do this is to go in here into your actions and to set an on change that means it's going to be change it's going to be running this action every time the the text field changes value so every time the user enters another letter and you can configure the delay depending on your use case a little bit so what we want to run here we want definition what is it well that's a bug interesting if it doesn't work I give up I've now go
t three on change actions okay what we're going to do is we're gonna see if we can fix it like that all I've done is cut and then trying to reset the widget basically okay I think it's working now so simple search is what I want to do this is a search not via Firebase but on the device and what I'm going to be searching here is documents so I'm actually going to be searching the documents that I've already queried so I'm doing a local search so I'm going to select all the demo documents here oka
y confirm and then I want to search them just based on the name let's see and the search term is going to be coming from the widget which is the search bar great and Max results it's a good practice let's say 25 I'm not gonna have 25 tennis but okay so that's simple that simple search is now set if we open this it should now not have a gray screen right it's all set up here so every time the user types in something and again you can configure the exact properties of how that works um here where
you have this on change you have this update DeLay So if you set this to zero in the way that it tells you not to um this will be after every keystroke you can also do it to be 1 000 this is milliseconds so 1000 would be it will run the action the search action one second after the person stops typing so I'm just going to do this a zero for now because I want to be this really nice performance great so we've got our search here now that's going to give us a whole bunch of things called Simple se
arch results it's going to give us demos documents that will return from the search which is from all of them however we need to fill here we're producing demos documents filtered by our category but we're not taking into account the search how can we combine these two we can combine these two in a few different ways the easiest way is to do this as a conditional value so what we're going to do is we're going to copy it and then I'm going to remove it and call it the same thing again demo layout
so what do I want to do here so um let's do it this way so the first method you can use is to do conditional value so you can set up a condition here and say that single condition widget state search bar if the text in the search bar is set and not empty then generate my list from the simple search results right so if the is set if the user is typing something in I want you to show me here simple search results otherwise I want you to show me the thing that we created before which is the actual
ly let's just step back I just want you to show me let's say the demos documents yeah all right let me copy this so let's remove this filter here so at this point where we're at is if the users type something in it's going to show the search results otherwise it's going to show me all of the demos again without a filter at this point now we're back here I would have to connect these up again blah blah blah which I'll do in a second so but we now want our filter for our category well great we can
add that now here so make sure you set the return type the return type we know in both cases is going to be a document and it's going to be a demos document whether it's the simple search results or the demos documents all of them but now and it's a list but what we want to do is we want to filter the list items so we want to filter them based on again let's refresh our memories so each item in whatever list this came back with either or and we want to filter it by the category and we want to u
h the list contains the item and then again we've got to use that combine text or code expression to get a fixed specific value which here is layout so I'm going to recap that and then you can set a default value which is I'm going to do false here because just because um so let's recap that one more time because I think we're going to look fast so we've got a search text here it's running a search action on change if there's nothing entered in it obviously no search action no simple search resu
lts and here we've got generating from the top of the page a list of the all demos documents what we're doing for each tab is we're now filtering this first of all we're filtering it based on am I showing the search results or am I showing all of the demos documents that's the first thing and we're doing that based on a very simple condition of has the person typed in anything in the search bar if they have show me the simple search results if not show me the demos documents and then for that wh
atever one of those lists comes back we've set that it's going to be a list of demos documents we know that and now we're going to filter it for if that if each item we're going to go through each one of those either each of the simple search results or each of all the demo documents and we're going to filter it out to see does the category array field contain the word layout if it does show it if it doesn't false and there we go we could now copy this across I guess probably will cut this one u
m cut this across so again previously we weren't taking into account the simple search results now we're going to be doing that and this part you'll notice is going to stay the same each time because our filter is down here and that's why I did it this way to make it a little bit more efficient all I now need to change to reset this up is just change this one word but everything else on that is going to be exactly the same and then make sure you hit confirm which I often don't and then here fina
lly on this column we're going to do the same thing we're going to replace it with the one that takes into account simple search results this contains item text combination and then code for this one and what that's going to mean is that when the user searches they're only going to see uh code if they've searched for something and they're on the code tab they're only going to see the code results from those simple search the simple search is searching everything but they're only going to see the
ones that are also in the category code because we're filtering it somehow this has linked itself up this one did it's all fun so there you go and that's how you make this page this beautiful flutterflow template page workable hope that was helpful again if you enjoyed Please Subscribe like the video comment tell me what content you want to see next and if you ever need help with your floodflow app I need an expert you can check us out at flexperts.gov see you next time
Comments