feat: new icon bottom navigation bar

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';

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<BottomNavigationView> {
       ProfileView(),
     ];
 
-    List<BottomNavigationBarItem> listNavigation = const [
+    List<BottomNavigationItem> listNavigation = [
-      BottomNavigationBarItem(
+      BottomNavigationItem(PathAssets.iconNavigationHome, 'Home'),
-        icon: Icon(Icons.home_outlined),
+      BottomNavigationItem(PathAssets.iconNavigationPlan, 'Plan'),
-        label: 'Home',
+      BottomNavigationItem(PathAssets.iconNavigationTransaction, 'Transaction'),
-      ),
+      BottomNavigationItem(PathAssets.iconNavigationPortfolio, 'Portfolio'),
-      BottomNavigationBarItem(
+      BottomNavigationItem(PathAssets.iconNavigationProfile, 'Profile')
-        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',
-      ),
     ];
 
     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<BottomNavigationView> {
             });
           },
           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),
+          selectedLabelStyle: const TextStyle(color: ColorPalette.primary, fontSize: 12),
-          unselectedLabelStyle: const TextStyle(color: Colors.black),
+          unselectedLabelStyle: const TextStyle(color: Colors.black, fontSize: 12),
         ),
       ),
     );