Finalize product screen

lib/common/product_card.dart

@@ -1,4 +1,5 @@
 import 'package:flutter/material.dart';
+import 'package:shoptronics/screens/screens.dart';
 
 class ProductCard extends StatelessWidget {
   ProductCard({Key key, this.child, this.width, this.height, this.color})
@@ -11,22 +12,32 @@ class ProductCard extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return Container(
-      margin: const EdgeInsets.only(top: 20, right: 16),
-      decoration: BoxDecoration(
-        color: color,
-        borderRadius: BorderRadius.circular(20),
-      ),
-      width: width,
-      height: height,
-      child: Stack(
-        children: <Widget>[
-          child,
-          Align(
-            alignment: Alignment.bottomRight,
-            child: _ArrowIcon(),
+    return GestureDetector(
+      onTap: () {
+        Navigator.push(
+          context,
+          MaterialPageRoute(
+            builder: (context) => ProductScreen(),
           ),
-        ],
+        );
+      },
+      child: Container(
+        margin: const EdgeInsets.only(top: 20, right: 16),
+        decoration: BoxDecoration(
+          color: color,
+          borderRadius: BorderRadius.circular(20),
+        ),
+        width: width,
+        height: height,
+        child: Stack(
+          children: <Widget>[
+            child,
+            Align(
+              alignment: Alignment.bottomRight,
+              child: _ArrowIcon(),
+            ),
+          ],
+        ),
       ),
     );
   }

lib/screens/product/product_screen.dart

@@ -15,12 +15,14 @@ class ProductScreen extends StatelessWidget {
           ListView(
             physics: BouncingScrollPhysics(),
             shrinkWrap: true,
+            padding: const EdgeInsets.only(bottom: 80),
             children: <Widget>[
               SizedBox(
                 height: MediaQuery.of(context).size.height * 0.35,
                 child: ImagePageView(),
               ),
-              // ProductInfo(),
+              SizedBox(height: 40),
+              ProductInfo(),
             ],
           ),
         ],

lib/screens/product/widgets/product_info/add_to_cart_button.dart

@@ -0,0 +1,43 @@
+import 'package:flutter/material.dart';
+
+class AddToCartButton extends StatelessWidget {
+  final Function() onPressed;
+  AddToCartButton({Key key, this.onPressed}) : super(key: key);
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      decoration: BoxDecoration(
+        borderRadius: BorderRadius.circular(20),
+        boxShadow: [
+          BoxShadow(
+            color: Theme.of(context).accentColor,
+            blurRadius: 8,
+          )
+        ],
+      ),
+      child: Material(
+        color: Theme.of(context).accentColor,
+        shadowColor: Theme.of(context).accentColor,
+        shape: RoundedRectangleBorder(
+          borderRadius: BorderRadius.circular(20),
+        ),
+        child: InkWell(
+          onTap: onPressed,
+          splashColor: Colors.white,
+          borderRadius: BorderRadius.circular(20),
+          child: Container(
+            width: 150,
+            height: 80,
+            alignment: Alignment.center,
+            child: Text(
+              "Add to cart",
+              style: TextStyle(
+                color: Colors.white,
+              ),
+            ),
+          ),
+        ),
+      ),
+    );
+  }
+}

lib/screens/product/widgets/product_info/favourite_button.dart

@@ -0,0 +1,25 @@
+import 'package:flutter/material.dart';
+
+class FavouriteButton extends StatelessWidget {
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      height: 50,
+      width: 50,
+      decoration: BoxDecoration(
+        borderRadius: BorderRadius.circular(50),
+        color: Theme.of(context).accentColor,
+        boxShadow: [
+          BoxShadow(
+            color: Theme.of(context).accentColor,
+            blurRadius: 20,
+          )
+        ],
+      ),
+      child: Icon(
+        Icons.favorite,
+        color: Colors.white,
+      ),
+    );
+  }
+}

