update details product card

MainAppDMT/lib/screens/product/components/product_card.dart

+import 'package:DMTI_app/models/product.dart';
+import 'package:flutter/material.dart';
+
+import '../../../constants.dart';
+
+class ProductCard extends StatelessWidget {
+  const ProductCard({
+    Key key,
+    this.itemIndex,
+    this.product,
+    this.press,
+  }) : super(key: key);
+
+  final int itemIndex;
+  final Product product;
+  final Function press;
+
+  @override
+  Widget build(BuildContext context) {
+    // It  will provide us total height and width of our screen
+    Size size = MediaQuery.of(context).size;
+    return Container(
+      margin: EdgeInsets.symmetric(
+        horizontal: kDefaultPadding,
+        vertical: kDefaultPadding / 2,
+      ),
+      // color: Colors.blueAccent,
+      height: 160,
+      child: InkWell(
+        onTap: press,
+        child: Stack(
+          alignment: Alignment.bottomCenter,
+          children: <Widget>[
+            // Those are our background
+            Container(
+              height: 136,
+              decoration: BoxDecoration(
+                borderRadius: BorderRadius.circular(18),
+                color: itemIndex.isEven ? kBlueColor : kSecondaryColor,
+                boxShadow: [kDefaultShadow],
+              ),
+              child: Container(
+                margin: EdgeInsets.only(right: 40),
+                decoration: BoxDecoration(
+                  color: Colors.white70,
+                  borderRadius: BorderRadius.circular(18),
+                ),
+              ),
+            ),
+            // our product image
+            Positioned(
+              top: 0,
+              right: 0,
+              child: Hero(
+                tag: '${product.id}',
+                child: Container(
+                  padding: EdgeInsets.symmetric(horizontal: kDefaultPadding),
+                  height: 160,
+                  // image is square but we add extra 20 + 20 padding thats why width is 200
+                  width: 200,
+                  child: Image.asset(
+                    product.image,
+                    fit: BoxFit.cover,
+                  ),
+                ),
+              ),
+            ),
+            // Product title and price
+            Positioned(
+              bottom: 0,
+              left: 0,
+              child: SizedBox(
+                height: 136,
+                // our image take 200 width, thats why we set out total width - 200
+                width: size.width - 200,
+                child: Column(
+                  crossAxisAlignment: CrossAxisAlignment.start,
+                  children: <Widget>[
+                    Spacer(),
+                    Padding(
+                      padding: const EdgeInsets.symmetric(
+                          horizontal: kDefaultPadding),
+                      child: Text(
+                        product.title,
+                        style: Theme.of(context).textTheme.button,
+                      ),
+                    ),
+                    // it use the available space
+                    Spacer(),
+                    Container(
+                      padding: EdgeInsets.symmetric(
+                        horizontal: kDefaultPadding * 1.5, // 30 padding
+                        vertical: kDefaultPadding / 4, // 5 top and bottom
+                      ),
+                      decoration: BoxDecoration(
+                        color: kSecondaryColor,
+                        borderRadius: BorderRadius.only(
+                          bottomLeft: Radius.circular(22),
+                          topRight: Radius.circular(22),
+                        ),
+                      ),
+                      child: Text(
+                        "${product.price} \M\I\N",
+                        style: Theme.of(context).textTheme.button,
+                      ),
+                    ),
+                  ],
+                ),
+              ),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}