Adding a search filter to a listview in FlutterFlow

in this video i'm going to show you how to take a list view like you've got here and add a search and filter box to the top of it that operates in real time i've got my app running here in test mode so i'm going to be switching back and forth between the design and test and we're going to be starting with this page here this has got a pretty standard list view on it it's connecting to firestore to be able to get some data it's just a list of documents i've got a filter on here that's filtering by the logged in user otherwise there's nothing really that special about the list view the process of adding the search box is pretty straightforward so let's get that underway i've got a column inside a container my list view is in that column so i'm just going to add a text field into the same column and move it to the top i'm really not going to spend much time worrying about how it's formatted let's just give this a name so it's a little clearer to find later when we add the the text field one of the things we want to do is we want to uh we'll set some hint to text but we also want to update this page on change basically what that does is it triggers the page redraw and update state based on the content of the search box we also have the ability to specify how many milliseconds we want to wait after finishing search or after finishing typing until the screen is redrawn so i'm just going to put 500 milliseconds in half a half a second the way that we're actually going to make this search work is we're going to control the visibility of the items in the list based on them matching the content of the search so the way that we do this is we control the visibility not of the entire list but of the child item under the list view so we've got our list view here this is our list tile so this is the item that we want to control visibility on now it's pretty straightforward what we want to do here we just basically want to show or hide the item in the list based on whether it matches the content of the search however we want the search to be relatively broad so rather than the search being an exact match we want to be able to search on what i would call a contains type search so if i go back to my example you can see here that if i put in the word the letters pla it's matching this based on the pla here in the word place so we want it to be able to search in the string anywhere rather than just the beginning of the string or doing an entire string match the way that we're going to control the visibility is by using a custom function i've already written the custom function once so i'm going to write it again from scratch and importantly we're going to sort of build it progressively so i'm going to do something wrong to start with and then we'll fix it as we go so we're going to control the visibility of the list tile so we'll flip this switch here to control the visibility and we're going to manage the visibility based on a custom function you can see i've got a function here called show search result we're going to leave that because that's the one that's working on the page that i've got as an example i'm going to create a new function and i'm going to call it show search result 2 for the sake of actually getting this to work now we want to be able to use this function in places other than this list so if we've got a list type control on six different pages on our app then we want to be able to use that function in all of those places the way visibility works is that it needs to know quite simply show this or don't show this it's a yes or no that is it's a true or false type of result so the return type that we want to be able to use here is a boolean value that is a true or false there's only two parameters that we want to pass in so the first thing that we want to pass in is the piece of text that we're searching for so i'm going to say something like text search for that's going to be a string and the second parameter is the text we are searching so effectively what we're doing here is we're going to search through this parameter for the existence of the data returned here so back to my example for a moment we've got pla and we found another other place so pla would be this value and the value of the actual item would be this year all right we're going to return a boolean value we've got our two parameters set up let's have a look at putting our code together we will start here so we're going to basically do a really simple string comparison so because we're writing in dart that has some string manipulation tools and functions that we can use so what we're going to do is we're going to say we want to find a piece of text inside another so we'll say text search in and we're going to use the contains function and we're looking for text search for now the contains returns a boolean a yes no so all we're going to do here is we're going to actually return the result of that function so what we're doing here is we're using text search in that is the text that contains the full full string and we're going to return true or false if this string exists inside this string pretty straightforward and like i said it's intentionally wrong to get started we'll do our quick check great save that and now what we want to do is we want to apply this function that we've just created to the visibility of this list here so we're going to we've seen the two parameters that we've just created text search for and text search in so the text searched for is from a variable and we're going to get it from the field search that we created before and the text search in again is from a variable but it's going to be from the record from firebase and it has the field name trip underscore name great so there shouldn't be much more we need to do here to be able to test this out my session has expired okay we've got a new test session let's test out our search so let's say we're looking for um well let's do the search for other place we'll use that as our starting starting point so we'll put in pla great we get another other place as our search result that's all good however we do have a problem notice that we've got a couple of items here there's one that's yata two and we've got another one here yada as well if i do a search for the letter y you notice that i'm only getting one of the two search results and that's because we haven't really accommodated the fact that we might need to search for an uppercase or lowercase letter and in this case if i search for an uppercase y i get one result and a lowercase y i get a different result similarly if i'm trying to find beach and just search for the word beach i don't get any results however if i put in a capital d then i get my results so we need to fix this let's go back to our custom function and have a look at how we might make this work the easiest way to actually make this work is to modify our function to accommodate the fact that the text that we're searching for and the text we're searching in might be in uppercase or lowercase and we can do that by forcing everything into all uppercase or all lowercase so the text that we're searching in we're going to convert that just waiting for the there it is to lower case so we'll put that function there and the text that we're searching for we're going to convert to lowercase also so what this means is that irrespective of whether the text that we're searching for or the text we're searching in is uppercase or lowercase it's going to assume everything is in lowercase so let's check that again save that let's do a reload on our test application okay let's do our search again for beach you can see now we get pilchard beach let's do our search just using the letter y you can see now we get both results one showing up the case one showing lowercase

Channel: Jay McCormack

Views: 19,573

Keywords: Video, flutterflow

Id: jF8tbRgVaQk

Length: 10min 44sec (644 seconds)

Published: Wed Jul 13 2022