✨ feat/#4: feat food category list in home view

- design food category list grid composition - add food category viewModel list object and get method - add food category dummy date for initialization - add tap event when clicking on items Signed-off-by: EunJiJung <bianbbc87@gmail.com>
DguFarmSystem · Sep 23, 2024 · 42bddae · 42bddae
1 parent 6f19b1b
commit 42bddae
Show file tree

Hide file tree

Showing 8 changed files with 138 additions and 12 deletions.
diff --git a/assets/icons/empty_leaf.svg b/assets/icons/empty_leaf.svg
diff --git a/assets/icons/home_list_chicken_icon.svg b/assets/icons/home_list_chicken_icon.svg
diff --git a/lib/app/config/app_routes.dart b/lib/app/config/app_routes.dart
@@ -3,4 +3,5 @@
 abstract class AppRoutes {
   static const String ROOT = '/';
   static const String HOME = '/home';
+  static const String HOME_LIST_DETAIL = '/home-list-detail';
 }
diff --git a/lib/app/config/font_system.dart b/lib/app/config/font_system.dart
@@ -83,4 +83,12 @@ abstract class FontSystem {
     color: Colors.black,
     height: 1.667,
   );
+
+  static const TextStyle Sub4Bold = TextStyle(
+    fontSize: 10,
+    fontWeight: FontWeight.w700,
+    fontFamily: AppConfig.APP_FONT_STYLE,
+    color: Colors.black,
+    height: 1.5,
+  );
 }
diff --git a/lib/presentation/view/home/home_screen.dart b/lib/presentation/view/home/home_screen.dart
@@ -3,6 +3,7 @@ import 'package:farm04_modeul/app/config/color_system.dart';
 import 'package:farm04_modeul/presentation/view/home/widget/home_food_category_list_view.dart';
 import 'package:farm04_modeul/presentation/view_model/home/home_view_model.dart';
 import 'package:farm04_modeul/presentation/view/home/widget/component/home_type_toggle_button.dart';
+import 'package:farm04_modeul/presentation/widget/image/svg_image_box.dart';
 import 'package:flutter/cupertino.dart';
 import 'package:flutter/material.dart';
 import 'package:get/get.dart';

diff --git a/lib/presentation/view/home/widget/component/home_food_category_item.dart b/lib/presentation/view/home/widget/component/home_food_category_item.dart
@@ -0,0 +1,37 @@
+import 'package:farm04_modeul/app/config/color_system.dart';
+import 'package:farm04_modeul/app/config/font_system.dart';
+import 'package:farm04_modeul/presentation/view_model/home/home_view_model.dart';
+import 'package:farm04_modeul/presentation/widget/image/svg_image_box.dart';
+import 'package:flutter/cupertino.dart';
+
+class HomeFoodCategoryItem extends StatelessWidget {
+  const HomeFoodCategoryItem({
+    super.key,
+    required this.state,
+    required this.onTap,
+  });
+
+  final HomeFoodCategoryItemState state;
+  final Function() onTap;
+
+  @override
+  Widget build(BuildContext context) {
+    return GestureDetector(
+      onTap: onTap,
+      child: Column(
+        children: [
+          SvgImageBox(
+              assetPath: state.assetsPath,
+              width: 45,
+              height: 45,
+              color: ColorSystem.primary.shade500
+          ),
+          Text(
+            state.name,
+            style: FontSystem.Sub4Bold,
+          )
+        ],
+      ),
+    );
+  }
+}
diff --git a/lib/presentation/view/home/widget/home_food_category_list_view.dart b/lib/presentation/view/home/widget/home_food_category_list_view.dart
@@ -1,17 +1,40 @@
+import 'package:farm04_modeul/app/config/app_routes.dart';
 import 'package:farm04_modeul/core/view/base_widget.dart';
+import 'package:farm04_modeul/presentation/view/home/widget/component/home_food_category_item.dart';
 import 'package:farm04_modeul/presentation/view_model/home/home_view_model.dart';
 import 'package:flutter/cupertino.dart';
 import 'package:flutter/material.dart';
+import 'package:get/get.dart';
 
 class HomeFoodCategoryListView extends BaseWidget<HomeViewModel>{
   const HomeFoodCategoryListView({super.key});
 
   @override
   Widget buildView(BuildContext context) {
-    return Scaffold(
-      body: Center(
-        child: const Text('This is the Home Food Category List View!'),
-      ),
-    ); /// 임시 scaffold
+    return Obx(
+        () {
+          List<HomeFoodCategoryItemState> items = viewModel.homeFoodCategoryOverviewList;
+
+          return GridView.builder(
+              padding: EdgeInsets.symmetric(horizontal: 0),
+              gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
+                  crossAxisCount: 5, mainAxisSpacing: 5),
+              itemCount: items.length,
+              itemBuilder: (context, index) {
+                return HomeFoodCategoryItem(
+                  state: items[index],
+                  onTap: () {
+                    Get.toNamed(
+                      AppRoutes.HOME_LIST_DETAIL,
+                      arguments: {
+                        'id': items[index].id,
+                      }
+                    );
+                  },
+                );
+              }
+          );
+        }
+    );
   }
 }
