Filter in a listView.builder inside Future Builder flutter - flutter

Question

I am trying to implement a simple search bar funcionality inside a FutureBuilder since I am fetching data from an API.
However, I am unable to retrieve data from the search funcionality even though I retrieve data from my future function fetchdata() and the I get all the data that contains a string in glossarListOnSearchwhich is plenty of data. The result of my search is empty. What am I missing?
Here is what I get in glossarListOnSearch List:
enter image description here
I want to filter by "_breed".
Here is the piece of code where I implement the search:
class MainPage extends StatefulWidget {
const MainPage({Key? key}) : super(key: key);
#override
_MainPageState createState() => _MainPageState();
}
class _MainPageState extends State<MainPage> {
TextEditingController textController = TextEditingController();
List<dynamic> glossarListOnSearch = [];
bool _firstSearch = true;
final List<String> _filterList = [];
String _query = '';
#override
void initState() {
super.initState();
fetchData(AppConstants.APIBASE_URL);
}
_MainPageState() {
textController.addListener(() {
if (textController.text.isEmpty) {
setState(() {
_firstSearch = true;
_query = '';
});
} else {
setState(() {
_firstSearch = false;
_query = textController.text;
});
}
});
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
flexibleSpace: Container(
decoration: const BoxDecoration(
gradient: LinearGradient(
colors: [Colors.blueAccent],
//colors: [Colors.blueAccent,Colors.lightBlue, Colors.blueGrey],
begin: Alignment.topCenter,
end: Alignment.bottomCenter),
)),
bottom: PreferredSize(
preferredSize: Size(0, 60),
child: Padding(
padding: const EdgeInsets.fromLTRB(12, 0, 12, 10),
child: Container(
//height: 50,
decoration: BoxDecoration(
gradient: const LinearGradient(
colors: [Colors.white60, Colors.white70],
begin: Alignment.topCenter,
end: Alignment.bottomCenter),
borderRadius: BorderRadius.circular(50),
),
child: Padding(
padding: const EdgeInsets.fromLTRB(20, 0, 0, 0),
child: TextField(
textAlign: TextAlign.left,
onChanged: (value) {
setState(() {
_query = value;
});
},
controller: textController,
decoration: const InputDecoration(
border: InputBorder.none,
errorBorder: InputBorder.none,
enabledBorder: InputBorder.none,
contentPadding: EdgeInsets.all(0),
hintText: 'Search'),
),
),
),
),
),
),
backgroundColor: Colors.white,
body: Column(children: [
Container(
margin: const EdgeInsets.only(top: 60, bottom: 15),
padding: const EdgeInsets.only(left: 20, right: 20),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Center(
child: Container(
width: MediaQuery.of(context).size.width -
(MediaQuery.of(context).size.width / 3.5),
height: 0,
decoration: BoxDecoration(
borderRadius:
BorderRadius.circular(Dimensions.radius20),
color: Colors.white),
),
)
],
),
),
textController.text.isEmpty && _filterList.isEmpty
? const Expanded(
child: SingleChildScrollView(
child: BookPageBody(),
))
: FutureBuilder(
future: fetchData(AppConstants.APIBASE_URL),
builder: (context, snapshot) {
_filterList.clear();
glossarListOnSearch.clear();
for (int i = 0; i < BreedList.length; i++) {
var item = BreedList[i].breed;
//here I add to _filterList all the results that contains
//that letter
if ((item.toString().toLowerCase())
.contains(_query.toLowerCase())) {
_filterList.add(item.toString());
glossarListOnSearch = _filterList;
}
}
return ListView.builder(
itemCount: glossarListOnSearch.length,
itemBuilder: (BuildContext context, int index) {
if (glossarListOnSearch.isNotEmpty) {
return Column(children: [for ( var dog in glossarListOnSearch) Text(dog.toString())]
);
}
return const Expanded(
child:SingleChildScrollView(
child: BookPageBody()));
});
})
]));
}
How would you filter glossarListOnSearch??

Answer 1

I think your problem is that you set the glossarListOnSearch equal to the result every time in the for loop. So basically all changes until the last one get overwritten. Or am I missing something? It's really hard to tell what's going on here. Also aren't you fetching the data again and again everytime the text controller goes from empty to not empty and back?
Or are you adding the whole list to glossarListOnSearch in every iteration? In this case it would make sense to only do it once at the end. Can you show us the rest of the code? ie. the _filterList?
Maybe it would make sense to load the data beforehand and handle all of this in a Provider.