add: home app bar

1 month ago · f72b40064d
14 changed files with 220 additions and 14 deletions
--- a/assets/images/icon_diamond.png
+++ b/assets/images/icon_diamond.png
--- a/assets/images/icon_flash.png
+++ b/assets/images/icon_flash.png
--- a/assets/svg/icon_plus.svg
+++ b/assets/svg/icon_plus.svg
@ -0,0 +1,14 @@
+<svg width="11" height="12" viewBox="0 0 11 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="4.125" y="0.228516" width="2.75" height="11" fill="url(#paint0_linear_1_9183)"/>
+<rect y="7.10352" width="2.75" height="11" transform="rotate(-90 0 7.10352)" fill="url(#paint1_linear_1_9183)"/>
+<defs>
+<linearGradient id="paint0_linear_1_9183" x1="5.5" y1="0.228516" x2="10.5732" y2="6.56998" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="#B791F4"/>
+</linearGradient>
+<linearGradient id="paint1_linear_1_9183" x1="1.375" y1="7.10352" x2="6.44817" y2="13.445" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="#B791F4"/>
+</linearGradient>
+</defs>
+</svg>
--- a/assets/svg/icon_setting.svg
+++ b/assets/svg/icon_setting.svg
@ -0,0 +1,3 @@
+<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.86239 0.228516C9.09758 0.228516 9.30797 0.374914 9.38717 0.594112L9.95195 2.1597C10.1541 2.20983 10.3285 2.26103 10.4751 2.3133C10.6351 2.37036 10.8431 2.45836 11.0991 2.57729L12.4143 1.8813C12.5215 1.82417 12.6445 1.80349 12.7646 1.8224C12.8846 1.8413 12.9953 1.89876 13.0798 1.9861L14.2366 3.18209C14.3902 3.34129 14.4334 3.57408 14.347 3.77728L13.7302 5.22287C13.8321 5.4106 13.9142 5.57167 13.9766 5.70606C14.0438 5.85166 14.127 6.05433 14.2262 6.31406L15.6638 6.93005C15.8797 7.02205 16.0133 7.23805 15.9989 7.46925L15.8933 9.12923C15.8861 9.23707 15.8474 9.34042 15.782 9.42646C15.7166 9.5125 15.6273 9.57744 15.5254 9.61323L14.1638 10.0972C14.1249 10.285 14.0838 10.4466 14.0406 10.582C13.9707 10.792 13.8912 10.9986 13.8022 11.2012L14.4862 12.7132C14.5349 12.8194 14.5481 12.9384 14.5239 13.0526C14.4997 13.1669 14.4393 13.2703 14.3518 13.3476L13.051 14.5092C12.9655 14.5857 12.8586 14.634 12.7447 14.6478C12.6309 14.6615 12.5155 14.6399 12.4143 14.586L11.0735 13.8756C10.864 13.9871 10.6475 14.0852 10.4255 14.1692L9.83995 14.3884L9.31997 15.8284C9.28106 15.9336 9.21146 16.0247 9.12017 16.0899C9.02889 16.155 8.92013 16.1913 8.80799 16.194L7.28804 16.2284C7.17289 16.231 7.05971 16.1981 6.96394 16.1341C6.86817 16.0701 6.79446 15.9782 6.75286 15.8708L6.14008 14.2492C5.93106 14.1776 5.72405 14.1002 5.5193 14.0172C5.35188 13.9447 5.18699 13.8665 5.02492 13.7828L3.50497 14.4324C3.40486 14.4753 3.2944 14.4881 3.18712 14.4692C3.07985 14.4503 2.98041 14.4005 2.90099 14.326L1.77623 13.2708C1.69218 13.1928 1.63493 13.0902 1.61266 12.9777C1.59039 12.8652 1.60424 12.7486 1.65224 12.6444L2.30581 11.2204C2.2192 11.0516 2.13862 10.8798 2.06422 10.7052C1.97756 10.4915 1.89753 10.2751 1.82423 10.0564L0.39228 9.62043C0.275885 9.58525 0.174363 9.51261 0.103482 9.41381C0.032601 9.31501 -0.00367291 9.19557 0.000293965 9.07403L0.056292 7.53725C0.060452 7.43702 0.0918443 7.33982 0.147095 7.2561C0.202346 7.17237 0.279367 7.10529 0.369881 7.06205L1.87223 6.34046C1.94156 6.08553 2.00289 5.88606 2.05622 5.74206C2.1317 5.54867 2.21551 5.35862 2.30741 5.17247L1.65624 3.79648C1.60644 3.69207 1.59123 3.5745 1.61281 3.46085C1.63439 3.3472 1.69163 3.24339 1.77623 3.16449L2.89939 2.1037C2.97802 2.02926 3.07654 1.97922 3.18303 1.95962C3.28952 1.94003 3.3994 1.95173 3.49937 1.9933L5.01772 2.62049C5.18518 2.50903 5.33771 2.41729 5.4753 2.3453C5.63903 2.2589 5.85876 2.16663 6.13448 2.0685L6.66246 0.595712C6.70189 0.488187 6.77334 0.395336 6.86718 0.329678C6.96101 0.264021 7.07272 0.228713 7.18725 0.228516L8.86239 0.228516ZM8.01922 5.84366C6.68566 5.84366 5.6049 6.91165 5.6049 8.23004C5.6049 9.54843 6.68566 10.6172 8.01922 10.6172C9.35277 10.6172 10.4327 9.54843 10.4327 8.23004C10.4327 6.91165 9.35277 5.84366 8.01922 5.84366Z" fill="white"/>
+</svg>
--- a/assets/svg/icon_share.svg
+++ b/assets/svg/icon_share.svg
@ -0,0 +1,3 @@
+<svg width="13" height="17" viewBox="0 0 13 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M7.87877 2.89492C7.87877 1.42292 9.02582 0.228525 10.439 0.228525C10.7745 0.227579 11.107 0.295808 11.4173 0.429314C11.7276 0.562821 12.0098 0.758988 12.2476 1.00661C12.4854 1.25423 12.6743 1.54844 12.8034 1.87245C12.9325 2.19645 12.9993 2.5439 13 2.89492C13 4.36772 11.8529 5.56212 10.439 5.56212C10.0999 5.56238 9.76421 5.49222 9.45127 5.35572C9.13832 5.21922 8.85439 5.01908 8.61594 4.76692L5.07153 7.29172C5.17006 7.80613 5.12165 8.3395 4.93235 8.82532L8.81859 11.4973C9.27645 11.107 9.84915 10.8942 10.4398 10.8949C10.7753 10.8941 11.1077 10.9624 11.418 11.096C11.7283 11.2296 12.0104 11.4259 12.2481 11.6736C12.4859 11.9213 12.6747 12.2155 12.8037 12.5396C12.9327 12.8636 12.9994 13.2111 13 13.5621C13 15.0341 11.8529 16.2285 10.439 16.2285C10.1035 16.2293 9.77118 16.161 9.46094 16.0275C9.1507 15.8939 8.86865 15.6978 8.6309 15.4501C8.39315 15.2025 8.20436 14.9084 8.07531 14.5844C7.94625 14.2604 7.87947 13.9131 7.87877 13.5621C7.87817 13.1882 7.9535 12.8185 8.09976 12.4773L4.24412 9.82852C3.77705 10.253 3.17893 10.4863 2.56024 10.4853C2.2247 10.4862 1.89228 10.4178 1.582 10.2842C1.27171 10.1506 0.989628 9.95436 0.751868 9.70667C0.514108 9.45897 0.32533 9.1647 0.196321 8.84065C0.0673128 8.51661 0.000601805 8.16914 0 7.81812C0.000702131 7.46716 0.0674873 7.11978 0.196541 6.79583C0.325594 6.47188 0.514387 6.17769 0.752137 5.93008C0.989888 5.68248 1.27194 5.48629 1.58217 5.35274C1.89241 5.21919 2.22476 5.15088 2.56024 5.15172C3.37388 5.15172 4.09729 5.54612 4.56606 6.16052L8.00188 3.71332C7.91993 3.449 7.87838 3.1728 7.87877 2.89492Z" fill="white"/>
+</svg>
--- 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<String> images = [
    shiaMind,
    question,
+    iconProfile,
+    iconDiamond,
  ];
 }
