How to include card widget with image into Dismissible widget?

41 Views Asked by At

I've created a list of card widget(which has image and text widget). When I try to wrap the card widget inside the Dismissable widget, the UI collapses.

how to make the card's width fill the screen?

Below is code snippet the single card widget

class ProductCardWidget extends StatelessWidget {
  const ProductCardWidget(
      {super.key, required this.index, required this.products});
  final List products;
  final int index;

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(10),
      child: Card(
        margin: const EdgeInsets.all(0),
        elevation: 10,
        shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)),
        child: InkWell(
          onTap: () {
            // final productDetails = ProductModel(productId: products[index]['id'], productTitle: products[index]['title'], productImage: products[index]['image'], productDesc: products[index]['description'], productSpecs: products[index]['specification']);
            Navigator.push(
                context,
                MaterialPageRoute(
                    builder: (ctx) => ProductViewerScreen(
                          productDetails: products[index],
                        )));
          },
          splashColor: const Color.fromARGB(255, 155, 190, 255),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              const SizedBox(
                height: 20,
              ),
              Image.asset(
                products[index].productImage,
              ),
              const SizedBox(
                height: 20,
              ),
              Text(products[index].productTitle),
              const SizedBox(
                height: 20,
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Below is the snippet where I try to wrap the above card widget with Dismissable widget (inside a listview)

Widget build(BuildContext context) {
  Widget card_widget;

  return ListView.builder(
      itemCount: products.length,
      itemBuilder: (ctx, index) {
        card_widget = ProductCardWidget(index: index, products: products);
        if (isFavoriteList) {
          card_widget = Dismissible(
              key: UniqueKey(),
              background: Container(
                margin: EdgeInsets.all(0),
                color: Colors.red,
              ),
              onDismissed: (direction) {
                allProductDetails[products[index].productId]['is_favorite'] =
                    false;
                favorites.remove(products[index]);
              },
              child: ProductCardWidget(index: index, products: products));
        }

        return card_widget;
      });
}

The final UI I got

overall look

while dismissing

0

There are 0 best solutions below