Fix Bottom Nav Bar Style

assets/translations/ar.json

@@ -7,7 +7,7 @@
   "requiredField" : "الحقل مطلوب",
   "passwordLengthMessage" :  "كلمة السر أقل من 6 خانات",
   "overview" : "نظرة عامة",
-  "myRequest" : "طلباتي",
-  "Assets" : "الاصول",
+  "myRequests" : "طلباتي",
+  "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",
-  "Assets" : "Assets",
+  "myRequests" : "My Request",
+  "myAssets" : "My Assets",
   "contactUs": "Contact Us"
 }

lib/models/enums/translation_keys.dart

@@ -1,13 +1 @@
-enum TranslationKeys {
-  login,
-  enterCredsToLogin,
-  forgotPassword,
-  password,
-  username,
-  requiredField,
-  passwordLengthMessage,
-  overview,
-  myRequest,
-  Assets,
-  contactUs
-}
+enum TranslationKeys { login, enterCredsToLogin, forgotPassword, password, username, requiredField, passwordLengthMessage, overview, myRequests, myAssets, 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(
+    floatingActionButtonTheme: const FloatingActionButtonThemeData(
       backgroundColor: AppColor.backgroundDark,
     ),
-    bottomNavigationBarTheme: const BottomNavigationBarThemeData(
-      backgroundColor: AppColor.backgroundLight
+    bottomNavigationBarTheme: BottomNavigationBarThemeData(
+      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(
-        backgroundColor:  AppColor.backgroundLight,
-        titleTextStyle: TextStyle(
-            color: AppColor.neutral50
-        )
-    )
+    appBarTheme: const AppBarTheme(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(
-        backgroundColor: AppColor.primary40
-      ),
-      bottomNavigationBarTheme: const BottomNavigationBarThemeData(
-          backgroundColor: AppColor.neutral60,
-        unselectedItemColor: AppColor.neutral10,
-        selectedItemColor: AppColor.primary70
-      ),
-      appBarTheme: const AppBarTheme(
-        backgroundColor:  AppColor.backgroundDark,
-          titleTextStyle: TextStyle(
-              color: AppColor.neutral30
-          )
-      )
+    floatingActionButtonTheme: const FloatingActionButtonThemeData(backgroundColor: AppColor.primary40),
+    bottomNavigationBarTheme: BottomNavigationBarThemeData(
+      type: BottomNavigationBarType.fixed,
+      unselectedLabelStyle: ThemeData.dark().textTheme.bodySmall?.copyWith(fontWeight: FontWeight.w500),
+      selectedLabelStyle: ThemeData.dark().textTheme.bodySmall?.copyWith(fontWeight: FontWeight.w500),
+      selectedItemColor: AppColor.primary40,
+      unselectedItemColor: AppColor.neutral10,
+      backgroundColor: AppColor.neutral60,
+    ),
+    appBarTheme: const AppBarTheme(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;
-  HomeAppBar({Key key, this.notificationCount, this.userImage, this.scaffoldKey}) : super(key: key);
+  final GlobalKey<ScaffoldState> scaffoldKey;
+  const HomeAppBar({Key key, this.notificationCount, this.userImage, this.scaffoldKey}) : super(key: key);
 
   @override
   State<HomeAppBar> createState() => _AppBarState();
@@ -30,7 +29,7 @@ class _AppBarState extends State<HomeAppBar> {
             mainAxisAlignment: MainAxisAlignment.spaceBetween,
             children: [
               InkWell(
-                onTap: (){
+                onTap: () {
                   widget.scaffoldKey.currentState.openDrawer();
                 },
                 child: UserImage(

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(
-      elevation: 20,
+    return ClipRRect(
       borderRadius: const BorderRadius.only(topLeft: Radius.circular(20.0), topRight: Radius.circular(20.0)),
-      child: SizedBox(
-        height: 100,
-        child: ClipRRect(
-          borderRadius: const BorderRadius.all(Radius.circular(20.0)),
-          child: BottomNavigationBar(
-            items: <BottomNavigationBarItem>[
-              BottomNavigationBarItem(
-                icon: SvgPicture.asset('assets/images/Overview.svg', width: 24, height: 24, color: _selectedIndex == 0 ? AppColor.primary70 : AppColor.neutral20),
-                label: context.translate(TranslationKeys.overview),
-              ),
-              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,
-            unselectedFontSize: 14,
-            unselectedLabelStyle: const TextStyle(height: 2),
-            selectedLabelStyle: const TextStyle(height: 2),
-            selectedItemColor: AppColor.primary70,
-            unselectedItemColor: AppColor.neutral20,
-            onTap: _onItemTapped,
-          ),
+      child: Container(
+        height: 100.toScreenHeight,
+        decoration: BoxDecoration(
+          boxShadow: [BoxShadow(color: Colors.black.withOpacity(0.05), blurRadius: 14)],
+        ),
+        child: BottomNavigationBar(
+          items: <BottomNavigationBarItem>[
+            navBarItem(index: 0, iconName: "overview", label: TranslationKeys.overview),
+            navBarItem(index: 1, iconName: "requests", label: TranslationKeys.myRequests),
+            navBarItem(index: 2, iconName: "assets", label: TranslationKeys.myAssets),
+            navBarItem(index: 3, iconName: "message", label: TranslationKeys.contactUs),
+          ],
+          currentIndex: _selectedIndex,
+          selectedFontSize: 12,
+          onTap: (index) {
+            setState(() {
+              _selectedIndex = index;
+            });
+            widget.onPressed(index);
+          },
+        ),
+      ),
+    );
+  }
+
+  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),
     );
   }
 }