如何在 Flutter 中實現搜索功能

Question

我一直在嘗試在顫振中實現搜索功能，

所以我有這個搜索圖標按鈕

       IconButton(
          onPressed: () {
            showSearch(
              context: context,
              delegate: CustomSearchDelegate(),
            );
          },
          icon: Icon(Icons.search),
        )

OnPressed 它使用下面的 CustomSearchDelegate 類

class CustomSearchDelegate extends SearchDelegate {
  AllBackEnds _allBackEnds = AllBackEnds();

  @override
  List<Widget> buildActions(BuildContext context) {
    return [
      IconButton(
          onPressed: () {
            if (query.isEmpty) {
              close(context, null);
            } else {
              query = '';
            }
          },
          icon: Icon(Icons.clear)),
    ];
  }

  @override
  Widget buildLeading(BuildContext context) => IconButton(
        icon: BackButtonIcon(),
        onPressed: () {
          close(context, null);
        },
      );

  @override
  Widget buildResults(BuildContext context) {
    return FutureBuilder<List>(
        future: _allBackEnds.getUsers(),
        builder: (context, adsSnapshot) {
          if (!adsSnapshot.hasData) {
            return CustProgIndicator();
          } else {
            List _dat = adsSnapshot.data!;
            return ListView.builder(
              itemCount: _dat.length,
              shrinkWrap: true,
              itemBuilder: (context, int index) {
                Map<String, dynamic> _userAds = _dat[index];

                return CustomWid(data: _userAds);
              },
            );
          }
        });
  }

  @override
  Widget buildSuggestions(BuildContext context) {
    return FutureBuilder<List>(
        future: _allBackEnds.getUsers(),
        builder: (context, adsSnapshot) {
          if (!adsSnapshot.hasData) {
            return CustProgIndicator();
          } else {
            List _dat = adsSnapshot.data!;
            return ListView.builder(
              itemCount: _dat.length,
              shrinkWrap: true,
              itemBuilder: (context, int index) {
                Map<String, dynamic> _userAds = _dat[index];
                return CustomWid(data: _userAds);
              },
            );
          }
        });
  }
}

_allBackEnds.getUsers()正在返回這樣的對象數組

[{s_n: 1, name: Drizzy}, {s_n: 2, name: Omah Lay,}];

所以我想用名字搜索

所以 buildSuggesion Widget 和 buildResults Widget 只是顯示自定義用戶卡的列表，沒有實際的搜索功能。

如何使用顯示的代碼實現建議和搜索功能？

Answer 1

解決此問題的正確方法是：首先您必須制作模型來存儲該數據，在制作模型使用文本字段並輸入一些文本后，在文本字段的 onchange 方法中，您可以檢查模型數據列表是否包含您的數據已在文本字段中輸入

void searchContact(String textfieldresult,modelList) async {
 searchedList.clear();
 var value = modelList.where((element) =>
 element.name!.toLowerCase().contains(textfieldresult.toLowerCase()) ||
    element.name!.toUpperCase().contains(textfieldresult.toUpperCase()));
searchedList.addAll(value);
  return searchedList ;
}

此方法將返回搜索到的值