Search Bar in Flutter - Logic & Material UI

📗 Learn from the written tutorial 👇👇
resocoder.com/...
📧 Get Flutter news 📰 and resources:
👉 flutter.education
👨‍💻 Do you write good code? Find out now!
resocoder.com/...
Searching through all kinds of various content in your Flutter app is something you'll likely have to implement one day. A successful search implementation needs basically two things - a usable search history and also the search bar widget. Now, we're going to take a look at the most extensible and good-looking way to do this.
We're going to build a simple project that will contain all of the basic building blocks of a good search implementation. The package that we're going to use for the UI part is called material_floating_search_bar. There are many other packages and even the built-in showSearch function, but the package we're using is one of the best ones out there in terms of customizability and it also looks really good out of the box.
When it comes to the search history part, we're going to keep it simple. We could introduce all kinds of third-party dependencies like different state management packages and all kinds of persistent databases. However, we're going to implement the history only inside a StatefulWidget and as an in-memory List. Yet, as you'll see in a little while, the code will be easily applicable to any state management and database solution you like.
Go to my website for more information, code examples, and articles:
● resocoder.com
Follow me on social media:
● / resocoder
● / resocoder
● / resocoder

[@mattfrowe7697]

Fantastic tutorial, thanks for demonstrating this. Now to figure out how to transpose this to using bloc :)

[@saratm9973]

Thank you brother. Really useful.

[@rammehar5531]

I always happy when I see your new video. you do great work always

[@tintin537]

Missed your tutorials

[@ResoCoder]

Me too! 😅

[@er.rameshvlogs6953]

Really useful video it is unique video on KZbin to better way understanding thank you Reso Coder👍

[@ResoCoder]

Happy to hear that!

[@austinevick]

Am learning some advanced stuff here :). Great work sir

[@abdullah-al-asad6549]

Hi Matt, nice tutorial. Do you mind sharing your vs code editor theme. [ != sign, which font you have used] :-)

[@beatrizcaldeira8341]

great vid. Thanks a lot!

[@beatrizcaldeira8341]

by the way, if you're having problems with null safety, just add material_floating_search_bar: ^0.3.7 to pubspec.yaml instead

[@lucasrennolimafilho3455]

Great Job ! I had some issues with the updated flutter (2.2.0), some of the code doesnt work and then i had to figure it out how to 'translate' it. Besides that, cheers!

[@gmiak_dv]

Excellent! Thanks for explaining this.

[@wongvoonngee3307]

Thank you for the tutorial. Btw, may i know, will you publish more android native tutorial in the future?

[@h3w45]

This is great, thank you.

[@hamzachaouki3195]

Thanks a lot Reso coder🤗❤🤞

[@ismailduo]

Thanks for this very good video! but FloatingSearchBar.of(context) doesn't give me the possibility to get the height ? and when I print it ,it's null ! can you help please ?

[@israamohamed9236]

In case you still haven't gotten an answer, this worked for me: final fsb = FloatingSearchBar.of(context)!.style; return ListView( padding: EdgeInsets.only( top: fsb.height + fsb.margins.vertical, ),

[@phutchins3]

Thank you!

[@khaleds.t.t2445]

i'm always wondering now flutter has null-safety so your conditions can't be null and the variables we need to add the 'late' to not initiate them so my questions we remove the if statement or what? by the way awsome tutorial i enjoyed that 😍

[@vaninhngoc6041]

Thank you very much for creating this video, I want to ask a question. I want to add 1 icon before the line "Search and find out...". I've tried to find some way but it didn't work. Can you tell me a way to add that icon? Tks

[@eligbuefelix7988]

Thank you very much...🙌🏼

[@avdheshsharma6116]

Thanks for sharing.

[@dktech6511]

its great, thankyou bro

[@karansaggoo2935]

Hello Please make a video on search in flutter app on different firestore collection For eg there are three categories of vehical light , heavy , medium and have different collection in firebase And how to search throughout the app (search any category in home page )

[@heldim92]

Is there any chance for you to post here which extensions (name and author) you use?

[@loicngou9592]

Hey matt, don't you think SearchDelegate with showSearch() is more powerful?

[@ResoCoder]

It's much less customizable but otherwise I think you can do the same things with either approach.

[@CrashOrFly]

Great stuff. Excellent presentation. Priceless know-how. I'm almost getting used to your pronunciation of T's and P's :-),

[@shanglee643]

What does it mean when a null value being pass in as a argument?

[@zemmouriyassine3802]

amazing

[@pierremarais7669]

Hi Reso can I get the user to type a word and then connect to sqlite to return all elements containing the letters the user entered, Pierre

[@HappyHorge]

Hi! I keep getting this error message: 'package:material_floating_search_bar/src/floating_search_bar.dart': Failed assertion: line 393 pos 16: 'builder != null': is not true. My FloatingSearchBar is wrapped elsewhere in my app, tried changing it to what you have, but no difference. Do you know what might be wrong?

[@yong-hyunkim7648]

Can I put this search bar to SliverAppBar in NestedScrollView?

[@PreVlad]

what does term stands for? It isn initialised

[@pierremarais7669]

Hi Reso I went through your written tutorial also but could not find the github link, can you direct me, thanks

[@tanviristiak5287]

What is the name of your vsCode Theme?

[@MoAdel92]

please new videos about GetX and COnnectivity package

[@vaibhavdangayachvd]

Why not material search delegate?

[@marlonsubuyu2012]

Sometimes it's not easy to implement something with Search delegate, for example, I tried to make some animations with colours, and I couldn't do it, so I decided to make my own Search bar

[@MrQooje2]

It's limited when it comes to customization.

[@arnavgujarathi5949]

I am getting an error while importing this package- 'package:material_floating_search_bar/src/floating_search_bar.dart' - can someone please help me in resolving this

[@dennisbarzanoff9025]

Dude, logicwise this is the best Flutter channel, period. If only the apps you show had amazing design too, it would make it so much more interesting to watch. You can also try the reverse deleting technique to show the code after writing it in chunks like Fireship does instead of typing them out

[@ResoCoder]

Thanks. I'm going to do design focused tutorials soon, however, I find that mixing logic and nice UI in a reasonably short tutorial just doesn't play well.

[@FahadAyaz]

Can you please show this to the Stadia team? 😅

[@ResoCoder]

LOL!

[@ahmedadnan5875]

when I watch your tutorial I level up by double XP

[@fmahmohammadi8858]

Third

[@emmanuelolajubu4144]

Not a good teaching, hard to understand tho

[@neijaywarner]

does anybody know where the github project went? it's showing 404 and pub.dev says unverified uploader.