Name: Thanh tìm kiếm & Neo tìm kiếm (Widget của tuần) (SearchBar & SearchAnchor (Widget of the Week))
Uploaded: 2025-11-16T20:16:44.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...

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.

Cần cách để người dùng tìm kiếm? Search Bar widget sẽ giúp bạn. Search Bar Widget là một thanh tìm kiếm theo material design, cung cấp giao diện thân thiện với người dùng để tìm kiếm nội dung.

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

Khi tạo Search Bar widget, bạn có thể tùy chọn thêm leading icon hoặc 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.

Sau đó, bạn có thể tùy chỉnh thêm với nhiều thuộc tính để thanh tìm kiếm phù hợp với thiết kế ứng dụng của bạn, ví dụ:

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

màu nền, màu sắc, bóng đổ, màu sắc, độ cao, hình dạng và khoảng đệm.

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

Search Bar cũng cung cấp các hàm gọi lại để bạn xử lý tương tác của người dùng.

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

Hàm gọi lại unchanged được gọi mỗi khi văn bản trong thanh tìm kiếm thay đổi.

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

Unsubmitted được gọi khi người dùng gửi truy vấn tìm kiếm, ví dụ như nhấn phím enter.

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.

On tap được kích hoạt khi người dùng chạm vào thanh tìm kiếm và on tap outside được kích hoạt khi thanh tìm kiếm có focus và người dùng chạm ra ngoài nó.

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

Ví dụ, bạn có thể hiển thị hoặc ẩn gợi ý tìm kiếm, nhưng làm thế nào để hiển thị các gợi ý đó?

Đó là lúc Search Anchor xuất hiện.

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

Search Anchor cung cấp một giao diện tìm kiếm phủ lên ứng dụng của bạn và hiển thị các gợi ý.

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.

Là người dùng, bạn thậm chí không cần tự xây dựng thanh tìm kiếm của mình vì nếu bạn sử dụng trình tạo Search Anchor, nó đã được xây dựng sẵn cho bạn.

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

Tuy nhiên, bạn sẽ phải cung cấp một trình tạo gợi ý chịu trách nhiệm xây dựng danh sách các gợi ý.

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

Suggestions Builder cung cấp cho bạn ngữ cảnh build và bộ điều khiển tìm kiếm để bạn có thể lọc gợi ý dựa trên truy vấn của người dùng.

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

Bây giờ hãy xác định điều gì xảy ra khi người dùng chạm vào một gợi ý.

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

Ví dụ, đóng giao diện tìm kiếm và xử lý lựa chọn của người dùng.

You can also choose to provide your own search controller.

Bạn cũng có thể chọn cung cấp bộ điều khiển tìm kiếm của riêng mình.

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

Điều này cho phép bạn mở hoặc đóng giao diện tìm kiếm và lấy giá trị truy vấn hiện tại từ bên ngoài Search Anchor.

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

Cuối cùng nhưng không kém phần quan trọng, Search Anchor cũng nhận nhiều tham số khác nhau để tùy chỉnh thanh tìm kiếm đi kèm và giao diện Search view.

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

Lần tới khi bạn cần thêm trải nghiệm tìm kiếm vào ứng dụng Flutter của mình, hãy thử tính năng I'm feeling lucky với Search Bar và Search Anchor.

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

Để biết thêm thông tin về Search Bar, Search Anchor và tất cả các widget khác, hãy truy cập flutter.dev.com.