How to remove empty spaces generated by grid view

Question

I want to apply categorise selection for my flutter app. I'm a beginner in flutter. I've tried to my very best to get here but I don't know how to remove these empty spaces.

In the body of the homescreen.dart I've written the following code.

Expanded(
      child: Padding(
        padding: const EdgeInsets.symmetric(horizontal: KDefaultPadding),
        child: GridView.builder(
          itemCount: products.length,
          gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
            crossAxisCount: 2,
            childAspectRatio: 0.75,
            mainAxisSpacing: KDefaultPadding,
            crossAxisSpacing: KDefaultPadding,
          ),
          itemBuilder: (context, index) => ItemCard(
            product:
                products[index].tag == "chicken" ? products[index] : null,
            press: () => Navigator.push(
              context,
              MaterialPageRoute(
                builder: (context) => DetailScreen(
                  product: products[index],
                ),
              ),
            ),
          ),
        ),
      ),
    ),

and in the item card.dart I've written the following.

    class ItemCard extends StatelessWidget {
  final Product product;
  final Function press;

  const ItemCard({
    Key key,
    this.product,
    this.press,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    if (product != null) {
      return GestureDetector(
        onTap: press,
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            Container(
              padding: EdgeInsets.all(KDefaultPadding),
              // height: 180,
              // width: 160,
              decoration: BoxDecoration(
                color: product.color,
                borderRadius: BorderRadius.circular(16),
              ),
              child: Hero(
                  tag: "${product.id}",
                  child: Image.asset(
                    product.image,
                  )),
            ),
            Padding(
              padding:
                  const EdgeInsets.symmetric(vertical: KDefaultPadding / 4),
              child: Text(
                product.title,
                style:
                    TextStyle(color: kTextColor, fontWeight: FontWeight.bold),
              ),
            ),
            Text(
              "$kCurrency${product.price}",
              style: TextStyle(
                  color: kTextLightColor, fontWeight: FontWeight.bold),
            )
          ],
        ),
      );
    } else {
      return Container();
    }
  }

}

and the output I got is this.

initial is this...

Can someone help me out please?

Answer 1

Change this products.length to products.where((product) => product.tag == 'chicken').length to do not put unexpected product into GridView.