task: product details

Atuoha · Oct 7, 2022 · d6c4100 · d6c4100
1 parent f863654
commit d6c4100
Show file tree

Hide file tree

Showing 15 changed files with 160 additions and 52 deletions.
diff --git a/lib/utilities/k_gridview.dart → lib/utilities/category_gridview.dart b/lib/utilities/k_gridview.dart → lib/utilities/category_gridview.dart
@@ -2,8 +2,8 @@ import 'package:flutter/material.dart';
 import '../constants/colors.dart';
 import '../views/main/sub_category/sub_category.dart';
 
-class KGridView extends StatelessWidget {
-  const KGridView({
+class CategoryGridView extends StatelessWidget {
+  const CategoryGridView({
     Key? key,
     required this.categories,
     required this.category,

diff --git a/lib/utilities/k_stream_builder.dart → lib/utilities/products_stream_builder.dart b/lib/utilities/k_stream_builder.dart → lib/utilities/products_stream_builder.dart
@@ -4,8 +4,8 @@ import 'package:multivendor_shop/views/main/product/details.dart';
 import '../components/loading.dart';
 import '../constants/colors.dart';
 
-class KStreamBuilder extends StatelessWidget {
-  const KStreamBuilder({
+class ProductStreamBuilder extends StatelessWidget {
+  const ProductStreamBuilder({
     Key? key,
     required this.productStream,
   }) : super(key: key);
@@ -80,7 +80,7 @@ class KStreamBuilder extends StatelessWidget {
                 onTap: () => Navigator.of(context).push(
                   MaterialPageRoute(
                     builder: (context) => DetailsScreen(
-                      productId: data.id,
+                      product: data,
                     ),
                   ),
                 ),

diff --git a/lib/views/main/categories/children.dart b/lib/views/main/categories/children.dart
@@ -1,5 +1,5 @@
 import 'package:flutter/material.dart';
-import '../../../utilities/k_gridview.dart';
+import '../../../utilities/category_gridview.dart';
 
 class ChildrenCategories extends StatelessWidget {
   const ChildrenCategories({Key? key}) : super(key: key);
@@ -35,7 +35,7 @@ class ChildrenCategories extends StatelessWidget {
         const SizedBox(height: 10),
         SizedBox(
           height: size.height * 0.73,
-          child: KGridView(
+          child: CategoryGridView(
             categories: categories,
             category: category,
             imageLocation: imageLocation,

diff --git a/lib/views/main/categories/men.dart b/lib/views/main/categories/men.dart
@@ -1,5 +1,5 @@
 import 'package:flutter/material.dart';
-import '../../../utilities/k_gridview.dart';
+import '../../../utilities/category_gridview.dart';
 
 class MenCategories extends StatelessWidget {
   const MenCategories({Key? key}) : super(key: key);
@@ -36,7 +36,7 @@ class MenCategories extends StatelessWidget {
         const SizedBox(height: 10),
         SizedBox(
           height: size.height * 0.73,
-          child: KGridView(
+          child: CategoryGridView(
             categories: categories,
             category: category,
             imageLocation: imageLocation,

diff --git a/lib/views/main/categories/other.dart b/lib/views/main/categories/other.dart
@@ -1,5 +1,5 @@
 import 'package:flutter/material.dart';
-import '../../../utilities/k_gridview.dart';
+import '../../../utilities/category_gridview.dart';
 
 class OtherCategories extends StatelessWidget {
   const OtherCategories({Key? key}) : super(key: key);
@@ -34,7 +34,7 @@ class OtherCategories extends StatelessWidget {
         const SizedBox(height: 10),
         SizedBox(
           height: size.height * 0.73,
-          child: KGridView(
+          child: CategoryGridView(
             categories: categories,
             category: category,
             imageLocation: imageLocation,

diff --git a/lib/views/main/categories/sneakers.dart b/lib/views/main/categories/sneakers.dart
@@ -1,5 +1,5 @@
 import 'package:flutter/material.dart';
-import '../../../utilities/k_gridview.dart';
+import '../../../utilities/category_gridview.dart';
 
 class SneakersCategories extends StatelessWidget {
   const SneakersCategories({Key? key}) : super(key: key);
@@ -32,7 +32,7 @@ class SneakersCategories extends StatelessWidget {
         const SizedBox(height: 10),
         SizedBox(
           height: size.height * 0.73,
-          child: KGridView(
+          child: CategoryGridView(
             categories: categories,
             category: category,
             imageLocation: imageLocation,

diff --git a/lib/views/main/categories/women.dart b/lib/views/main/categories/women.dart
@@ -1,5 +1,5 @@
 import 'package:flutter/material.dart';
-import '../../../utilities/k_gridview.dart';
+import '../../../utilities/category_gridview.dart';
 
 class WomenCategories extends StatelessWidget {
   const WomenCategories({Key? key}) : super(key: key);
@@ -35,7 +35,7 @@ class WomenCategories extends StatelessWidget {
         const SizedBox(height: 10),
         SizedBox(
           height: size.height * 0.73,
-          child: KGridView(
+          child: CategoryGridView(
             categories: categories,
             category: category,
             imageLocation: imageLocation,

diff --git a/lib/views/main/product/details.dart b/lib/views/main/product/details.dart
@@ -1,46 +1,33 @@
 import 'package:cloud_firestore/cloud_firestore.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter/services.dart';
+import 'package:multivendor_shop/components/loading.dart';
 import '../../../constants/colors.dart';
+import 'package:flutter_swiper_null_safety/flutter_swiper_null_safety.dart';
 
 class DetailsScreen extends StatefulWidget {
   const DetailsScreen({
     Key? key,
-    required this.productId,
+    required this.product,
   }) : super(key: key);
-  final String productId;
+  final dynamic product;
 
   @override
   State<DetailsScreen> createState() => _DetailsScreenState();
 }
 
 class _DetailsScreenState extends State<DetailsScreen> {
-  var firebase = FirebaseFirestore.instance;
-  var isInit = true;
-  var isLoading = true;
-  var productDetails;
-
-  _fetchDetails() {
-    var details = firebase.collection('products').doc(widget.productId).get();
+  // toggle isFav
+  void toggleIsFav(bool status, var id) {
+    final db = FirebaseFirestore.instance.collection('products').doc(id);
     setState(() {
-      productDetails = details;
-      isLoading = false;
-      isInit = false;
+      db.update({'isFav': !status});
     });
   }
 
-  @override
-  void initState() {
-    super.initState();
-  }
-
-  @override
-  void didChangeDependencies() {
-    if (isInit) {
-      _fetchDetails();
-    }
-
-    super.didChangeDependencies();
+  // add to cart
+  void addToCart() {
+    // TODO: Implement add to cart
   }
 
   @override
@@ -55,13 +42,126 @@ class _DetailsScreenState extends State<DetailsScreen> {
         statusBarBrightness: Brightness.dark,
       ),
     );
+
+    var product = widget.product;
     return Scaffold(
+      floatingActionButton: FloatingActionButton.extended(
+        elevation: 4,
+        backgroundColor: primaryColor,
+        onPressed: () => addToCart(),
+        label: const Text(
+          'Add to cart',
+          style: TextStyle(
+            color: Colors.white,
+          ),
+        ),
+        icon: const Icon(
+          Icons.shopping_cart_outlined,
+          color: Colors.white,
+        ),
+      ),
+      extendBodyBehindAppBar: true,
+      appBar: AppBar(
+        elevation: 0,
+        backgroundColor: Colors.transparent,
+        automaticallyImplyLeading: false,
+        leading: Builder(
+          builder: (context) {
+            return GestureDetector(
+              onTap: () => Navigator.of(context).pop(),
+              child: const Icon(
+                Icons.chevron_left,
+                color: primaryColor,
+                size: 35,
+              ),
+            );
+          },
+        ),
+        actions: [
+          GestureDetector(
+            onTap: () => toggleIsFav(product['isFav'], product.id),
+            child: Padding(
+              padding: const EdgeInsets.only(right: 18.0),
+              child: Icon(
+                product['isFav'] ? Icons.favorite : Icons.favorite_border,
+                color: Colors.redAccent,
+                size: 35,
+              ),
+            ),
+          ),
+        ],
+      ),
       body: Column(
+        crossAxisAlignment: CrossAxisAlignment.start,
         children: [
           Container(
-            height: size.height / 3,
-            color:primaryColor,
-          )
+            height: size.height / 2,
+            decoration: const BoxDecoration(
+              borderRadius: BorderRadius.only(
+                bottomRight: Radius.circular(20),
+                bottomLeft: Radius.circular(20),
+              ),
+            ),
+            child: Swiper(
+              autoplay: true,
+              pagination: const SwiperPagination(
+                builder: SwiperPagination.dots,
+              ),
+              itemCount: product['images'].length,
+              itemBuilder: (context, index) => Image.network(
+                product['images'][index],
+                fit: BoxFit.cover,
+              ),
+            ),
+          ),
+          const SizedBox(height: 20),
+          Padding(
+            padding: const EdgeInsets.symmetric(horizontal: 18.0),
+            child: Column(
+              crossAxisAlignment: CrossAxisAlignment.start,
+              children: [
+                Text(
+                  product['title'],
+                  style: const TextStyle(
+                    fontSize: 30,
+                    fontWeight: FontWeight.w600,
+                  ),
+                ),
+                Row(
+                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                  children: [
+                    RichText(
+                      text: TextSpan(
+                        text: 'Category: ',
+                        style: const TextStyle(color: Colors.black),
+                        children: [
+                          TextSpan(
+                            text: product['category'],
+                            style: const TextStyle(
+                              fontWeight: FontWeight.w500,
+                            ),
+                          ),
+                        ],
+                      ),
+                    ),
+                    Text('${product['quantity']} available')
+                  ],
+                ),
+                const SizedBox(height: 10),
+                Text(
+                  '\$${product['price']}',
+                  style: const TextStyle(
+                    fontSize: 25,
+                  ),
+                ),
+                const SizedBox(height: 10),
+                Text(
+                  product['description'],
+                  textAlign: TextAlign.justify,
+                )
+              ],
+            ),
+          ),
         ],
       ),
     );

diff --git a/lib/views/main/product_categories/children.dart b/lib/views/main/product_categories/children.dart
@@ -1,6 +1,6 @@
 import 'package:cloud_firestore/cloud_firestore.dart';
 import 'package:flutter/material.dart';
-import '../../../../utilities/k_stream_builder.dart';
+import '../../../../utilities/products_stream_builder.dart';
 
 class ChildrenWears extends StatelessWidget {
   const ChildrenWears({Key? key}) : super(key: key);
@@ -19,7 +19,7 @@ class ChildrenWears extends StatelessWidget {
       children: [
         SizedBox(
           height: size.height / 1.5,
-          child: KStreamBuilder(
+          child: ProductStreamBuilder(
             productStream: productStream,
           ),
         )

diff --git a/lib/views/main/product_categories/men.dart b/lib/views/main/product_categories/men.dart
@@ -1,6 +1,6 @@
 import 'package:cloud_firestore/cloud_firestore.dart';
 import 'package:flutter/material.dart';
-import '../../../../utilities/k_stream_builder.dart';
+import '../../../../utilities/products_stream_builder.dart';
 
 class MenWears extends StatelessWidget {
   const MenWears({Key? key}) : super(key: key);
@@ -19,7 +19,7 @@ class MenWears extends StatelessWidget {
       children: [
         SizedBox(
           height: size.height / 1.5,
-          child: KStreamBuilder(
+          child: ProductStreamBuilder(
             productStream: productStream,
           ),
         )

diff --git a/lib/views/main/product_categories/others.dart b/lib/views/main/product_categories/others.dart
@@ -2,7 +2,7 @@ import 'package:cloud_firestore/cloud_firestore.dart';
 import 'package:flutter/material.dart';
 import '../../../../components/loading.dart';
 import '../../../../constants/colors.dart';
-import '../../../../utilities/k_stream_builder.dart';
+import '../../../../utilities/products_stream_builder.dart';
 
 class Others extends StatelessWidget {
   const Others({Key? key}) : super(key: key);
@@ -21,7 +21,7 @@ class Others extends StatelessWidget {
       children: [
         SizedBox(
           height: size.height / 1.5,
-          child: KStreamBuilder(
+          child: ProductStreamBuilder(
             productStream: productStream,
           ),
         )

diff --git a/lib/views/main/product_categories/sneakers.dart b/lib/views/main/product_categories/sneakers.dart
@@ -2,7 +2,7 @@ import 'package:cloud_firestore/cloud_firestore.dart';
 import 'package:flutter/material.dart';
 import '../../../../components/loading.dart';
 import '../../../../constants/colors.dart';
-import '../../../../utilities/k_stream_builder.dart';
+import '../../../../utilities/products_stream_builder.dart';
 
 class Sneakers extends StatelessWidget {
   const Sneakers({Key? key}) : super(key: key);
@@ -21,7 +21,7 @@ class Sneakers extends StatelessWidget {
       children: [
         SizedBox(
           height: size.height / 1.5,
-          child: KStreamBuilder(
+          child: ProductStreamBuilder(
             productStream: productStream,
           ),
         )

diff --git a/lib/views/main/product_categories/women.dart b/lib/views/main/product_categories/women.dart
@@ -1,6 +1,6 @@
 import 'package:cloud_firestore/cloud_firestore.dart';
 import 'package:flutter/material.dart';
-import '../../../../utilities/k_stream_builder.dart';
+import '../../../../utilities/products_stream_builder.dart';
 
 class WomenWears extends StatelessWidget {
   const WomenWears({Key? key}) : super(key: key);
@@ -19,7 +19,7 @@ class WomenWears extends StatelessWidget {
       children: [
         SizedBox(
           height: size.height / 1.5,
-          child: KStreamBuilder(
+          child: ProductStreamBuilder(
             productStream: productStream,
           ),
         )

diff --git a/pubspec.lock b/pubspec.lock
@@ -237,6 +237,13 @@ packages:
       url: "https://pub.dartlang.org"
     source: hosted
     version: "2.0.7"
+  flutter_swiper_null_safety:
+    dependency: "direct main"
+    description:
+      name: flutter_swiper_null_safety
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "1.0.2"
   flutter_test:
     dependency: "direct dev"
     description: flutter