Flutter Show Data Once in ListView

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);
});