✨ feat/#4: add app bar

- add select address view - add app bar actions Signed-off-by: EunJiJung <bianbbc87@gmail.com>
DguFarmSystem · Sep 26, 2024 · f0bea57 · f0bea57
1 parent 01a08c6
commit f0bea57
Show file tree

Hide file tree

Showing 7 changed files with 147 additions and 22 deletions.
diff --git a/assets/icons/app_bar_arrow_dropdown.svg b/assets/icons/app_bar_arrow_dropdown.svg
diff --git a/assets/icons/app_bar_basket.svg b/assets/icons/app_bar_basket.svg
diff --git a/assets/icons/app_bar_cancel.svg b/assets/icons/app_bar_cancel.svg
diff --git a/lib/app/config/font_system.dart b/lib/app/config/font_system.dart
@@ -28,6 +28,14 @@ abstract class FontSystem {
     height: 1.2,
   );
 
+  static const TextStyle ThinH4 = TextStyle(
+    fontSize: 18,
+    fontWeight: FontWeight.w400,
+    fontFamily: AppConfig.APP_FONT_STYLE,
+    color: Colors.black,
+    height: 1.333,
+  );
+
   static const TextStyle H4 = TextStyle(
     fontSize: 18,
     fontWeight: FontWeight.w700,
@@ -52,6 +60,14 @@ abstract class FontSystem {
     height: 1.25,
   );
 
+  static const TextStyle APPBAR = TextStyle(
+    fontSize: 16,
+    fontWeight: FontWeight.w400,
+    fontFamily: AppConfig.APP_FONT_STYLE,
+    color: Colors.black,
+    height: 1.25,
+  );
+
   static const TextStyle Sub1 = TextStyle(
     fontSize: 14,
     fontWeight: FontWeight.w700,

diff --git a/lib/presentation/view/home/home_screen.dart b/lib/presentation/view/home/home_screen.dart
@@ -26,7 +26,6 @@ class HomeScreen extends BaseScreen<HomeFoodCategoryViewModel>{
     return Column(
         crossAxisAlignment: CrossAxisAlignment.start,
         children: [
-          const SizedBox(height: 20),
           Center(
             child: HomeTypeToggleButton(),
           ),

diff --git a/lib/presentation/view/root/root_screen.dart b/lib/presentation/view/root/root_screen.dart
@@ -1,4 +1,9 @@
+import 'package:farm04_modeul/app/config/color_system.dart';
+import 'package:farm04_modeul/app/config/font_system.dart';
+import 'package:farm04_modeul/app/utility/log_util.dart';
 import 'package:farm04_modeul/presentation/view/home/home_screen.dart';
+import 'package:farm04_modeul/presentation/widget/appbar/custom_icon_app_bar.dart';
+import 'package:farm04_modeul/presentation/widget/image/svg_image_box.dart';
 import 'package:flutter/material.dart';
 import 'package:get/get.dart';
 import 'package:farm04_modeul/core/view/base_screen.dart';
@@ -12,6 +17,94 @@ class RootScreen extends BaseScreen<RootViewModel> {
   @override
   bool get extendBodyBehindAppBar => true;
 
+  @override
+  PreferredSizeWidget? buildAppBar(BuildContext context) {
+    return PreferredSize(
+      preferredSize: const Size.fromHeight(50),
+      child: Obx(() {
+        // 홈 화면의 경우
+        List<Widget> actions = viewModel.selectedIndex == 0
+            ? [
+          IconButton(
+            icon: SvgImageBox(
+              assetPath: 'assets/icons/app_bar_basket.svg',
+              width: 30,
+              height: 25,
+              color: ColorSystem.black,
+            ),
+            onPressed: () {
+              LogUtil.info("open basket");
+            },
+          ),
+          IconButton(
+            icon: SvgImageBox(
+              assetPath: 'assets/icons/app_bar_cancel.svg',
+              width: 18,
+              height: 18,
+              color: ColorSystem.black,
+            ),
+            onPressed: () {
+              LogUtil.info("out this service");
+            },
+          ),
+          const SizedBox(width: 6),
+        ]
+            : [
+              // 이외의 경우 장바구니 아이콘 삭제
+          IconButton(
+            icon: SvgImageBox(
+              assetPath: 'assets/icons/app_bar_cancel.svg',
+              width: 18,
+              height: 18,
+              color: ColorSystem.black,
+            ),
+            onPressed: () {
+              LogUtil.info("out this service");
+            },
+          ),
+        ];
+
+        if (viewModel.selectedIndex == 0) {
+          return CustomIconAppBar(
+            actions: actions,
+            selectedAddress: '갈산동 362 하나아파트 303호',
+          );
+        } else {
+          return Container(
+            // 홈, 찜을 제외하고 border 추가
+            decoration: (viewModel.selectedIndex == 2 || viewModel.selectedIndex == 3)
+                ? BoxDecoration(
+              border: Border(
+                bottom: BorderSide(
+                  color: ColorSystem.neutral.shade200,
+                  width: 1,
+                ),
+              ),
+            )
+                : null,
+            child: AppBar(
+              title: Center(
+                child: Text(
+                  viewModel.selectedIndex == 1
+                      ? '찜'
+                      : viewModel.selectedIndex == 2
+                      ? 'MY 배달'
+                      : '주문 내역',
+                  style: FontSystem.ThinH4,
+                ),
+              ),
+              surfaceTintColor: Colors.white,
+              backgroundColor: Colors.white,
+              automaticallyImplyLeading: false,
+              centerTitle: false,
+              actions: actions,
+            ),
+          );
+        }
+      }),
+    );
+  }
+
   @override
   Widget buildBody(BuildContext context) {
     return Obx(

diff --git a/lib/presentation/widget/appbar/custom_icon_app_bar.dart b/lib/presentation/widget/appbar/custom_icon_app_bar.dart
@@ -1,40 +1,48 @@
+import 'package:farm04_modeul/app/config/app_routes.dart';
+import 'package:farm04_modeul/app/config/font_system.dart';
+import 'package:farm04_modeul/presentation/widget/image/svg_image_box.dart';
 import 'package:flutter/material.dart';
-import 'package:flutter_svg/svg.dart';
 import 'package:farm04_modeul/app/config/color_system.dart';
+import 'package:get/get.dart';
 
 class CustomIconAppBar extends StatelessWidget {
   const CustomIconAppBar({
     super.key,
-    required this.svgPath,
-    required this.svgWidth,
-    required this.svgHeight,
     this.actions = const <Widget>[],
+    required this.selectedAddress,
   });
 
-  final String svgPath;
-  final double svgWidth;
-  final double svgHeight;
   final List<Widget> actions;
+  final String selectedAddress;
 
   @override
   Widget build(BuildContext context) {
     return Container(
-      decoration: BoxDecoration(
-        border: Border(
-          bottom: BorderSide(
-            color: ColorSystem.neutral.shade200,
-            width: 1,
-          ),
-        ),
-      ),
       child: AppBar(
-        title: Padding(
-          padding: const EdgeInsets.only(left: 4.0),
-          child: SvgPicture.asset(
-            svgPath,
-            width: svgWidth,
-            height: svgHeight,
+        title: Row(
+          children: [
+            Text(
+            selectedAddress, // 선택된 주소 표시
+            style: FontSystem.APPBAR,
           ),
+            const SizedBox(width: 16),
+            GestureDetector(
+              onTap: () {
+                Get.toNamed(
+                  AppRoutes.ROOT,
+                  arguments: {
+                    'address': selectedAddress, // 나중에 주소 선택 창으로 이동
+                  },
+                );
+              },
+              child: SvgImageBox(
+                assetPath: 'assets/icons/app_bar_arrow_dropdown.svg',
+                width: 10,
+                height: 8,
+                color: ColorSystem.black,
+              ),
+            ),
+          ],
         ),
         surfaceTintColor: Colors.white,
         backgroundColor: Colors.white,