flutter pub add flutter_search_bar根據套件公開資料產生的選型評估，僅供參考。
一個 Flutter 套件，提供整合於 AppBar 中的搜尋欄，設定簡單。它會自動處理搜尋輸入、過濾與 UI 更新，非常適合在應用程式中加入搜尋功能，且無需撰寫大量樣板程式碼。此搜尋欄支援即時過濾，並可依各種設計需求進行自訂。專為順暢融入 AppBar 所設計，提供乾淨直覺的使用者體驗。該套件在 GitHub 上維護，適合尋求簡便方案以實作搜尋功能的開發者。
以下為關聯原始碼儲存庫的 README 原文快照，最新內容請造訪原始碼儲存庫。
This repository is archived. 3.0.0 is the last version that I will publish.
The SearchBar still works and it's pretty simple if you'd like to fork it. I just don't have the time to maintain it.
A simple and mostly automatic material search bar for flutter (dart).
Note: use flutter_search_bar and not search_bar -- I own both packages but I'm just a tad bit locked out of search_bar, so it won't be updated.
Normal state (search is not active yet, only title and actions are set, with the only action being a search button)
inBar set to false (background white, back button inherited):
inBar set to true (background inherited):
A simple usage example:
class _MyHomePageState extends State<MyHomePage> {
SearchBar searchBar;
AppBar buildAppBar(BuildContext context) {
return new AppBar(
title: new Text('My Home Page'),
actions: [searchBar.getSearchAction(context)]
);
}
_MyHomePageState() {
searchBar = new SearchBar(
inBar: false,
setState: setState,
onSubmitted: print,
buildDefaultAppBar: buildAppBar
);
}
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: searchBar.build(context)
);
}
}
This will create an AppBar with a search button as its only action, and on press the AppBar will turn white and have a TextField inside, allowing user input. Once the user has input something and pressed the "enter" button on their keyboard, it will close and the value will be printed to the debugger.
Essentially, this class returns two different app bars based on whether search is active.
The setState callback you pass the search bar can technically be any VoidCallback.
Please file feature requests and bugs at the issue tracker.
We've recently added support for null-safety in 3.0.0 -- if you find any issues, please report them there!