Flutter Show Data Once in ListView - flutter

Question

I have listview in my app and in this listView I pull the book titles with API. Book titles are coming up without any problems. But if I press the button more than once, the titles increase as much as I press the button
Here is my code sample
_showData
? Container(
height: MediaQuery.of(context).size.height / 2,
child: Padding(
padding: const EdgeInsets.all(16.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Column(
children: [
IconButton(
icon: Icon(Icons.close),
onPressed: () {
Navigator.pushNamed(
context, CountryScreen.routeName);
}),
Center(
child: Text(
'Please Select Book',
style: TextStyle(
fontWeight: FontWeight.bold, fontSize: 24),
),
),
],
),
Expanded(
child: ListView.builder(
itemCount: bookList.length,
itemBuilder: (BuildContext context, int index) {
return ListTile(
onTap: () {
Navigator.pushNamed(
context, MainScreen.routeName);
},
title: Text(bookList[index]),
);
),
],
),
),
)
: SizedBox()
I'm calling my data here,I'm calling in the button
else {
_showData = !_showData;
books.forEach((element) {
bookList.add(element.companyName);
book.setStringList(
'bookName', bookList);
});
}
To illustrate with a small example When I click once on the button I call the data
but if I click twice I see this (the more I click the more it gets), any idea?

Answer 1

The build() method is called whenever there is a change to redraw in the UI. But at that time your bookList state will not be reset.
I will give a trick code to fix this problem:
bookList = [];
books.forEach((element) {
bookList.add(element.companyName);
book.setStringList('bookName', bookList);
});