From ca74cc80a100db8194832b81f4ed8e376da2f72d Mon Sep 17 00:00:00 2001 From: maxxkim Date: Wed, 17 Apr 2024 18:33:30 +0300 Subject: [PATCH] feat(app): Created a navbar by new design and added logic for existing screens. --- assets/images/img_nav_bell.svg | 3 + ...ue_gray_400_24x25.svg => img_nav_chat.svg} | 0 .../images/{img_nav.svg => img_nav_diary.svg} | 0 assets/images/img_nav_feed.svg | 7 + assets/images/img_nav_logo.svg | 4 + lib/core/utils/image_constant.dart | 10 +- lib/widgets/custom_bottom_bar.dart | 139 +++++++++++------- 7 files changed, 111 insertions(+), 52 deletions(-) create mode 100644 assets/images/img_nav_bell.svg rename assets/images/{img_nav_blue_gray_400_24x25.svg => img_nav_chat.svg} (100%) rename assets/images/{img_nav.svg => img_nav_diary.svg} (100%) create mode 100644 assets/images/img_nav_feed.svg create mode 100644 assets/images/img_nav_logo.svg diff --git a/assets/images/img_nav_bell.svg b/assets/images/img_nav_bell.svg new file mode 100644 index 0000000..3304f0c --- /dev/null +++ b/assets/images/img_nav_bell.svg @@ -0,0 +1,3 @@ + + + diff --git a/assets/images/img_nav_blue_gray_400_24x25.svg b/assets/images/img_nav_chat.svg similarity index 100% rename from assets/images/img_nav_blue_gray_400_24x25.svg rename to assets/images/img_nav_chat.svg diff --git a/assets/images/img_nav.svg b/assets/images/img_nav_diary.svg similarity index 100% rename from assets/images/img_nav.svg rename to assets/images/img_nav_diary.svg diff --git a/assets/images/img_nav_feed.svg b/assets/images/img_nav_feed.svg new file mode 100644 index 0000000..5579477 --- /dev/null +++ b/assets/images/img_nav_feed.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/assets/images/img_nav_logo.svg b/assets/images/img_nav_logo.svg new file mode 100644 index 0000000..b4b27e7 --- /dev/null +++ b/assets/images/img_nav_logo.svg @@ -0,0 +1,4 @@ + + + + diff --git a/lib/core/utils/image_constant.dart b/lib/core/utils/image_constant.dart index 37113a3..ca6adbd 100644 --- a/lib/core/utils/image_constant.dart +++ b/lib/core/utils/image_constant.dart @@ -79,7 +79,15 @@ class ImageConstant { static String imgEllipse3 = '$imagePath/img_ellipse_3.png'; - static String imgNav = '$imagePath/img_nav.svg'; + static String imgDiary = '$imagePath/img_nav_diary.svg'; + + static String imgFeed = '$imagePath/img_nav_feed.svg'; + + static String imgChat = '$imagePath/img_nav_chat.svg'; + + static String imgLogo = '$imagePath/img_nav_logo.svg'; + + static String imgBell = '$imagePath/img_nav_bell.svg'; static String imgNavBlueGray400 = '$imagePath/img_nav_blue_gray_400.svg'; diff --git a/lib/widgets/custom_bottom_bar.dart b/lib/widgets/custom_bottom_bar.dart index cf1ecba..75457b5 100644 --- a/lib/widgets/custom_bottom_bar.dart +++ b/lib/widgets/custom_bottom_bar.dart @@ -1,5 +1,6 @@ import 'package:eatvio_app/core/app_export.dart'; import 'package:flutter/material.dart'; +import 'package:eatvio_app/widgets/app_bar/appbar_title_circleimage.dart'; // ignore: must_be_immutable class CustomBottomBar extends StatefulWidget { @@ -16,41 +17,45 @@ class CustomBottomBarState extends State { List bottomMenuList = [ BottomMenuModel( - icon: ImageConstant.imgNav, - activeIcon: ImageConstant.imgNav, - title: "diary".tr, - type: BottomBarEnum.tf, - ), - /*BottomMenuModel( - icon: ImageConstant.imgNavBlueGray400, - activeIcon: ImageConstant.imgNavBlueGray400, - title: "my_blog".tr, - type: BottomBarEnum.tf, - ),*/ + icon: ImageConstant.imgLogo, + activeIcon: ImageConstant.imgLogo, + type: BottomBarEnum.tf, + image: false), BottomMenuModel( - icon: ImageConstant.imgNavBlueGray40024x23, - activeIcon: ImageConstant.imgNavBlueGray40024x23, - title: "profile".tr, - type: BottomBarEnum.tf, - ), + icon: ImageConstant.imgFeed, + activeIcon: ImageConstant.imgFeed, + title: "Лента", + type: BottomBarEnum.tf, + image: false), BottomMenuModel( - icon: ImageConstant.imgNavPrimary, - activeIcon: ImageConstant.imgNavBlueGray40024x23, - title: "Настройки", - type: BottomBarEnum.tf, - ), + icon: ImageConstant.imgDiary, + activeIcon: ImageConstant.imgDiary, + title: "diary".tr, + type: BottomBarEnum.tf, + image: false), BottomMenuModel( - icon: ImageConstant.imgNavBlueGray40024x25, - activeIcon: ImageConstant.imgNavBlueGray40024x25, - title: "chat".tr, + icon: ImageConstant.imgChat, + activeIcon: ImageConstant.imgChat, + title: "chat".tr, + type: BottomBarEnum.tf, + image: false), + BottomMenuModel( + icon: ImageConstant.imgBell, + activeIcon: ImageConstant.imgBell, + type: BottomBarEnum.tf, + image: false), + BottomMenuModel( + icon: ImageConstant.imgEllipse1, + activeIcon: ImageConstant.imgEllipse1, type: BottomBarEnum.tf, - ) + image: true, + ), ]; @override Widget build(BuildContext context) { return Container( - height: 80.v, + height: 83.v, decoration: BoxDecoration( border: Border.all( color: appTheme.whiteA700, @@ -78,20 +83,23 @@ class CustomBottomBarState extends State { switch (index) { case 0: - Navigator.pushNamed(context, AppRoutes.diaryEdit); - break; - /*case 1: - Navigator.pushNamed(context, '/my_blog'); - break;*/ - case 1: Navigator.pushNamed(context, AppRoutes.myProfile); break; + case 1: + //Navigator.pushNamed(context, AppRoutes.myProfile); + break; case 2: - Navigator.pushNamed(context, AppRoutes.mySettings); + Navigator.pushNamed(context, AppRoutes.diaryEdit); break; case 3: Navigator.pushNamed(context, '/chat'); break; + case 4: + //Navigator.pushNamed(context, '/chat'); + break; + case 5: + Navigator.pushNamed(context, AppRoutes.mySettings); + break; default: } } @@ -99,28 +107,54 @@ class CustomBottomBarState extends State { BottomNavigationBarItem bottomMenu(index) { bool isSelected = selectedIndex == index; + double iconHeight; + double iconWidth; + + if (index == 0) { + // Для логотипа + iconHeight = 52.v; // Увеличиваем высоту + iconWidth = 48.h; // Меняем ширину, чтобы сохранить пропорции + } else if (index == bottomMenuList.length - 2) { + // Для колокольчика + iconHeight = 20.v; // Уменьшаем высоту + iconWidth = 20.h; // Меняем ширину, чтобы сохранить пропорции + } else if (index == bottomMenuList.length - 1) { + // Для колокольчика + iconHeight = 40.v; // Уменьшаем высоту + iconWidth = 40.h; // Меняем ширину, чтобы сохранить пропорции + } else { + // Для остальных иконок + iconHeight = 24.v; // Стандартная высота + iconWidth = 19.h; // Стандартная ширина + } + return BottomNavigationBarItem( icon: Column( crossAxisAlignment: CrossAxisAlignment.center, children: [ - CustomImageView( - imagePath: bottomMenuList[index].icon, - height: 24.v, - width: 19.h, - color: - isSelected ? theme.colorScheme.primary : appTheme.blueGray400, - ), - Padding( - padding: EdgeInsets.only(top: 8.v), - child: Text( - bottomMenuList[index].title ?? "", - style: CustomTextStyles.bodySmallMulishBluegray80012.copyWith( - color: isSelected - ? theme.colorScheme.primary - : appTheme.blueGray800, + if (!bottomMenuList[index].image) + CustomImageView( + imagePath: bottomMenuList[index].icon, + height: iconHeight, + width: iconWidth, + color: + isSelected ? theme.colorScheme.primary : appTheme.blueGray400, + ), + if (bottomMenuList[index].image) + AppbarTitleCircleimage(imagePath: ImageConstant.imgEllipse1), + if (bottomMenuList[index].title != + null) // Проверяем, существует ли title + Padding( + padding: EdgeInsets.only(top: 8.v), + child: Text( + bottomMenuList[index].title!, + style: CustomTextStyles.bodySmallMulishBluegray80012.copyWith( + color: isSelected + ? theme.colorScheme.primary + : appTheme.blueGray800, + ), ), ), - ), ], ), activeIcon: Column( @@ -128,8 +162,8 @@ class CustomBottomBarState extends State { children: [ CustomImageView( imagePath: bottomMenuList[index].activeIcon, - height: 24.adaptSize, - width: 24.adaptSize, + height: iconHeight, // Используем тот же размер для активной иконки + width: iconWidth, // Используем тот же размер для активной иконки color: theme.colorScheme.primary, ), Padding( @@ -158,6 +192,7 @@ class BottomMenuModel { required this.activeIcon, this.title, required this.type, + required this.image, }); String icon; @@ -167,4 +202,6 @@ class BottomMenuModel { String? title; BottomBarEnum type; + + bool image; }