Remove whitespace and make listview.separated stop scrolling at last item flutter

Question

Before I ask the question, I know it might seem like this is an already answered question, multiple times even. But I went through different answers and tried everything I could find but it still didn't give me my desired result. I am trying to remove the whitespace in my listview in the available viewport, I have tried experimenting with different properties like shrinkwrap,cacheExtent, physics and even tried surrounding the listview by MediaQuery.removePadding. nothing worked. Ps this problem only appears in my watchlist part of the app where I don't have all items rendered at once lazily but have to add it dynamically. This is my output

For context, this is the code

Expanded(
            child: ListView.separated(
                shrinkWrap: true,
                physics: required_list.length < 9
                    ? NeverScrollableScrollPhysics()
                    : ClampingScrollPhysics(),
                separatorBuilder: (BuildContext context, int index) {
                  return SizedBox(
                    height: 12,
                  );
                },
                itemCount: coins.length,
                itemBuilder: (context, index) {
                  if (required_list.contains(coins[index].symbol))
                    return Container(
                      padding: EdgeInsets.all(12),
                      width: double.infinity,
                      height: 64,
                      child: Row(
                        children: [
                          CachedNetworkImage(
                              imageUrl: (coinIconUrl +
                                      coins[index].symbol +
                                      '.png')
                                  .toLowerCase(),
                              placeholder: (context, url) =>
                                  CircularProgressIndicator(),
                              errorWidget: (context, url, error) =>
                                  SvgPicture.asset(
                                    'assets/images/Dollar_Sign.svg',
                                    color: Colors.blue,
                                  ),
                              height: 40,
                              width: 40),
                          SizedBox(
                            width: 10,
                          ),
                          Column(
                            crossAxisAlignment: CrossAxisAlignment.start,
                            mainAxisSize: MainAxisSize.min,
                            children: [
                              SizedBox(
                                width: 120,
                                child: Text(
                                  coins[index].name,
                                  overflow: TextOverflow.ellipsis,
                                  maxLines: 1,
                                  style: TextStyle(
                                    fontSize: 16,
                                    fontWeight: FontWeight.w500,
                                  ),
                                ),
                              ),
                              SizedBox(height: 5),
                              Text(
                                '\$' +
                                    coins[index]
                                        .quoteModel
                                        .usdModel
                                        .prices
                                        .toStringAsFixed(2),
                                style: TextStyle(
                                  color: Color(0xff929292),
                                  fontWeight: FontWeight.w400,
                                ),
                              ),
                            ],
                          ),
                          Expanded(
                              child: Row(
                            children: [
                              Expanded(
                                child: Container(
                                  width: double.infinity,
                                ),
                              ),
                              Row(
                                children: [
                                  Text(
                                    coins[index]
                                            .quoteModel
                                            .usdModel
                                            .percentageChange_7d
                                            .toStringAsFixed(2) +
                                        '%',
                                    style: TextStyle(
                                        fontSize: 16,
                                        color: coins[index]
                                                    .quoteModel
                                                    .usdModel
                                                    .percentageChange_7d >=
                                                0
                                            ? Color(0xff4caf50)
                                            : Color(0xffe52f15),
                                        fontWeight: FontWeight.w400),
                                  ),
                                  SizedBox(width: 10),
                                  IconButton(
                                    icon:
                                        magic.contains(coins[index].symbol)
                                            ? Icon(IconlyBold.star)
                                            : Icon(IconlyLight.star),
                                    color:
                                        magic.contains(coins[index].symbol)
                                            ? Color(0xffF7936F)
                                            : Colors.grey,
                                    onPressed: () {
                                      magic.contains(coins[index].symbol)
                                          ? provider2.removeCoin(
                                              coins[index].symbol)
                                          : provider2
                                              .addCoin(coins[index].symbol);
                                    },
                                  )
                                ],
                              ),
                            ],
                          ))
                        ],
                      ),
                    );
                  else
                    return SizedBox(
                      height: 0,
                    );
                }),
          );

For more context, this is the link to the full code. If anybody can check it out as I would like help and corrections and help with other parts https://github.com/maoja37/Cryptowatch

Answer 1

The issue is here

itemCount: coins.length

and here

if (required_list.contains(coins[index].symbol))

Make sure you filter the list before passing it to ListView.separated. Like this