diff --git a/assets/images/icon_diamond.png b/assets/images/icon_diamond.png new file mode 100644 index 0000000..c1104f3 Binary files /dev/null and b/assets/images/icon_diamond.png differ diff --git a/assets/images/icon_flash.png b/assets/images/icon_flash.png new file mode 100644 index 0000000..9ca0a4e Binary files /dev/null and b/assets/images/icon_flash.png differ diff --git a/assets/svg/icon_plus.svg b/assets/svg/icon_plus.svg new file mode 100644 index 0000000..9c6b2b4 --- /dev/null +++ b/assets/svg/icon_plus.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + 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(