lib/screens/product/widgets/product_info/info_card.dart

@@ -0,0 +1,73 @@
+import 'package:flutter/material.dart';
+import 'package:shoptronics/data_models/product.dart';
+import 'package:shoptronics/screens/product/widgets/product_info/plus_minus_incrementer.dart';
+import 'package:shoptronics/screens/product/widgets/product_info/rating.dart';
+
+class InfoCard extends StatelessWidget {
+  final Product product;
+  InfoCard({this.product});
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      height: 380,
+      width: double.infinity,
+      decoration: BoxDecoration(
+        color: Colors.white,
+        borderRadius: BorderRadius.circular(40),
+      ),
+      child: Padding(
+        padding: const EdgeInsets.symmetric(vertical: 32, horizontal: 24),
+        child: Column(
+          crossAxisAlignment: CrossAxisAlignment.start,
+          children: <Widget>[
+            Flexible(
+              flex: 1,
+              child: Text(
+                product.name,
+                textAlign: TextAlign.left,
+                style: TextStyle(
+                  fontSize: 25,
+                  fontWeight: FontWeight.w600,
+                  color: Color(0xFF4209B7),
+                ),
+              ),
+            ),
+            SizedBox(height: 12),
+            Flexible(
+              flex: 1,
+              child: Text(
+                product.price,
+                style: TextStyle(
+                  fontSize: 16,
+                  fontWeight: FontWeight.w400,
+                  color: Colors.black.withAlpha(150),
+                ),
+              ),
+            ),
+            SizedBox(height: 12),
+            Flexible(
+              flex: 1,
+              child: Rating(rating: 3.5),
+            ),
+            SizedBox(height: 20),
+            Flexible(
+              flex: 5,
+              child: Text(
+                product.description,
+                style: TextStyle(
+                  color: Color(0xFF241D8C),
+                  height: 2,
+                ),
+              ),
+            ),
+            SizedBox(height: 30),
+            Flexible(
+              flex: 2,
+              child: PlusMinusIncrementer(),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}

lib/screens/product/widgets/product_info/plus_minus_incrementer.dart

@@ -0,0 +1,71 @@
+import 'package:flutter/material.dart';
+import 'package:shoptronics/screens/product/widgets/product_info/add_to_cart_button.dart';
+
+class PlusMinusIncrementer extends StatefulWidget {
+  @override
+  _PlusMinusIncrementerState createState() => _PlusMinusIncrementerState();
+}
+
+class _PlusMinusIncrementerState extends State<PlusMinusIncrementer> {
+  int qty;
+  @override
+  void initState() {
+    qty = 0;
+    super.initState();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Row(
+      mainAxisAlignment: MainAxisAlignment.spaceBetween,
+      children: <Widget>[
+        Container(
+          width: 100,
+          height: 35,
+          decoration: BoxDecoration(
+            color: Colors.grey[100],
+            borderRadius: BorderRadius.circular(30),
+          ),
+          child: Row(
+            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
+            children: <Widget>[
+              // Gesture detector used instead of IconButton to avoid unnecessary padding
+              GestureDetector(
+                onTap: () {
+                  if (qty != 0) {
+                    setState(() => qty--);
+                  }
+                },
+                child: Icon(
+                  Icons.remove,
+                  color: Colors.grey[400],
+                  size: 18,
+                ),
+              ),
+              Text(
+                "$qty",
+                style: TextStyle(
+                    color: Color(0xFF4209B7), fontWeight: FontWeight.w500),
+              ),
+              GestureDetector(
+                onTap: () {
+                  setState(() => qty++);
+                },
+                child: Icon(
+                  Icons.add,
+                  color: Colors.grey[400],
+                  size: 18,
+                ),
+              ),
+            ],
+          ),
+        ),
+        AddToCartButton(
+          onPressed: () {
+            setState(() => qty = 0);
+          },
+        ),
+      ],
+    );
+  }
+}