diff --git a/lib/presentation/view_model/home/home_view_model.dart b/lib/presentation/view_model/home/home_view_model.dart
@@ -1,6 +1,18 @@
 import 'package:farm04_modeul/app/utility/log_util.dart';
 import 'package:get/get.dart';
 
+class HomeFoodCategoryItemState {
+  final int id;
+  final String name;
+  final String assetsPath;
+
+  HomeFoodCategoryItemState({
+    required this.id,
+    required this.name,
+    required this.assetsPath
+  });
+}
+
 class HomeViewModel extends GetxController {
   /* ------------------------------------------------------ */
   /* Static Fields ---------------------------------------- */
@@ -13,12 +25,14 @@ class HomeViewModel extends GetxController {
   /* ------------------------------------------------------ */
   /* Private Fields --------------------------------------- */
   /* ------------------------------------------------------ */
-  RxInt _selectedTypeToggleIndex = RxInt(-1); /// viewModel 값 업데이트를 위해 RxInt 값 이용
+  late RxInt _selectedTypeToggleIndex = RxInt(-1); /// viewModel 값 업데이트를 위해 RxInt 값 이용
+  late final RxList<HomeFoodCategoryItemState> _homeFoodCategoryOverviewList;
 
   /* ------------------------------------------------------ */
   /* Public Fields ---------------------------------------- */
   /* ------------------------------------------------------ */
   int get selectedTypeToggleIndex => _selectedTypeToggleIndex.value; /// getter method
+  List<HomeFoodCategoryItemState> get homeFoodCategoryOverviewList => _homeFoodCategoryOverviewList;
 
   /* ------------------------------------------------------ */
   /* Method ----------------------------------------------- */
@@ -29,17 +43,13 @@ class HomeViewModel extends GetxController {
     super.onInit();
 
     _selectedTypeToggleIndex = RxInt(-1);
+    _homeFoodCategoryOverviewList = <HomeFoodCategoryItemState>[].obs;
   }
 
   @override
   void onReady() {
     super.onReady();
-    _fetchHomeFoodCategoryListInformation();
-  }
-
-  // food category 목록 정보 가져오기
-  void _fetchHomeFoodCategoryListInformation() async {
-
+    _updateFoodCategoryData();
   }
 
   // toggle select 변경하기
@@ -49,4 +59,29 @@ class HomeViewModel extends GetxController {
       "changed seletedTypeToggleIndex to ${index}",
     );
   }
+  // food category list 데이터 업데이트
+  void _updateFoodCategoryData() async {
+    List<HomeFoodCategoryItemState> data = [
+      HomeFoodCategoryItemState(id: 1, name: '전체', assetsPath: 'assets/icons/home_list_chicken_icon.svg'),
+      HomeFoodCategoryItemState(id: 2, name: '치킨', assetsPath: 'assets/icons/home_list_chicken_icon.svg'),
+      HomeFoodCategoryItemState(id: 3, name: '피자', assetsPath: 'assets/icons/home_list_chicken_icon.svg'),
+      HomeFoodCategoryItemState(id: 4, name: '한식', assetsPath: 'assets/icons/home_list_chicken_icon.svg'),
+      HomeFoodCategoryItemState(id: 5, name: '분식', assetsPath: 'assets/icons/home_list_chicken_icon.svg'),
+      HomeFoodCategoryItemState(id: 6, name: '족발/보쌈', assetsPath: 'assets/icons/home_list_chicken_icon.svg'),
+      HomeFoodCategoryItemState(id: 7, name: '중식', assetsPath: 'assets/icons/home_list_chicken_icon.svg'),
+      HomeFoodCategoryItemState(id: 8, name: '돈까스/회/일식', assetsPath: 'assets/icons/home_list_chicken_icon.svg'),
+      HomeFoodCategoryItemState(id: 9, name: '패스트푸드', assetsPath: 'assets/icons/home_list_chicken_icon.svg'),
+      HomeFoodCategoryItemState(id: 10, name: '카페/디저트', assetsPath: 'assets/icons/home_list_chicken_icon.svg'),
+      HomeFoodCategoryItemState(id: 11, name: '아시안/양식', assetsPath: 'assets/icons/home_list_chicken_icon.svg'),
+      HomeFoodCategoryItemState(id: 12, name: '야식', assetsPath: 'assets/icons/home_list_chicken_icon.svg'),
+      HomeFoodCategoryItemState(id: 13, name: '도시락', assetsPath: 'assets/icons/home_list_chicken_icon.svg'),
+      HomeFoodCategoryItemState(id: 14, name: '브랜드관', assetsPath: 'assets/icons/home_list_chicken_icon.svg'),
+      HomeFoodCategoryItemState(id: 15, name: '전통시장', assetsPath: 'assets/icons/home_list_chicken_icon.svg'),
+      HomeFoodCategoryItemState(id: 16, name: '부평특별관', assetsPath: 'assets/icons/home_list_chicken_icon.svg'),
+      HomeFoodCategoryItemState(id: 17, name: '외식업특별관', assetsPath: 'assets/icons/home_list_chicken_icon.svg'),
+    ];
+
+    _homeFoodCategoryOverviewList.clear(); /// 데이터 초기화
+    _homeFoodCategoryOverviewList.addAll(data);
+  }
 }