home page updated

Author: shaileshmishra

lib/src/view/home_page.dart

@@ -32,9 +32,9 @@ class _HomePageState extends State<HomePage> {
 
   Container buildCategoryListView() {
     return Container(
-      height: 210,
+      height: 150,
       width: double.infinity,
-      child: buildProductListView(),
+      child: renderProductCategories(),
     );
   }
 
@@ -121,7 +121,7 @@ class _HomePageState extends State<HomePage> {
     );
   }
 
-  ListView buildProductListView() {
+  ListView renderProductCategories() {
     return ListView.builder(
         padding: EdgeInsets.only(left: 0),
         itemCount: productList.length,
@@ -136,7 +136,7 @@ class _HomePageState extends State<HomePage> {
                             product: productList[index],
                           ))),
             },
-            child: Container(width: 300, child: buildCardGrid(index)),
+            child: Container(width: 100, child: buildCardGrid(index)),
           );
         });
   }
@@ -168,22 +168,29 @@ class _HomePageState extends State<HomePage> {
   Card buildCardGrid(int index) {
     return Card(
       elevation: 0,
+      color: productList[index].color,
       child: new GridTile(
         footer: Padding(
-            padding: EdgeInsets.all(10),
+            padding: EdgeInsets.all(6),
             child: Row(
               mainAxisAlignment: MainAxisAlignment.spaceBetween,
               children: [
-                Text(productList[index].title),
+                Text(
+                  productList[index].title,
+                  style: TextStyle(fontSize: 10),
+                ),
                 CircleAvatar(
                   backgroundColor: productList[index].color,
-                  radius: 10,
+                  radius: 8,
                 )
               ],
             )),
         child: Padding(
           padding: EdgeInsets.all(10),
-          child: Image.asset(productList[index].image),
+          child: Image.asset(
+            productList[index].image,
+            fit: BoxFit.contain,
+          ),
         ), //just for testing, will fill with image later
       ),
     );

lib/src/view/payment_gateway.dart

@@ -1,3 +1,4 @@
+import 'package:flutter/cupertino.dart';
 import 'package:flutter/material.dart';
 import 'package:google_fonts/google_fonts.dart';
 import 'package:jin_ecomm/src/utils/text_util.dart';
@@ -27,71 +28,75 @@ class PaymentGateway extends StatelessWidget {
     }
 
     return Scaffold(
-      appBar: AppBar(
-        elevation: 0,
-        backgroundColor: Colors.grey.shade300,
-        title: Text("Payment gateway", style: GoogleFonts.alatsi(
-          fontSize: 20,
-          color: Colors.black87,
-          fontWeight: FontWeight.bold,
-        ),),
-        centerTitle: true,
-        leading: GestureDetector(
-          onTap: ()=>{
-            Navigator.pop(context)
-          },
-            child: Icon(Icons.arrow_back_ios)),
-      ),
+      appBar: buildAppBar(context),
       body: Container(
-        padding: EdgeInsets.all(12),
+        padding: EdgeInsets.only(top: 0, left: 10, right: 10),
         child: Column(
           crossAxisAlignment: CrossAxisAlignment.start,
           children: [
-            SizedBox(
-              height: 20,
-            ),
             Expanded(
                 child: ListView.builder(
                     itemCount: _getPaymentCards().length,
                     itemBuilder: (BuildContext context, int index) {
                       return Card(
-                        color: Colors.grey.shade200,
+                        color: Colors.grey.shade400,
                         child: Padding(
-                          padding: EdgeInsets.all(10),
-                          child: Row(
-                            mainAxisAlignment: MainAxisAlignment.spaceBetween,
-                            children: [
-
-                              Column(
-                                crossAxisAlignment: CrossAxisAlignment.start,
-                                children: [
-                                  Text(
-                                    _getPaymentCards()[index].title,
-                                    style: largeText,
-                                  ),
-                                  Text(
-                                    "Pay bill using ${_getPaymentCards()[index].title}",
-                                    style: smallText,
-                                  ),
-                                ],
-                              ),
-
-                              CircleAvatar(
-                                radius: 60,
-                                backgroundColor: Colors.pink,
-                                child: Image.asset(_getPaymentCards()[index].image),
-                              )
-
-                            ],
-                          )
-                        ),
+                            padding: EdgeInsets.all(8),
+                            child: Row(
+                              mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                              children: [
+                                Column(
+                                  crossAxisAlignment: CrossAxisAlignment.start,
+                                  children: [
+                                    Text(
+                                      _getPaymentCards()[index].title,
+                                      style: TextStyle(
+                                          fontSize: 14,
+                                          fontWeight: FontWeight.bold),
+                                    ),
+                                    Text(
+                                      "Pay bill using ${_getPaymentCards()[index].title}",
+                                      style: smallText,
+                                    ),
+                                  ],
+                                ),
+                                CircleAvatar(
+                                  radius: 20,
+                                  backgroundColor: Colors.pink,
+                                  child: Image.asset(
+                                      _getPaymentCards()[index].image),
+                                )
+                              ],
+                            )),
                       );
                     }))
           ],
         ),
       ),
     );
   }
+
+  AppBar buildAppBar(BuildContext context) {
+    return AppBar(
+      elevation: 0,
+      backgroundColor: Colors.grey.shade200,
+      title: Text(
+        "PAYMENT",
+        style: GoogleFonts.lato(
+          fontSize: 20,
+          color: Colors.black87,
+          fontWeight: FontWeight.bold,
+        ),
+      ),
+      centerTitle: true,
+      leading: GestureDetector(
+          onTap: () => {Navigator.pop(context)},
+          child: Icon(
+            CupertinoIcons.back,
+            color: Colors.black38,
+          )),
+    );
+  }
 }
 
 class PayCard {