(Ep 54) Search List View With Flutter & Firestore

[@ithelp5893]

Wow man, you are the best. I really like the way you explain things. I have learned sooooooo many things from you.

[@lynnyserbyt3607]

Great tutorial!!! I finally got a working search bar! Thanks! Now... on to the next hurdle...

[@igortrapp30]

This is exactly what I was looking for, excellent explanation, very clear.

[@77558]

This is ok for small databases. But imagine You want to search a user database with millions of entries. You first have to download all of them and then filter out those that matches Your search criteria. Way too much traffic! But there is no solution - as I belive - because firebase has no direct WHERE text %LIKE% or contains functionality like any SQL db since decatdes. Also startsWith() and endsWith() is too slow. And this is unfortunatley a dealbreaker ofr using firebasew for me. :(

[@hussnainmehdi3629]

Thank you so much for such very helpful video and content.

[@breadman7733]

The video i've been waiting for, awesome stuff!

[@1ManStartup]

Glad to hear that!

[@fatemakhalfan6980]

This made my life easier, thanks a lot

[@1ManStartup]

Glad to hear that!

[@ravindrametri1681]

how to add on tap on list to move to update screen , how to get document id

[@sageat1242]

hey, how can we perform the same operation for realtime database?

[@anuragthakur3813]

Thank you very much man You saved me

[@1ManStartup]

Glad to help!

[@prolegend26539]

Thank you for this tutorial! What if you would like to have access to the data (that you fetch from firestore) in a different tab? I am trying to use the Provider package to solve this (by moving the functionality of fetching data from firestore to a separate class). In your example, you set the firestore data to a List. On the other hand, I am not able to use the Consumer widget from Provider because it requires to return a widget; I guess the assumption is that you are supposed to use it when building your UI in the build function. But we have our data in a list, which is not a widget. I am totally lost. Would you have any tips on how to come around this problem?

[@1ManStartup]

There are a few ways you can do this and I'm not sure which is best, especially because different app types could benefit from different ways. My initial thought is to load that data wherever you are setting up the tab bar. this is where I am github.com/davefaliskie/travel_budget/blob/master/lib/views/navigation_view.dart so for example you could probably load that data here then pass it to each of the views (lines 18-20) I do think storing in the provider would be best. In my app I don't use the provider package but rather a InheritedWidget called Provider (I know confusing, I shouldn't have done that) github.com/davefaliskie/travel_budget/blob/master/lib/widgets/provider_widget.dart but look into InheritedWidget as well that could solve your problem. also just loading it on the first page and passing the data between views is an option, although that could get messy depending on how big your app is. that concept is kind of shown here kzbin.info/www/bejne/f6mmln2Jbt50btk (but for a different context, and not really what you want) and now that I think of it wouldn't really work with tabs. good luck!

[@Himricks]

What should I write inside the getusersnapshots function if I don't have firestore connectivity, and what should I write inside setstate() . Actually I followed your videos of creating list view of the trip,now I want to implement the search inside that. Should I write setstate() { _allresults = trip.title } If I want to search list by title. Is it right way? Plz help me!!

[@1ManStartup]

_allresults is simply an array of Trips. In the example I'm getting those trips from firestore. You don't need to use firestore, you could hard code trips into an array (that doesn't seem to useful tho), `setstate() { _allresults = trip.title }` doesn't make sense because then _allresults would be a single trips title.

[@tammodirksen1408]

Great video, but does this allow changes in realtime? The benefit of stream builders are that they react to changes without manually refreshing. I need these real time changes.

[@1ManStartup]

No this won't refresh the data in real time. This concept pulls data initially and then filters it locally.

[@tammodirksen1408]

@@1ManStartup Thanks for your response! So you would need to implement some kind of „Pull to refresh“ to update your content? Thank you anyway!

[@1ManStartup]

@@tammodirksen1408 it depends, if your most concerned about the search results being real time then you could query the database on each search. If you want the list view to have new data pushed to it in real time a stream builder would be best. The stream builder setup can be found here kzbin.info/www/bejne/eKGniKKVm72Eiqs I view these as two separate problems, and maybe you need both solutions

[@tammodirksen1408]

@@1ManStartup I am using StreamBuilder right now (just like you did) and I pretty much want to filter the already loaded Listview when typing something in there. But I see: The options are pretty much: - SearchBar + StreamBuilder = Real Time Data but a ton of calls to Firestore or - SearchBar + the option in your video = No unnecessary calls to Firestore but also no real time data. I guess you can’t have real-time data and a search on already loaded data without making a lot of calls to Firebase. Thank you anyway! I guess I will have to make some sacrifices inside my app :)

[@1ManStartup]

@@tammodirksen1408 If you have the stream builder setup to keep some list updated on changes, then perform the search on that list it might work without any extra calls.

[@Oalone]

Thankyou you helped me a lot

[@1ManStartup]

Glad to hear that!

[@jbm1444]

Thank you so much for these videos. I have learned so much and they helped me a lot. Could you give me some general guidance on how to integrate your logic in this video with a filter that works with a DropDownMenu?

[@1ManStartup]

Probably I would start by getting the value of the dropdown and passing that into the search/filter function likely as another .where statement

[@jbm1444]

@@1ManStartup Thank you very much!

[@Himricks]

Hi dave ! Can you make video on searching with aws amplify as a backend plz i don't find much sources on youtube, you are the only guy who can help me with these i guess, plz make one video on it.

[@1ManStartup]

Not a bad idea, I know little about Amplify I'll check it out and try to make a stand alone video/ introduction

[@webertherik9865]

Thanks bro!!😎

[@NoOne-vz2pb]

One thing i don't get is when you change the search text field, you are adding to showResults, but the listviewbuilder uses _allResults.So how is updating showResults updating _allResults and thus making your search result work?

[@1ManStartup]

The list view builder should be using the _resultsList which is a list containing only the matching results form the larger _allResults list.

[@Theshamsham00]

This guy is amazing !

[@1ManStartup]

appreciate it!

[@DemsDema]

Great work done here. Is there a way to add more search keys?

[@1ManStartup]

yes building off this you could search by 2 different params & then join the results & de duplicate. depending on the number of parms and amount of data there are likely better ways to achieve this

[@MagicClayRock]

Helped me a lot, thank you :)

[@1ManStartup]

You're welcome!

[@wynsalvez5694]

Thank you, this helped me lot, but i suggest to create a filter menu tutorial, it will be wonderful to do that

[@1ManStartup]

thanks for the suggestion, I'll add it to the list

[@josuedeshagette1247]

HI Does it work with FLUTTER 2?

[@NaifChannels]

Thank you! This helped me a lot

[@1ManStartup]

I'm so glad!

[@Himricks]

Instead of writing var title = Trip.fromSnapshot(tripsnapshot).title.toLowerCase(); what should i write if I want to search by list but i don't want to use fromsnapshot plz tell me I tried Using var title = Trip.title.toLowercase(); but it gives error plz help me !!!!!!!!!!!!!!!!!

[@1ManStartup]

Similar to my last comment, depending on what you have in your _allResults array it will determine how you search. for example if _allResults = ["one", "two", "three"] then title would just be equal to tripSnapshot (you should rename the variable if that's the case, this assumes you modifying this line) github.com/davefaliskie/travel_budget/blob/da33e8d7477598bf8407a0ec356e45ce897be786/lib/views/past_trips_view.dart#L49

[@vidyasystems7768]

Thanks a Lot Dear..............

[@섀플리]

Hi, I have lists I typed in, like (listA = ['a', 'b', ...] ) instead of firestore data. What should be changed in code then?

[@1ManStartup]

go read my response to Himricks comments from earlier today, it's basically answered there

[@parthdesai84]

Hey! Can we use the same method for GridView?

[@1ManStartup]

yes it should work the same, if you haven't already tried

[@TheBoredandCool]

it really helped me, Thanks a bunch

[@1ManStartup]

Glad to hear that!

[@aljoharaha6116]

I have faced some errors, and I can’t solve it plz help me:(, when i used textField it said “textField widgets require a Material widget ancestor ... etc”

[@1ManStartup]

the error is telling you what you need... A material app

[@denigunawan9936]

Good thanks , you save my time thanks alot

[@1ManStartup]

Glad to hear that

[@zippkush9887]

Great video Dave, I have a question, where did the data.documents came from? Does it have to do something with document(uid)? As i get error there: The getter 'documents' isn't defined for the type 'Future'.

[@1ManStartup]

some syntax has changed w/ new versions of firebase packages I think it's data.docs now but this video covers it kzbin.info/www/bejne/qJ6up4Fniqh7b8U

[@LLalex]

Thanks!

[@kkriit]

6:33 Firestore and getDocuments are deprecated !!!

[@1ManStartup]

yes, updates are shown in this video kzbin.info/www/bejne/qJ6up4Fniqh7b8U

[@mehmetedex]

searching the local data is easy now do it for the serverside :)

[@1ManStartup]

🕵️‍♂️

[@subconex]

well done, thanks!

[@1ManStartup]

😎

[@samarioantonio]

I think your backend is eventually going to get too large..and the process you're implementing now won't scale..im facing this problem now with my app...I've decided to integrate algolia search...but the other will be helpful for sure i.e, not searching when the amount of letter is 0 or 1, etc

[@1ManStartup]

Depending on your app, yes this way of searching will not scale. This video specifically is only going to search Trips that belong to you, which I would never expect to get over a relatively low amount 50 would be A LOT for example. If you want throttling in your search I do show how that can be done in this video, maybe would be useful. kzbin.info/www/bejne/qHuynKJ3oqhofbs

[@jcswentr9059]

@@1ManStartup What would you say is the limit with this logic then? For example, would doing search this way scale well for 200 Trips?

[@1ManStartup]

@@jcswentr9059 hm hard to say for sure, I think 200 would probably still be okay. But I wouldn't build a search like this if I anticipated more than 50 documents. So for me 50 would be the max for this setup.

[@jcswentr9059]

@@1ManStartup Okay thank you. If you were to build with circa 200 trips being common for users, would you use a StreamBuilder like before?

[@rasodemekontha8204]

Hello Sir, actually, I'm not getting the data from firebase. Here is what I have done here. var tutorialData = await FirebaseFirestore.instance.collection("tutorials").get(); setState(() { _allResult = tutorialData.docs; });

[@NIKHIL27B]

Nice

[@1ManStartup]

Thanks

[@khawajakhalil6168]

Murshiddd!! 🙏🏻🙏🏻

[@1ManStartup]

😎

[@AbhideepChakravarty]

Do a flutter build web. Then deploy the app somewhere. Then open the app in Android, on any browser. Try to do your search 3-4 times. Boom, it does not work.

[@1ManStartup]

This hasn't been tested for flutter web. I still don't think flutter web is ready for production.

[@AbhideepChakravarty]

@@1ManStartup It's in beta but text field getting weird is too much bad.