Adding a search filter to a listview in FlutterFlow

I couldn't find a clean and easy tutorial to add a quick search filter to a listview in flutterflow, so created this video on how I did it.
It uses a custom function and some conditional visibility to hide and show items in a list view.

[@mariomini]

Really good tutorial, very clear. I'll just add that in newer versions of FF you will get an error if you make any of the arguments nullable so it's worth getting rid of that straight away. I'll also say if you want to search across multiple fields, use the Combine Text action to pass them all across to textSearchIn in one go

[@markh-thai]

this one comment saved me…. and the ‘combine text’ MAGIC 🎉

[@chisomomutale5736]

So this Man came, upload one very useful tutorial and disappeared

[@heyimrith]

Yea

[@mariomini]

There must be a meme for that ;)

[@ronilsonduarte6451]

Congratulations on the content, it helped me on the other side of the world. I live in Manaus, capital of Amazonas in Brazil.

[@jaimegomez5314]

Excellent Video respected gentleman, I've been searching for this thing for a lot of time, but you gave me the answer. Thanks a lot and congratulations!!!

[@IspyrGameDev]

Elegant and simple solution, even beats the built in Simple Search! Thx very much! The only issue I'm having is that when using GridView it doesn't adjust the contents properly.

[@ahmedyehia4846]

yes same as me

[@IspyrGameDev]

@@ahmedyehia4846 I ended up having to use a "wrap" widget

[@ahmedyehia4846]

@@IspyrGameDev yes , but it's look not good

[@stefanhillbrand4438]

Thank you. What a simple and elegant solution.

[@playground8015]

Thanks a lot. The video is perfectly made and very clear. A question for a beginner: what's different beetwin this method filter and using ALGOIA search services? THANKS FOR THIS VIDEO

[@edgard6801]

Algolia is very expensive.

[@jean-francoisriera8723]

A very pleasant and efficace solution ! Bravo !! Do you how we could count the visible elements ? Thanks !

[@xyzpqr181]

Very well explained Jay ! 👏 thanks 🙌

[@pathtogreatness12]

Thank you! that's exactly what I was looking for, you were so helpful 👍

[@mario7572]

Great job sir. Thank you for the help.

[@shaemalcolm6349]

OMG this is exactly what I was looking for! I checked out your website and couldn't find any contact info for you, but do you do consultations? Is there any way to book a few hours with you to review my app in FlutterFlow?

[@AldrichCarrasco]

Excellent. I've implemented without problem but I've like to search by 2 fields, like name and lastname, how can I achieve this?

[@tf4714]

Thanks for sharing this! Is there a way to use a filter on a list thats not using Firebase? (My App must work offline, thats why..) Like apply the "textSearchIn" to the widget Name or a local state variable? Thank you.

[@ermanozkaya]

Thank you so much for this tutorial.

[@FlutterFlow-y4u]

Dude, you are the best.

[@occisoundead4775]

Straight to the point, thank you good sir.

[@joaovitorcordeiro7757]

This is really good and very helpful! Your video is based on Document data, we need this same functionality when we use API, somehow that VIEW FROM SOURCE doesn't show up when working with API data, which is crucial. Is that on the way or any specific way to achieve this with API data, please guide or share a tutorial around that.

[@damo56]

Thanks bro🤩🤩🤩Working 100%💯💯💯

[@MarmEatzADM]

Thank you, Jay!

[@javiersempere9802]

great explain, please upload more flutterflow videos. Thanks You!

[@MarmEatzADM]

Thank you Jay!

[@j.slowly8010]

Amazing, so easy actually, thanks!

[@ReidBrown23]

Hi. How might you do this with an external api?

[@adivyarani3204]

Thanks for this wonder video. I have a doubt though, am i gonna get result if search numbers as well instead of text??

[@simon-maddox]

Just to say that this custom function code fails as of v4 (on 19th Nov 23). The AI helped correct it though to include the required null checking:
// search for a string in another string
if (textSearchFor == null || textSearchIn == null) {
return false;
}
return textSearchIn.toLowerCase().contains(textSearchFor.toLowerCase());

[@JoshComninellis]

Thank you so much! I had this problem and had no idea how to fix it!

[@mardoniorodrigues11]

Thanks

[@JoshComninellis]

I'm really surprised that this is not natively available in the app. I came from Bubble and it had this feature.

[@russellmolimock]

This only works for me if I tap inside the ListView before searching, and also hit enter after typing in the search text. Update on text change is definitely on though. It should be passive but it's not. Any ideas what I might be doing wrong? It's as if flutterflow doesn't bother with the visibility conditional until you click into the widget doing the query.

[@russellmolimock]

