Name: SearchBar & SearchAnchor (Widget of the Week)
Uploaded: 2025-11-16T20:14:42.000Z
Duration: 2 min 49 s
Description: Thousands of YouTube videos with English-Chinese subtitles! Now you can learn to understand native speakers, expand your vocabulary, and improve your pronunciation...

Relative clauses (Restrictive vs. nonrestrictive)

Foreign Need a way for your users to search the Search Bar widget has you covered the Search Bar Widget is a material design search bar that provides a user friendly interface for searching through content.

When you construct the Search Bar widget, you can optionally provide a leading icon or or hint text.

Then you can further customize it with a number of properties so that the search bar matches your app's design, e.g.

background, color, shadow, color, elevation, shape, and padding.

Search Bar also provides callbacks that allow you to handle user interactions.

The unchanged callback is called every time the text in the search bar changes.

Unsubmitted is called when the user submits the search qu, such as pressing the enter key.

On tap is activated when the user taps on the search bar and on tap outside is activated when the search bar has focus and the user taps outside of it.

For example, you can show or hide search suggestions, but how would you surface the suggestions?

Search Anchor provides a search view that overlays your app and renders suggestions.

As a user, you won't even need to build your own search bar because if you use the Search Anchor bar constructor, it's built for you.

You will, however, have to provide a suggestions builder that's responsible for building the list of suggestions.

Suggestions Builder gives you a build context and search controller so you can filter suggestions based on the user's query.

Now define what happens when the user taps on a suggest.

For example, close the search view and handle the user's selection.

You can also choose to provide your own search controller.

This lets you open or close the search view and retrieve the current query value from outside of Search Anchor.

Last but not least, Search Anchor also takes a variety of parameters for customizing the included search bar and Search view appearance.

Next time you need to add a search experience to your Flutter app, hit I'm feeling lucky with Search Bar and Search Anchor.

For more info on Search Bar, Search Anchor, and all the other widgets, head to flutter.dev.com.