如何在 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 ;
}

此方法将返回搜索到的值