I at least got around the fact that it would only update the query after clicking into the listView. I also toggled on the textField attribute 'update page on focus change' and turned off autofocus. This means users have to click on the textfield in order to type in the first place, and that triggers the update on focus change. Basically update on text change doesn't work. I added a 'send' iconButton next to the textField that does nothing, but if users don't realize they have to hit enter they can hit that and since it changes the focus of the field it also updates the page. If anyone else has a better work around please let me know!

[@PrestaVideo]

Thank you very much for your video; How to have a search field that filters results based on two separate fields ?

[@antonypbsilva]

Did you could use the function textSearchIn?

[@eynsoft5819]

Great video. Thanks.

[@ajjayaroraa]

lovely.. worked like a charm.

[@shanfts]

Just saved my life. Thanks😇🥰

[@ahmedyehia4846]

amazing one

[@amineredone1304]

I was looking for this, thank you, I have a question is there away to make a Range Slider in flutterFlow and show the results base on that, thanks.

[@JayMcCormack]

Hi @amine - it's possible.
You can do it using conditional visibility on the list item as long as you've got a numeric value to compare to the slider. Otherwise you'd need to create a function (like in this example) where you're comparing the value of the list slider to a value in your list view item.

[@dementovoid2255]

Hello, I have been trying to follow this tutorial, but the search filter only seems to update once I move to another screen and come back to the main screen (doesn't update in real time, only after switching screens). What should I try to fix this?

[@dementovoid2255]

Sorry, I got it now, I forgot to add the wait delay

[@AMAL-mr7ko]

Really helpful....really appriciate it

[@selfmasterytv]

when I search for something, it keeps it showing but the the other list items are emptied but they are still there, why is it happening?

[@efranlacerda]

Excelente vídeo, qual api foi usada?

[@rabeezley]

Thank you for a great video. How could you search across multiple fields?

[@johnkrueger2604]

I know this is response comes late, but what I did is for the textSearchIn use the combine text feature and just added the different fields I am looking to search

[@bigdata9605]

@@johnkrueger2604 will you be able to post the snippet or share the code somewhere? ie codebin

[@elmehdibelyasmine942]

@@johnkrueger2604 Can you be able to share what you did ? Thank you very much

[@johnkrueger2604]

@@elmehdibelyasmine942 Just follow the guide in the video and use the native combine text feature within FF to add all the fields you'd like to search to the textSearchIn input.

[@johnkrueger2604]

@@bigdata9605 No code snippet required. Just use the native combine text feature within FF to add all the fields you'd like to search.

[@garrylowther]

Can you do the same video but connecting to an API?

[@TheGrozzoXD]

thank you bro, excelent

[@yuvzohar]

great tutorial. thanks

[@drearystate]

How would you use this filter with flippable cards?

[@elmehdibelyasmine942]

Thank you for your tutorial. Awsesome.
However I have a question concerning adding a second argument like textSearchIn2 because I have two fields to search in : title and subtitle because they are separated collections but in same container.
I put another line before the return boolean function and that take in account one argument but not both. How can I fix that ? thank you

[@juliannick981]

Hi buddy, did you solve two fields search ?

[@elmehdibelyasmine942]

@@juliannick981 unfortunately no ! And you ?

[@laurentfourcade375]

@@juliannick981 easy. Just add more conditions in the visibility logic.

[@DiegoSerranoBst]

super! You saved me some time to think :)

[@allanrouse8782]

Perfect! thanks!

[@bobsteele6563]

Thanks, worked great

[@arfsystems]

Thank you!

[@matewz]

Sir. THANK YOU!!

[@jaguarconsultoriadigital8147]

Very good.

[@bedoyb]

THIS VIDEO IS AMAZING YOUR MY FATHER

[@legotron369]

thank you so much! what a giga chad.

[@謝沛倪-f1m]

so helpful💖

[@ilpiaceripizzagrill2083]

Excelente vídeo, justo lo que necesitaba , gracias !!

[@KhoaNguyen-ux5lp]

Thank you for sharing

[@tiberiozz5693]

thank you !!

[@yevheniidubinin8362]

good idea

[@AsAs-ly6fz]

Hello, thank you for this video and your sharing! do you know how to ignore accents? (éèôùëêà) thank you in advance!

[@LawrenceAfable-y2g]

It works to me, thankss

[@salahmohamed5678]

Thanks 😍

[@dhananjayakumarpadmanaban8951]

Thanks alot

[@aaronshailrepair2820]

It says my code has errors even though I copied it exactly

[@FMotivated]

uncheck all the nullable values in function and arguments too.

[@flutterflownapratica8499]

muito bom, melhora muito a busca. Parabens

[@GaborSzabo-g1y]

thanks

[@paulocymbaum1566]

Why are you whispering mate?