Merge pull request #521 from EnsembleUI/bottom-nav-bar-with-fab

Fixed bottom nav bar item and floating item color

Author: vinothvino42

Diff for: lib/framework/view/bottom_nav_page_group.dart

@@ -68,9 +68,9 @@ class BottomNavPageGroup extends StatefulWidget {
 
 class _BottomNavPageGroupState extends State<BottomNavPageGroup> {
   late List<MenuItem> menuItems;
-  Widget? fab;
-  FloatingAlignment floatingAlignment = FloatingAlignment.none;
+  FloatingAlignment floatingAlignment = FloatingAlignment.center;
   int? floatingMargin;
+  MenuItem? fabMenuItem;
 
   @override
   void initState() {
@@ -85,26 +85,41 @@ class _BottomNavPageGroupState extends State<BottomNavPageGroup> {
       throw LanguageError('There should be only one floating nav bar item');
     }
     if (fabItems.isNotEmpty) {
-      final fabMenuItem = fabItems.first;
-      floatingMargin = fabMenuItem.floatingMargin;
-      final dynamic customIcon = _buildCustomIcon(fabMenuItem);
-      fab = Theme(
+      fabMenuItem = fabItems.first;
+    }
+    if (fabMenuItem != null && fabMenuItem?.floatingAlignment != null) {
+      floatingAlignment =
+          FloatingAlignment.values.byName(fabMenuItem!.floatingAlignment);
+    }
+  }
+
+  Widget? _buildFloatingButton() {
+    if (fabMenuItem != null) {
+      floatingMargin = fabMenuItem!.floatingMargin;
+      final dynamic customIcon = _buildCustomIcon(fabMenuItem!);
+
+      final floatingItemColor =
+          Utils.getColor(widget.menu.styles?['floatingIconColor']) ??
+              Theme.of(context).colorScheme.onSecondary;
+      final floatingBackgroundColor =
+          Utils.getColor(widget.menu.styles?['floatingBackgroundColor']) ??
+              Theme.of(context).colorScheme.secondary;
+
+      return Theme(
         data: ThemeData(useMaterial3: false),
         child: customIcon ??
             FloatingActionButton(
+              backgroundColor: floatingBackgroundColor,
               child: ensemble.Icon(
-                fabMenuItem.icon ?? '',
-                library: fabMenuItem.iconLibrary,
-                color: Colors.white,
+                fabMenuItem!.icon ?? '',
+                library: fabMenuItem!.iconLibrary,
+                color: floatingItemColor,
               ),
-              onPressed: () => _floatingButtonTapped(fabMenuItem),
+              onPressed: () => _floatingButtonTapped(fabMenuItem!),
             ),
       );
-      if (fab != null) {
-        floatingAlignment =
-            FloatingAlignment.values.byName(fabMenuItem.floatingAlignment);
-      }
     }
+    return null;
   }
 
   void _floatingButtonTapped(MenuItem fabMenuItem) {
@@ -123,8 +138,7 @@ class _BottomNavPageGroupState extends State<BottomNavPageGroup> {
       floatingActionButtonLocation: floatingAlignment == FloatingAlignment.none
           ? null
           : floatingAlignment.location,
-      floatingActionButton:
-          floatingAlignment == FloatingAlignment.none ? null : fab,
+      floatingActionButton: _buildFloatingButton(),
       body: PageGroupWidget(
         scopeManager: widget.scopeManager,
         child: widget.child,
@@ -135,6 +149,12 @@ class _BottomNavPageGroupState extends State<BottomNavPageGroup> {
   EnsembleBottomAppBar? _buildBottomNavBar() {
     List<FABBottomAppBarItem> navItems = [];
 
+    final unselectedColor = Utils.getColor(widget.menu.styles?['color']) ??
+        Theme.of(context).unselectedWidgetColor;
+    final selectedColor =
+        Utils.getColor(widget.menu.styles?['selectedColor']) ??
+            Theme.of(context).primaryColor;
+
     // final menu = widget.menu;
     for (int i = 0; i < menuItems.length; i++) {
       MenuItem item = menuItems[i];
@@ -148,13 +168,13 @@ class _BottomNavPageGroupState extends State<BottomNavPageGroup> {
           ensemble.Icon(
             item.activeIcon ?? item.icon,
             library: item.iconLibrary,
-            color: Colors.white,
+            color: selectedColor,
           );
       final icon = customIcon ??
           ensemble.Icon(
             item.icon ?? '',
             library: item.iconLibrary,
-            color: Colors.white60,
+            color: unselectedColor,
           );
       navItems.add(
         FABBottomAppBarItem(
@@ -169,8 +189,8 @@ class _BottomNavPageGroupState extends State<BottomNavPageGroup> {
     return EnsembleBottomAppBar(
       backgroundColor: Utils.getColor(widget.menu.styles?['backgroundColor']) ??
           Colors.white,
-      color: Colors.white60,
-      selectedColor: Colors.white,
+      color: unselectedColor,
+      selectedColor: selectedColor,
       notchedShape: const CircularNotchedRectangle(),
       onTabSelected: widget.onTabSelected,
       items: navItems,
@@ -197,7 +217,7 @@ class EnsembleBottomAppBar extends StatefulWidget {
   EnsembleBottomAppBar({
     super.key,
     required this.items,
-    this.height = 80.0,
+    this.height = 70.0,
     this.iconSize = 24.0,
     required this.backgroundColor,
     required this.color,
@@ -316,6 +336,7 @@ class EnsembleBottomAppBarState extends State<EnsembleBottomAppBar> {
         child: Material(
           type: MaterialType.transparency,
           child: InkWell(
+            customBorder: const CircleBorder(),
             onTap: () => onPressed(index),
             child: item.isCustom
                 ? icon