From 06152bee2fb3c5d3b8a38b68767787301693f122 Mon Sep 17 00:00:00 2001 From: zaid_daoud Date: Tue, 10 Oct 2023 13:51:23 +0300 Subject: [PATCH] Fix Bottom Nav Bar Style --- assets/images/{Overview.svg => overview.svg} | 0 assets/translations/ar.json | 4 +- assets/translations/en.json | 4 +- lib/models/enums/translation_keys.dart | 14 +--- lib/new_views/app_style/app_themes.dart | 43 +++++----- .../common_widgets/app_bar/home_app_bar.dart | 7 +- .../common_widgets/app_bottom_nav_bar.dart | 78 +++++++++---------- 7 files changed, 63 insertions(+), 87 deletions(-) rename assets/images/{Overview.svg => overview.svg} (100%) diff --git a/assets/images/Overview.svg b/assets/images/overview.svg similarity index 100% rename from assets/images/Overview.svg rename to assets/images/overview.svg diff --git a/assets/translations/ar.json b/assets/translations/ar.json index 9964ed9..8cb05a0 100644 --- a/assets/translations/ar.json +++ b/assets/translations/ar.json @@ -7,7 +7,7 @@ "requiredField" : "الحقل مطلوب", "passwordLengthMessage" : "كلمة السر أقل من 6 خانات", "overview" : "نظرة عامة", - "myRequest" : "طلباتي", - "Assets" : "الاصول", + "myRequests" : "طلباتي", + "myAssets" : "ممتلكاتي", "contactUs": "اتصل بنا" } \ No newline at end of file diff --git a/assets/translations/en.json b/assets/translations/en.json index 23d6251..0d13be7 100644 --- a/assets/translations/en.json +++ b/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" } \ No newline at end of file diff --git a/lib/models/enums/translation_keys.dart b/lib/models/enums/translation_keys.dart index b14e3e6..ba70c18 100644 --- a/lib/models/enums/translation_keys.dart +++ b/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 } diff --git a/lib/new_views/app_style/app_themes.dart b/lib/new_views/app_style/app_themes.dart index d12eb48..a9c5d9d 100644 --- a/lib/new_views/app_style/app_themes.dart +++ b/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)), ); } diff --git a/lib/new_views/common_widgets/app_bar/home_app_bar.dart b/lib/new_views/common_widgets/app_bar/home_app_bar.dart index 94e9f99..36ebc3d 100644 --- a/lib/new_views/common_widgets/app_bar/home_app_bar.dart +++ b/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 scaffoldKey; - HomeAppBar({Key key, this.notificationCount, this.userImage, this.scaffoldKey}) : super(key: key); + final GlobalKey scaffoldKey; + const HomeAppBar({Key key, this.notificationCount, this.userImage, this.scaffoldKey}) : super(key: key); @override State createState() => _AppBarState(); @@ -30,7 +29,7 @@ class _AppBarState extends State { mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [ InkWell( - onTap: (){ + onTap: () { widget.scaffoldKey.currentState.openDrawer(); }, child: UserImage( diff --git a/lib/new_views/common_widgets/app_bottom_nav_bar.dart b/lib/new_views/common_widgets/app_bottom_nav_bar.dart index e78cb50..f0c4d72 100644 --- a/lib/new_views/common_widgets/app_bottom_nav_bar.dart +++ b/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 { 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( - 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: [ + 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), ); } }