From f72b40064dda203166a10d47adc75a1a97e46a29 Mon Sep 17 00:00:00 2001 From: AmirrezaChegini Date: Tue, 14 Oct 2025 22:20:49 +0330 Subject: [PATCH] add: home app bar --- assets/images/icon_diamond.png | Bin 0 -> 883 bytes assets/images/icon_flash.png | Bin 0 -> 747 bytes assets/svg/icon_plus.svg | 14 ++++ assets/svg/icon_setting.svg | 3 + assets/svg/icon_share.svg | 3 + lib/common_ui/resources/my_assets.dart | 7 ++ lib/common_ui/resources/my_colors.dart | 2 +- lib/common_ui/theme/my_theme.dart | 8 +- lib/core/widgets/app_bar/home_app_bar.dart | 57 +++++++++++++ .../app_bar/styles/app_bar_action.dart | 37 +++++++++ .../app_bar/styles/app_bar_add_widget.dart | 77 ++++++++++++++++++ .../bottom_nav_bar/bottom_nav_bar.dart | 14 ++-- .../home/presentation/pages/home_page.dart | 10 ++- .../intro/presentation/ui/intro_page.dart | 2 +- 14 files changed, 220 insertions(+), 14 deletions(-) create mode 100644 assets/images/icon_diamond.png create mode 100644 assets/images/icon_flash.png create mode 100644 assets/svg/icon_plus.svg create mode 100644 assets/svg/icon_setting.svg create mode 100644 assets/svg/icon_share.svg create mode 100644 lib/core/widgets/app_bar/home_app_bar.dart create mode 100644 lib/core/widgets/app_bar/styles/app_bar_action.dart create mode 100644 lib/core/widgets/app_bar/styles/app_bar_add_widget.dart diff --git a/assets/images/icon_diamond.png b/assets/images/icon_diamond.png new file mode 100644 index 0000000000000000000000000000000000000000..c1104f368739e92994ef6f1a7cf52c5567d2144f GIT binary patch literal 883 zcmV-(1C0EMP)U2uuuMt59tZr~weppj{t7^{gOE-GkZpqQA>nuv*@ z1`3L*%cWw>>-kQ(aYlJ)n%bf{`B-UDeck^}Y8!hR@0vQ=(7lN)*+u zrV+qVfS zGxvDUY)@o9X=T@YeKI%EFhr(Oz)FB&M?p#h&KM>ecOP&$ZUk`y_iYo$t| zPCe~m=Ucr;OHppC49ti`(@HZkNiRzcL4(NWISLaDPoIS7lV8RrQXwE5gMt^LT(w|w z_Cd=o{T<84&D}|(hv`i&Hve8gA;&OF9j+5md5WW4hl1>YKY#eE>to^ z91kJa+ZS4w_xc~F`Om^_KWJ{M$9)^JPdf8O8iY%-Nq#nz?2^l%V+q3*m={CoHK?e4 zZtcd-1D`}At1SzU{Pkv~F54W*8u|6>#K^~Nc$$KnhKe3ABVrBmPW4US4f!2U5e0!zx93}R@KtC@z521k<{f1cVfwBt2>N164)S|`qMHhcq{2aF-SyqKZEnhWJ7mf$J>>vzdm@w_h-s-OO+FuVg!tk$= z1!sO*WL4}-ixk>v$`QkI%GLbWh`y;Nk97Uw$@qnLpj*TDtoNc>b8G#1DiHtx002ov JPDHLkV1jDrk%j;O literal 0 HcmV?d00001 diff --git a/assets/images/icon_flash.png b/assets/images/icon_flash.png new file mode 100644 index 0000000000000000000000000000000000000000..9ca0a4e82245ecd8a67bb5aadfa7b6a6797cf6db GIT binary patch literal 747 zcmVWpvE{D6-_K4mRhiOR>&`4*Mdl_D6C;yJAMI6O`)BIjj^(W#Hg4U zSi&mbVRo0d$f6vrWAK^G7xg zpgB#hHGmBeC8$^-O6}SX$T*K@Irsu{2Bp|YYH;X-z8y&?hTh~7O{3BQ@eg<$9u~;S zrNlW&K(TPz?*+L}e7<>qJ2T$z@iM%2eJVt<(z5{9DOdv|V68*|1tS8Gilm}fBwYh5 zIp4fmvD_P@$3m#)7-fgSu@vb@I?0*{A1!jLbx;(7_J)DOUtX;Fg&loH0SS5RZ-E*I zV2eOqS&>pn3OEdyg1f|FOL(Yx_w`V0l zv-^F+o>D`p5HulD);Ui;mvLRpG_Keqw>CsI)yGsHkOtcunLy=FljON;>0XE1 zEzgoJw$QCVkmv3AI;iH|B34dnJ3iT=aMQAF1agxY8{83}cENsi=3l@m5NVo3pxO@x z1-BVN4IFHh>?xFSCQ`}cC3_5!_K>v%Fev03Wa9mjQ%vS?PNX2a*G!sr(><9886BAV zqVp2x0y-d0tPyO9a*^LQv}{kKi2uYfCw0%~rjgN!S2Eq0!3B|m=*sW}UwJrhUzWeJ dC + + + + + + + + + + + + + diff --git a/assets/svg/icon_setting.svg b/assets/svg/icon_setting.svg new file mode 100644 index 0000000..dfc6c52 --- /dev/null +++ b/assets/svg/icon_setting.svg @@ -0,0 +1,3 @@ + + + diff --git a/assets/svg/icon_share.svg b/assets/svg/icon_share.svg new file mode 100644 index 0000000..43b2c59 --- /dev/null +++ b/assets/svg/icon_share.svg @@ -0,0 +1,3 @@ + + + diff --git a/lib/common_ui/resources/my_assets.dart b/lib/common_ui/resources/my_assets.dart index dc5ec20..3f798a8 100644 --- a/lib/common_ui/resources/my_assets.dart +++ b/lib/common_ui/resources/my_assets.dart @@ -8,12 +8,17 @@ class MyAssets { static const String shiaMind = 'assets/images/shia_mind.png'; static const String question = 'assets/images/question.png'; static const String iconProfile = 'assets/images/icon_profile.png'; + static const String iconDiamond = 'assets/images/icon_diamond.png'; + static const String iconFlash = 'assets/images/icon_flash.png'; /// ----- Svg ----- static const String sampleSvg = 'assets/svg/sample.svg'; static const String iconHome = 'assets/svg/icon_home.svg'; static const String iconShop = 'assets/svg/icon_shop.svg'; static const String iconAwards = 'assets/svg/icon_awards.svg'; + static const String iconPlus = 'assets/svg/icon_plus.svg'; + static const String iconSetting = 'assets/svg/icon_setting.svg'; + static const String iconShare = 'assets/svg/icon_share.svg'; /// ----- Audios ----- static const String sampleAudio = 'assets/audios/sample.mp3'; @@ -25,5 +30,7 @@ class MyAssets { static const List images = [ shiaMind, question, + iconProfile, + iconDiamond, ]; } diff --git a/lib/common_ui/resources/my_colors.dart b/lib/common_ui/resources/my_colors.dart index 5af3ddc..087ce37 100644 --- a/lib/common_ui/resources/my_colors.dart +++ b/lib/common_ui/resources/my_colors.dart @@ -8,5 +8,5 @@ class MyColors { static const Color white = Colors.white; static const Color black = Colors.black; static const Color transparent = Colors.transparent; - static const Color introBackgroundColor = Color(0xFF160C30); + static const Color backgroundColor = Color(0xFF160C30); } diff --git a/lib/common_ui/theme/my_theme.dart b/lib/common_ui/theme/my_theme.dart index 9ba99f4..7ee5201 100644 --- a/lib/common_ui/theme/my_theme.dart +++ b/lib/common_ui/theme/my_theme.dart @@ -5,7 +5,7 @@ import 'package:get/get.dart'; enum ColorsName { primaryColor, noColor, - introBackgroundColor, + backgroundColor, } class MyTheme { @@ -20,13 +20,13 @@ class MyTheme { static Map get lightColors => { ColorsName.primaryColor: MyColors.white, ColorsName.noColor: MyColors.transparent, - ColorsName.introBackgroundColor: MyColors.introBackgroundColor, + ColorsName.backgroundColor: MyColors.backgroundColor, }; static Map get darkColors => { ColorsName.primaryColor: MyColors.white, ColorsName.noColor: MyColors.transparent, - ColorsName.introBackgroundColor: MyColors.introBackgroundColor, + ColorsName.backgroundColor: MyColors.backgroundColor, }; } @@ -36,5 +36,5 @@ extension ThemeExtension on BuildContext { Color get primaryColor => customColors[ColorsName.primaryColor]!; Color get noColor => customColors[ColorsName.noColor]!; - Color get introBackgroundColor => customColors[ColorsName.introBackgroundColor]!; + Color get backgroundColor => customColors[ColorsName.backgroundColor]!; } diff --git a/lib/core/widgets/app_bar/home_app_bar.dart b/lib/core/widgets/app_bar/home_app_bar.dart new file mode 100644 index 0000000..d4158c8 --- /dev/null +++ b/lib/core/widgets/app_bar/home_app_bar.dart @@ -0,0 +1,57 @@ +import 'package:flutter/material.dart'; +import 'package:shia_game_flutter/common_ui/resources/my_assets.dart'; +import 'package:shia_game_flutter/common_ui/resources/my_spaces.dart'; +import 'package:shia_game_flutter/common_ui/theme/my_theme.dart'; +import 'package:shia_game_flutter/core/utils/gap.dart'; +import 'package:shia_game_flutter/core/widgets/app_bar/styles/app_bar_action.dart'; +import 'package:shia_game_flutter/core/widgets/app_bar/styles/app_bar_add_widget.dart'; + +class HomeAppBar extends StatelessWidget implements PreferredSizeWidget { + const HomeAppBar({ + super.key, + }); + + @override + Widget build(BuildContext context) { + return AppBar( + backgroundColor: context.backgroundColor, + titleSpacing: MySpaces.s30, + title: Row( + children: [ + AppBarAddWidget( + onTap: () {}, + icon: MyAssets.iconDiamond, + number: 999, + gradientColors: [ + Color(0XFF52C3ED), + Color(0XFF4F16A0), + ], + ), + MySpaces.s6.gapWidth, + AppBarAddWidget( + onTap: () {}, + icon: MyAssets.iconFlash, + number: 54, + gradientColors: [ + Color(0XFFEFB345), + Color(0XFF4F16A0), + ], + ), + Spacer(), + AppBarAction( + icon: MyAssets.iconShare, + onTap: () {}, + ), + MySpaces.s12.gapWidth, + AppBarAction( + icon: MyAssets.iconSetting, + onTap: () {}, + ), + ], + ), + ); + } + + @override + Size get preferredSize => Size.fromHeight(kToolbarHeight); +} diff --git a/lib/core/widgets/app_bar/styles/app_bar_action.dart b/lib/core/widgets/app_bar/styles/app_bar_action.dart new file mode 100644 index 0000000..77c0b59 --- /dev/null +++ b/lib/core/widgets/app_bar/styles/app_bar_action.dart @@ -0,0 +1,37 @@ +import 'package:flutter/material.dart'; +import 'package:shia_game_flutter/common_ui/resources/my_spaces.dart'; +import 'package:shia_game_flutter/core/widgets/image/my_image.dart'; + +class AppBarAction extends StatelessWidget { + const AppBarAction({super.key, this.icon, this.onTap}); + + final String? icon; + final VoidCallback? onTap; + + @override + Widget build(BuildContext context) { + return InkWell( + onTap: onTap, + borderRadius: BorderRadius.all(Radius.circular(100)), + child: Ink( + width: MySpaces.s32, + height: MySpaces.s32, + padding: EdgeInsets.all(MySpaces.s6), + decoration: BoxDecoration( + shape: BoxShape.circle, + border: Border.all( + width: 1, + color: Color(0XFF6D2ADA), + strokeAlign: BorderSide.strokeAlignInside, + ), + gradient: LinearGradient( + begin: AlignmentDirectional.topStart, + end: AlignmentDirectional.bottomEnd, + colors: [Color(0XFF823FEB), Color(0XFF4F09BF)], + ), + ), + child: MyImage(asset: icon ?? ''), + ), + ); + } +} \ No newline at end of file diff --git a/lib/core/widgets/app_bar/styles/app_bar_add_widget.dart b/lib/core/widgets/app_bar/styles/app_bar_add_widget.dart new file mode 100644 index 0000000..092de31 --- /dev/null +++ b/lib/core/widgets/app_bar/styles/app_bar_add_widget.dart @@ -0,0 +1,77 @@ + +import 'package:flutter/material.dart'; +import 'package:shia_game_flutter/common_ui/resources/my_assets.dart'; +import 'package:shia_game_flutter/common_ui/resources/my_spaces.dart'; +import 'package:shia_game_flutter/common_ui/resources/my_text_style.dart'; +import 'package:shia_game_flutter/common_ui/theme/my_theme.dart'; +import 'package:shia_game_flutter/core/widgets/image/my_image.dart'; + +class AppBarAddWidget extends StatelessWidget { + const AppBarAddWidget({ + super.key, + this.icon, + this.number, + this.onTap, + this.gradientColors, + }); + + final String? icon; + final int? number; + final VoidCallback? onTap; + final List? gradientColors; + + @override + Widget build(BuildContext context) { + return InkWell( + onTap: onTap, + borderRadius: BorderRadius.all(Radius.circular(100)), + child: Ink( + width: 96, + height: 32, + padding: EdgeInsets.all(1), + decoration: ShapeDecoration( + shape: StadiumBorder(), + gradient: LinearGradient( + begin: AlignmentDirectional.topStart, + end: AlignmentDirectional.bottomEnd, + colors: gradientColors ?? [], + ), + ), + child: Ink( + padding: EdgeInsetsDirectional.only( + start: MySpaces.s8, + end: MySpaces.s4, + ), + decoration: ShapeDecoration( + shape: StadiumBorder(), + color: context.backgroundColor, + ), + child: Row( + children: [ + MyImage(asset: icon ?? ''), + Expanded( + child: Text( + '$number', + maxLines: 1, + textAlign: TextAlign.center, + overflow: TextOverflow.ellipsis, + style: Lexend.bold.copyWith(fontSize: 12), + ), + ), + Container( + width: 23, + height: 23, + padding: EdgeInsets.all(MySpaces.s6), + decoration: BoxDecoration( + shape: BoxShape.circle, + color: Color(0XFF4F09BF), + ), + child: MyImage(asset: MyAssets.iconPlus), + ), + ], + ), + ), + ), + ); + } +} diff --git a/lib/core/widgets/bottom_nav_bar/bottom_nav_bar.dart b/lib/core/widgets/bottom_nav_bar/bottom_nav_bar.dart index 44f08f1..72305b8 100644 --- a/lib/core/widgets/bottom_nav_bar/bottom_nav_bar.dart +++ b/lib/core/widgets/bottom_nav_bar/bottom_nav_bar.dart @@ -2,9 +2,9 @@ import 'package:flutter/material.dart'; import 'package:get/get_state_manager/src/rx_flutter/rx_obx_widget.dart'; import 'package:get/get_state_manager/src/simple/get_view.dart'; import 'package:shia_game_flutter/common_ui/resources/my_text_style.dart'; -import 'package:shia_game_flutter/features/home/presentation/controller/home_controller.dart'; import 'package:shia_game_flutter/core/widgets/bottom_nav_bar/styles/bottom_nav_bar_item.dart'; import 'package:shia_game_flutter/core/widgets/bottom_nav_bar/styles/bottom_nav_bar_profile_item.dart'; +import 'package:shia_game_flutter/features/home/presentation/controller/home_controller.dart'; class BottomNavBar extends GetView { const BottomNavBar({super.key}); @@ -19,7 +19,7 @@ class BottomNavBar extends GetView { ), ), child: Obx( - () => BottomNavigationBar( + () => BottomNavigationBar( onTap: (int index) => controller.onChangeBottomNavBar(index), currentIndex: controller.selectedIndex.value, backgroundColor: Colors.transparent, @@ -33,7 +33,7 @@ class BottomNavBar extends GetView { showUnselectedLabels: false, items: List.generate( controller.bottomNavList.length, - (index) => index == 3 + (index) => index == 3 ? _bottomNavBarProfileItem(index) : _bottomNavBarItem(index), ), @@ -53,7 +53,8 @@ class BottomNavBar extends GetView { activeIcon: BottomNavBarItem( bottomNavEntity: controller.bottomNavList[index], ), - label: '', + label: controller.bottomNavList[index].title, + tooltip: controller.bottomNavList[index].title, ); } @@ -68,7 +69,8 @@ class BottomNavBar extends GetView { activeIcon: BottomNavBarProfileItem( bottomNavEntity: controller.bottomNavList[index], ), - label: '', + label: controller.bottomNavList[index].title, + tooltip: controller.bottomNavList[index].title, ); } -} \ No newline at end of file +} diff --git a/lib/features/home/presentation/pages/home_page.dart b/lib/features/home/presentation/pages/home_page.dart index e48ee8b..6424618 100644 --- a/lib/features/home/presentation/pages/home_page.dart +++ b/lib/features/home/presentation/pages/home_page.dart @@ -1,13 +1,19 @@ import 'package:flutter/material.dart'; import 'package:get/get.dart'; -import 'package:shia_game_flutter/features/home/presentation/controller/home_controller.dart'; +import 'package:shia_game_flutter/common_ui/theme/my_theme.dart'; +import 'package:shia_game_flutter/core/widgets/app_bar/home_app_bar.dart'; import 'package:shia_game_flutter/core/widgets/bottom_nav_bar/bottom_nav_bar.dart'; +import 'package:shia_game_flutter/features/home/presentation/controller/home_controller.dart'; class HomePage extends GetView { const HomePage({super.key}); @override Widget build(BuildContext context) { - return Scaffold(bottomNavigationBar: BottomNavBar()); + return Scaffold( + backgroundColor: context.backgroundColor, + bottomNavigationBar: BottomNavBar(), + appBar: HomeAppBar(), + ); } } diff --git a/lib/features/intro/presentation/ui/intro_page.dart b/lib/features/intro/presentation/ui/intro_page.dart index c965cea..175925c 100644 --- a/lib/features/intro/presentation/ui/intro_page.dart +++ b/lib/features/intro/presentation/ui/intro_page.dart @@ -16,7 +16,7 @@ class IntroPage extends GetView { @override Widget build(BuildContext context) { return Scaffold( - backgroundColor: context.introBackgroundColor, + backgroundColor: context.backgroundColor, body: SafeArea( child: SizedBox.expand( child: Stack(