Adding Search function to SliverList in Flutter

Question

I'm trying to add a search function to my SliverList containing multiple list items.

Just before looping through my List of elements I added the TextField to implement the search function itself.

Padding(
  padding: const EdgeInsets.all(8.0),
  child: TextField(
    onChanged: (value) {
      filterSearchResults(value);
    },
    controller: editingController,
    decoration: InputDecoration(
      labelText: "Search",
      hintText: "Animal Name",
      prefixIcon: Icon(Icons.search),
      border: OutlineInputBorder(
          borderRadius: BorderRadius.all(Radius.circular(4.0))),
    ),
  ),
),


for (var animal in response)
  Card( /* Elements to be searched later */)

as for the fluterSearchResults function:

void filterSearchResults(String query) {
  List response = widget.res; // <- contains the animal data I'd like to search through

  List<String> searchList = List<String>();

  if (query.isNotEmpty) {
    searchList.forEach((response) {
      if (response.contains(query)) {
        searchList.add(response);
      }

      setState(() {
        items.clear();
        items.addAll(searchList);
      });
    });

    return;
  } else {
    setState(() {
      items.clear();
      items.addAll(searchList);
    });
  }
}

one element of the data within widget.res looks like this:

[{
    id: 1,
    game: "basegame",
    name: "Aardvark",
    continent: [
        "Africa"
    ],
    biome: [
        "Grassland",
        "Tropical"
    ],
    can_swim: true,
    status: "Least Concern",
    exhibit: false,
    dominance: "None",
    relationship_human: "Shy",
    mating_system: "Polygynous"
}]

the my function does not seem to add the elements properly to the searchList I'd like to display as long as the query is not empty but I'm unable to find the issue here.

score 0 · Answer 1 · answered Jan 12 '21 at 09:42

Part of fluterSearchResults function is the reason causing error. You use the same list for searching, [searchList]. It always search in an empty list. Try

      List responseList = widget.res; 
      List<String> searchList = List<String>();
    
        responseList.forEach((response) {
          if (response.contains(query)) {
            searchList.add(response);
          }
    
          setState(() {
            items.clear();
            items.addAll(searchList);
          });
        });
    
        return;

I hope the problem will be solved.

Adding Search function to SliverList in Flutter

1 Answers1