Bottom Extra Space in viewport in listview.separated in 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. This is my output For more context this is my listview.code

Container(
            height: 500,
            child: ListView.separated(
              cacheExtent: 20,
              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 my context this is the full code, please help check it out and run it and make corrections https://github.com/maoja37/Cryptowatch

Answer 1

Instead of a Container with 500 height, use Expanded :

Expanded(
      child: ListView.separated(
          cacheExtent: 20000,
          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,
              );
          }),
    );