task: category screen full skeletion

lib/views/main/category.dart

@@ -1,6 +1,10 @@
 import 'package:flutter/material.dart';
-
 import '../../constants/colors.dart';
+import 'product_categories/children.dart';
+import 'product_categories/men.dart';
+import 'product_categories/others.dart';
+import 'product_categories/sneakers.dart';
+import 'product_categories/women.dart';
 
 class CategoryScreen extends StatefulWidget {
   const CategoryScreen({Key? key}) : super(key: key);
@@ -10,6 +14,63 @@ class CategoryScreen extends StatefulWidget {
 }
 
 class _CategoryScreenState extends State<CategoryScreen> {
+  var currentCategory = 0;
+  var categories = [
+    {'title': 'Men', 'img': 'assets/images/category_imgs/men.png'},
+    {'title': 'Women', 'img': 'assets/images/category_imgs/women.png'},
+    {'title': 'Children', 'img': 'assets/images/category_imgs/children.png'},
+    {'title': 'Sneakers', 'img': 'assets/images/category_imgs/sneakers.png'},
+    {'title': 'Others', 'img': 'assets/images/category_imgs/other.png'}
+  ];
+
+  final categoriesList = const [
+    MenWears(),
+    WomenWears(),
+    ChildrenWears(),
+    Sneakers(),
+    Others(),
+  ];
+
+
+  Widget kCategoryContainer(
+    String text,
+    String imgUrl,
+    int index,
+  ) {
+    return GestureDetector(
+      onTap: () => setState(() {
+        currentCategory = index;
+      }),
+      child: Container(
+          margin: const EdgeInsets.symmetric(vertical: 20),
+          padding: const EdgeInsets.all(10),
+          // height: 40,
+          width: 40,
+          decoration: BoxDecoration(
+            borderRadius: BorderRadius.circular(10),
+            color: currentCategory == index ? Colors.white : Colors.transparent,
+          ),
+          child: Column(
+            children: [
+              Image.asset(
+                imgUrl,
+
+                fit: BoxFit.cover,
+              ),
+              const SizedBox(height: 5),
+              Text(
+                text,
+                style: TextStyle(
+                  fontWeight: currentCategory == index
+                      ? FontWeight.w600
+                      : FontWeight.w500,
+                ),
+              )
+            ],
+          )),
+    );
+  }
+
   @override
   Widget build(BuildContext context) {
     Size size = MediaQuery.of(context).size;
@@ -42,6 +103,7 @@ class _CategoryScreenState extends State<CategoryScreen> {
               SizedBox(
                 width: size.width / 1.25,
                 height: size.height * 0.83,
+                child: categoriesList[currentCategory]
               ),
               Container(
                 width: size.width / 5,
@@ -50,6 +112,15 @@ class _CategoryScreenState extends State<CategoryScreen> {
                   color: litePrimary.withOpacity(0.1),
                   borderRadius: BorderRadius.circular(5),
                 ),
+                child: ListView.builder(
+                  padding: const EdgeInsets.symmetric(vertical: 5),
+                  itemCount: categories.length,
+                  itemBuilder: (context, index) => kCategoryContainer(
+                    categories[index]['title']!,
+                    categories[index]['img']!,
+                    index,
+                  ),
+                ),
               ),
             ],
           )

lib/views/main/home.dart

@@ -1,10 +1,10 @@
 import 'package:flutter/material.dart';
 import 'package:multivendor_shop/constants/colors.dart';
-import 'product_categories/children.dart';
-import 'product_categories/men.dart';
-import 'product_categories/others.dart';
-import 'product_categories/sneakers.dart';
-import 'product_categories/women.dart';
+import 'home_product_categories/children.dart';
+import 'home_product_categories/men.dart';
+import 'home_product_categories/others.dart';
+import 'home_product_categories/sneakers.dart';
+import 'home_product_categories/women.dart';
 import '../../components/search_box.dart';
 import 'package:carousel_slider/carousel_slider.dart';
 

lib/views/main/home_product_categories/children.dart

@@ -0,0 +1,9 @@
+import 'package:flutter/material.dart';
+class ChildrenWears extends StatelessWidget {
+  const ChildrenWears({Key? key}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return Center(child: Text('Children Wears'),);
+  }
+}

lib/views/main/home_product_categories/men.dart

@@ -0,0 +1,9 @@
+import 'package:flutter/material.dart';
+class MenWears extends StatelessWidget {
+  const MenWears({Key? key}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return Center(child: Text('Men Wears'),);
+  }
+}

lib/views/main/home_product_categories/others.dart

@@ -0,0 +1,9 @@
+import 'package:flutter/material.dart';
+class Others extends StatelessWidget {
+  const Others({Key? key}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return Center(child: Text('Others'),);
+  }
+}

lib/views/main/home_product_categories/sneakers.dart

@@ -0,0 +1,9 @@
+import 'package:flutter/material.dart';
+class Sneakers extends StatelessWidget {
+  const Sneakers({Key? key}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return Center(child: Text('Sneakers'),);
+  }
+}

lib/views/main/home_product_categories/women.dart

@@ -0,0 +1,9 @@
+import 'package:flutter/material.dart';
+class WomenWears extends StatelessWidget {
+  const WomenWears({Key? key}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return Center(child: Text('Women Wears'),);
+  }
+}

pubspec.yaml

@@ -79,6 +79,7 @@ flutter:
   assets:
     - assets/images/
     - assets/images/slides/
+    - assets/images/category_imgs/
   #   - images/a_dot_ham.jpeg
 
   # An image asset can refer to one or more resolution-specific "variants", see