Fix Bottom Nav Bar Style

assets/translations/ar.json

@@ -7,7 +7,7 @@
   "requiredField" : "الحقل مطلوب",
   "passwordLengthMessage" :  "كلمة السر أقل من 6 خانات",
   "overview" : "نظرة عامة",
-  "myRequest" : "طلباتي",
+  "myRequests" : "طلباتي",
-  "Assets" : "الاصول",
+  "myAssets" : "ممتلكاتي",
   "contactUs": "اتصل بنا"
 }

assets/translations/en.json

@@ -7,7 +7,7 @@
   "requiredField" : "Required Field",
   "passwordLengthMessage" :  "Password length is less than 6 characters",
   "overview" : "Overview",
-  "myRequest" : "My Request",
+  "myRequests" : "My Request",
-  "Assets" : "Assets",
+  "myAssets" : "My Assets",
   "contactUs": "Contact Us"
 }

lib/models/enums/translation_keys.dart

@@ -1,13 +1 @@
-enum TranslationKeys {
+enum TranslationKeys { login, enterCredsToLogin, forgotPassword, password, username, requiredField, passwordLengthMessage, overview, myRequests, myAssets, contactUs }
-  login,
-  enterCredsToLogin,
-  forgotPassword,
-  password,
-  username,
-  requiredField,
-  passwordLengthMessage,
-  overview,
-  myRequest,
-  Assets,
-  contactUs
-}

lib/new_views/app_style/app_themes.dart

