From 89a79276a656f6ea6b6daa604bc9abbb3a672b78 Mon Sep 17 00:00:00 2001 From: Prajna Prayoga Date: Tue, 20 Feb 2024 19:33:32 +0700 Subject: [PATCH] feat: new icon bottom navigation bar --- assets/icons/icon-navigation-home.png | Bin 0 -> 1189 bytes assets/icons/icon-navigation-plan.png | Bin 0 -> 1467 bytes assets/icons/icon-navigation-portfolio.png | Bin 0 -> 2341 bytes assets/icons/icon-navigation-profile.png | Bin 0 -> 2381 bytes assets/icons/icon-navigation-transaction.png | Bin 0 -> 899 bytes lib/application/assets/path_assets.dart | 5 ++ lib/features/bottom_navigation_view.dart | 58 +++++++++++-------- 7 files changed, 38 insertions(+), 25 deletions(-) create mode 100644 assets/icons/icon-navigation-home.png create mode 100644 assets/icons/icon-navigation-plan.png create mode 100644 assets/icons/icon-navigation-portfolio.png create mode 100644 assets/icons/icon-navigation-profile.png create mode 100644 assets/icons/icon-navigation-transaction.png diff --git a/assets/icons/icon-navigation-home.png b/assets/icons/icon-navigation-home.png new file mode 100644 index 0000000000000000000000000000000000000000..58dd8d7d35a8371dda1e970450c5076087a36ee0 GIT binary patch literal 1189 zcmeAS@N?(olHy`uVBq!ia0vp^i9npd!3GkEk^xbi1s;*b3=BHnAk4VbcG^myAY*Zm zyA#8@b22Z19F}xPUq=Rpjs4tz5?O&2Z|i{Se&NCCcIE(#tel3 z^JSX^%UM)4{S|B&f3X}84!F-SpP_;&;rThCgEMwCObxkvM?_2~A|zSK(dxSOi(ZFY zFXz6jnR9zyy;H_AXW?J3w|p*4=Q>a*a~yuw4qPPMU5j8$aPrK=fLXV&Zrd1lEtuVjbf1V0Mo)PS?ehM3|Ue^aKt`G%{MPQ*9AElu`IAb@$bPuYsx! z!P-7W+7I3x$}PE`=VuZvBp}Z8Ztoqw2@OmZTdzIY!)X=h$}}Z!UViS6GL`7HeWh31 zB4Vzt+Wqu^ahp_c_VSXMiXJ!ejHWU&aWx1$y1l%4wQ!F>-zxcQ|Lqo3-FIKHns+J} z^OpDaN4`FP`>bYX06#|nn_h_8`PriB`DN8T4hn7x0?Gm%f*dJ(%3Kz*AAPRsk{>AB z8N?pEA>mi~FQt&@7j7)9XcW{I_|zKoFYo_*UzW(OB7+O}Lm$ZZy&t4$-lEjMU|PdfgM3>x%??v}@eUWMgZIC$o7TYE zvH#D3xt~=Pgfd&~N+wk=dh#?>#na_ibENFziYDLXhueO?zBWl<>bA#KZt~~PC|1n& zeRt~j@2{F~TDBBfJ9@>KGk&nP3dwfjU_bkAcS8&##}#4eY_{YUqu%W^IFE3!B(X3V zGBrvxIv{xxRd|7f;H>$F8`jk@#$J1RVYV1Ee^G&=LdwS4<>w*_cky&+U%1_Q>)}0T zj>sJECU!s8DqBv`j)0u-%AbW%!p+~0wO=`_`QmH~b8q-pj_J2Lzc%08IamAptH?Q< z9_qNunh3mhUH(e_QBFohO7x<~`ht@$NOSr>`tx!6-R%M!kL-JMF21?oV)T@brDpLC y>GA)5rpw7FJm@Q)7Hul~^B^=c%N&oqBL6}C;e&-{R`$SBg~8L+&t;ucLK6T(a^qM4 literal 0 HcmV?d00001 diff --git a/assets/icons/icon-navigation-plan.png b/assets/icons/icon-navigation-plan.png new file mode 100644 index 0000000000000000000000000000000000000000..261ac031d7ceca34b2c970528c8ae0fd27e819c5 GIT binary patch literal 1467 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 ZoHI_WD>d+w`ab{w002ovPDHLkV1n6VdWir4 literal 0 HcmV?d00001 diff --git a/lib/application/assets/path_assets.dart b/lib/application/assets/path_assets.dart index 2431f43..f6e47fa 100644 --- a/lib/application/assets/path_assets.dart +++ b/lib/application/assets/path_assets.dart @@ -49,6 +49,11 @@ class PathAssets { static const String iconTicket = 'assets/icons/icon-ticket.png'; static const String iconGadget = 'assets/icons/icon-gadget.png'; static const String iconCar = 'assets/icons/icon-car.png'; + static const String iconNavigationHome = 'assets/icons/icon-navigation-home.png'; + static const String iconNavigationPlan = 'assets/icons/icon-navigation-plan.png'; + static const String iconNavigationTransaction = 'assets/icons/icon-navigation-transaction.png'; + static const String iconNavigationPortfolio = 'assets/icons/icon-navigation-portfolio.png'; + static const String iconNavigationProfile = 'assets/icons/icon-navigation-profile.png'; /// IMAGE static const String imgSplashLogo = 'assets/images/splash-logo.png'; diff --git a/lib/features/bottom_navigation_view.dart b/lib/features/bottom_navigation_view.dart index 99e24c8..2be82d5 100644 --- a/lib/features/bottom_navigation_view.dart +++ b/lib/features/bottom_navigation_view.dart @@ -1,4 +1,6 @@ +import 'package:cims_apps/application/assets/path_assets.dart'; import 'package:cims_apps/application/theme/color_palette.dart'; +import 'package:cims_apps/core/utils/size_config.dart'; import 'package:cims_apps/features/dashboard/dashboard_account/view/homepage/homepage_view.dart'; import 'package:cims_apps/features/dashboard/dashboard_account/view/plan/view/plan_view.dart'; import 'package:cims_apps/features/dashboard/dashboard_account/view/portfolio/portfolio_view.dart'; @@ -6,6 +8,12 @@ import 'package:cims_apps/features/profile/view/profile_view.dart'; import 'package:cims_apps/features/transaction/view/transaction_view.dart'; import 'package:flutter/material.dart'; +class BottomNavigationItem { + String icon, label; + + BottomNavigationItem(this.icon, this.label); +} + class BottomNavigationView extends StatefulWidget { const BottomNavigationView({Key? key}) : super(key: key); @@ -26,32 +34,20 @@ class _BottomNavigationViewState extends State { ProfileView(), ]; - List listNavigation = const [ - BottomNavigationBarItem( - icon: Icon(Icons.home_outlined), - label: 'Home', - ), - BottomNavigationBarItem( - icon: Icon(Icons.file_open), - label: 'Plan', - ), - BottomNavigationBarItem( - icon: Icon(Icons.compare_arrows), - label: 'Transaction', - ), - BottomNavigationBarItem( - icon: Icon(Icons.pie_chart_rounded), - label: 'Portfolio', - ), - BottomNavigationBarItem( - icon: Icon(Icons.person), - label: 'Profile', - ), + List listNavigation = [ + BottomNavigationItem(PathAssets.iconNavigationHome, 'Home'), + BottomNavigationItem(PathAssets.iconNavigationPlan, 'Plan'), + BottomNavigationItem(PathAssets.iconNavigationTransaction, 'Transaction'), + BottomNavigationItem(PathAssets.iconNavigationPortfolio, 'Portfolio'), + BottomNavigationItem(PathAssets.iconNavigationProfile, 'Profile') ]; return Scaffold( body: listWidget[_selectedIndex], - bottomNavigationBar: Padding( + bottomNavigationBar: Container( + decoration: const BoxDecoration( + border: Border(top: BorderSide(color: ColorPalette.slate200)) + ), padding: const EdgeInsets.symmetric(vertical: 12), child: BottomNavigationBar( elevation: 0, @@ -61,13 +57,25 @@ class _BottomNavigationViewState extends State { }); }, currentIndex: _selectedIndex, - items: listNavigation, + items: listNavigation.asMap().entries.map((e) { + return BottomNavigationBarItem( + icon: Padding( + padding: const EdgeInsets.only(bottom: 4), + child: Image.asset( + e.value.icon, + width: SizeConfig.width * 0.06, + color: e.key == _selectedIndex ? ColorPalette.primary : ColorPalette.slate800 + ), + ), + label: e.value.label + ); + }).toList(), type: BottomNavigationBarType.fixed, showUnselectedLabels: true, selectedItemColor: ColorPalette.primary, unselectedItemColor: Colors.black, - selectedLabelStyle: const TextStyle(color: ColorPalette.primary), - unselectedLabelStyle: const TextStyle(color: Colors.black), + selectedLabelStyle: const TextStyle(color: ColorPalette.primary, fontSize: 12), + unselectedLabelStyle: const TextStyle(color: Colors.black, fontSize: 12), ), ), );