--- 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);
 }
--- 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<ColorsName, Color> get lightColors => {
    ColorsName.primaryColor: MyColors.white,
    ColorsName.noColor: MyColors.transparent,
-    ColorsName.introBackgroundColor: MyColors.introBackgroundColor,
+    ColorsName.backgroundColor: MyColors.backgroundColor,
  };

  static Map<ColorsName, Color> 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]!;
 }
--- a/lib/core/widgets/app_bar/home_app_bar.dart
+++ 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);
+}
--- a/lib/core/widgets/app_bar/styles/app_bar_action.dart
+++ 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 ?? ''),
+      ),
+    );
+  }
+}
--- a/lib/core/widgets/app_bar/styles/app_bar_add_widget.dart
+++ 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<Color>? 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),
+              ),
+            ],
+          ),
+        ),
+      ),
+    );
+  }
+}
--- 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<HomeController> {
  const BottomNavBar({super.key});
@ -19,7 +19,7 @@ class BottomNavBar extends GetView<HomeController> {
        ),
      ),
      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<HomeController> {
          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<HomeController> {
      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<HomeController> {
      activeIcon: BottomNavBarProfileItem(
        bottomNavEntity: controller.bottomNavList[index],
      ),
-      label: '',
+      label: controller.bottomNavList[index].title,
+      tooltip: controller.bottomNavList[index].title,
    );
  }
-}
+}
--- 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<HomeController> {
  const HomePage({super.key});

  @override
  Widget build(BuildContext context) {
-    return Scaffold(bottomNavigationBar: BottomNavBar());
+    return Scaffold(
+      backgroundColor: context.backgroundColor,
+      bottomNavigationBar: BottomNavBar(),
+      appBar: HomeAppBar(),
+    );
  }
 }
--- 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<IntroController> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
-      backgroundColor: context.introBackgroundColor,
+      backgroundColor: context.backgroundColor,
      body: SafeArea(
        child: SizedBox.expand(
          child: Stack(