@@ -9,19 +9,18 @@ class AppThemes {
     indicatorColor: AppColor.primary50,
     scaffoldBackgroundColor: AppColor.backgroundLight,
     colorScheme: const ColorScheme.light(primary: AppColor.primary50, onPrimary: Colors.white, secondary: Colors.white, onSecondary: AppColor.neutral70),
-
     floatingActionButtonTheme: const FloatingActionButtonThemeData(
       backgroundColor: AppColor.backgroundDark,
     ),
-    bottomNavigationBarTheme: const BottomNavigationBarThemeData(
+    bottomNavigationBarTheme: BottomNavigationBarThemeData(
-      backgroundColor: AppColor.backgroundLight
+      type: BottomNavigationBarType.fixed,
+      unselectedLabelStyle: ThemeData.light().textTheme.bodySmall?.copyWith(fontWeight: FontWeight.w500),
+      selectedLabelStyle: ThemeData.light().textTheme.bodySmall?.copyWith(fontWeight: FontWeight.w500),
+      selectedItemColor: AppColor.primary70,
+      unselectedItemColor: AppColor.neutral20,
+      backgroundColor: Colors.white,
     ),
-    appBarTheme: const AppBarTheme(
+    appBarTheme: const AppBarTheme(backgroundColor: AppColor.backgroundLight, titleTextStyle: TextStyle(color: AppColor.neutral50)),
-        backgroundColor:  AppColor.backgroundLight,
-        titleTextStyle: TextStyle(
-            color: AppColor.neutral50
-        )
-    )
   );
 
   static ThemeData darkTheme = ThemeData.dark().copyWith(
@@ -30,19 +29,15 @@ class AppThemes {
     indicatorColor: AppColor.primary50,
     scaffoldBackgroundColor: AppColor.backgroundDark,
     colorScheme: const ColorScheme.light(primary: AppColor.primary50, onPrimary: AppColor.neutral60, secondary: AppColor.neutral60, onSecondary: Colors.white),
-      floatingActionButtonTheme: const FloatingActionButtonThemeData(
+    floatingActionButtonTheme: const FloatingActionButtonThemeData(backgroundColor: AppColor.primary40),
-        backgroundColor: AppColor.primary40
+    bottomNavigationBarTheme: BottomNavigationBarThemeData(
-      ),
+      type: BottomNavigationBarType.fixed,
-      bottomNavigationBarTheme: const BottomNavigationBarThemeData(
+      unselectedLabelStyle: ThemeData.dark().textTheme.bodySmall?.copyWith(fontWeight: FontWeight.w500),
-          backgroundColor: AppColor.neutral60,
+      selectedLabelStyle: ThemeData.dark().textTheme.bodySmall?.copyWith(fontWeight: FontWeight.w500),
+      selectedItemColor: AppColor.primary40,
       unselectedItemColor: AppColor.neutral10,
-        selectedItemColor: AppColor.primary70
+      backgroundColor: AppColor.neutral60,
     ),
-      appBarTheme: const AppBarTheme(
+    appBarTheme: const AppBarTheme(backgroundColor: AppColor.backgroundDark, titleTextStyle: TextStyle(color: AppColor.neutral30)),
-        backgroundColor:  AppColor.backgroundDark,
-          titleTextStyle: TextStyle(
-              color: AppColor.neutral30
-          )
-      )
   );
 }

lib/new_views/common_widgets/app_bar/home_app_bar.dart

@@ -1,4 +1,3 @@
-import 'package:flutter/cupertino.dart';
 import 'package:flutter/material.dart';
 import 'package:test_sa/new_views/common_widgets/app_bar/user_image.dart';
 
@@ -7,8 +6,8 @@ import 'notification_icon.dart';
 class HomeAppBar extends StatefulWidget implements PreferredSizeWidget {
   final int notificationCount;
   final String userImage;
-  GlobalKey<ScaffoldState> scaffoldKey;
+  final GlobalKey<ScaffoldState> scaffoldKey;
-  HomeAppBar({Key key, this.notificationCount, this.userImage, this.scaffoldKey}) : super(key: key);
+  const HomeAppBar({Key key, this.notificationCount, this.userImage, this.scaffoldKey}) : super(key: key);
 
   @override
   State<HomeAppBar> createState() => _AppBarState();

lib/new_views/common_widgets/app_bottom_nav_bar.dart

@@ -1,9 +1,9 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_svg/svg.dart';
 import 'package:test_sa/extensions/context_extension.dart';
+import 'package:test_sa/extensions/int_extensions.dart';
 
 import '../../models/enums/translation_keys.dart';
-import '../app_style/app_color.dart';
 
 class AppBottomNavigationBar extends StatefulWidget {
   final Function(int index) onPressed;
@@ -16,52 +16,46 @@ class AppBottomNavigationBar extends StatefulWidget {
 class _AppBottomNavigationBarState extends State<AppBottomNavigationBar> {
   int _selectedIndex = 0;
 
-  void _onItemTapped(int index) {
-    setState(() {
-      _selectedIndex = index;
-    });
-    widget.onPressed.call(index);
-  }
-
   @override
   Widget build(BuildContext context) {
-    return Material(
+    return ClipRRect(
-      elevation: 20,
       borderRadius: const BorderRadius.only(topLeft: Radius.circular(20.0), topRight: Radius.circular(20.0)),
-      child: SizedBox(
+      child: Container(
-        height: 100,
+        height: 100.toScreenHeight,
-        child: ClipRRect(
+        decoration: BoxDecoration(
-          borderRadius: const BorderRadius.all(Radius.circular(20.0)),
+          boxShadow: [BoxShadow(color: Colors.black.withOpacity(0.05), blurRadius: 14)],
+        ),
         child: BottomNavigationBar(
           items: <BottomNavigationBarItem>[
-              BottomNavigationBarItem(
+            navBarItem(index: 0, iconName: "overview", label: TranslationKeys.overview),
-                icon: SvgPicture.asset('assets/images/Overview.svg', width: 24, height: 24, color: _selectedIndex == 0 ? AppColor.primary70 : AppColor.neutral20),
+            navBarItem(index: 1, iconName: "requests", label: TranslationKeys.myRequests),
-                label: context.translate(TranslationKeys.overview),
+            navBarItem(index: 2, iconName: "assets", label: TranslationKeys.myAssets),
-              ),
+            navBarItem(index: 3, iconName: "message", label: TranslationKeys.contactUs),
-              BottomNavigationBarItem(
-                icon: SvgPicture.asset('assets/images/requests.svg', width: 24, height: 24, color: _selectedIndex == 1 ? AppColor.primary70 : AppColor.neutral20),
-                label: context.translate(TranslationKeys.myRequest),
-              ),
-              BottomNavigationBarItem(
-                icon: SvgPicture.asset('assets/images/assets.svg', width: 24, height: 24, color: _selectedIndex == 2 ? AppColor.primary70 : AppColor.neutral20),
-                label: context.translate(TranslationKeys.myRequest),
-              ),
-              BottomNavigationBarItem(
-                icon: SvgPicture.asset('assets/images/message.svg', width: 24, height: 24, color: _selectedIndex == 3 ? AppColor.primary70 : AppColor.neutral20),
-                label: context.translate(TranslationKeys.contactUs),
-              ),
           ],
           currentIndex: _selectedIndex,
-            type: BottomNavigationBarType.fixed,
+          selectedFontSize: 12,
-            unselectedFontSize: 14,
+          onTap: (index) {
-            unselectedLabelStyle: const TextStyle(height: 2),
+            setState(() {
-            selectedLabelStyle: const TextStyle(height: 2),
+              _selectedIndex = index;
-            selectedItemColor: AppColor.primary70,
+            });
-            unselectedItemColor: AppColor.neutral20,
+            widget.onPressed(index);
-            onTap: _onItemTapped,
+          },
         ),
       ),
+    );
+  }
+
+  BottomNavigationBarItem navBarItem({@required int index, @required String iconName, @required TranslationKeys label}) {
+    return BottomNavigationBarItem(
+      icon: Padding(
+        padding: EdgeInsets.symmetric(vertical: 10.toScreenHeight),
+        child: SvgPicture.asset(
+          'assets/images/$iconName.svg',
+          width: 24.toScreenWidth,
+          color: _selectedIndex == index ? Theme.of(context).bottomNavigationBarTheme.selectedItemColor : Theme.of(context).bottomNavigationBarTheme.unselectedItemColor,
+        ),
       ),
+      label: context.translate(label),
     );
   }
 }