BottomBar and dark Theme

[vptcnt]

Hello,

I have a problem to manage Dark/light theme for the bottombar because some default colors are present in the code

The code in nylo_support/lib/widgets/navigation_hub/navigation_hub.dart is

Widget? bottomNavigationBar = BottomNavigationBar(
        currentIndex: getCurrentIndex,
        onTap: onTap,
        selectedLabelStyle: layout?.selectedLabelStyle ??
            TextStyle(
              color: Colors.black,
              fontWeight: FontWeight.w600,
            ),
        unselectedLabelStyle: layout?.unselectedLabelStyle ??
            TextStyle(
              color: Colors.black,
              fontWeight: FontWeight.w400,
            ),
        showSelectedLabels: layout?.showSelectedLabels ?? true,
        showUnselectedLabels: layout?.showUnselectedLabels ?? true,
        selectedItemColor: layout?.selectedItemColor ?? Colors.black,
        unselectedItemColor: layout?.unselectedItemColor ?? Colors.black,
        selectedFontSize: layout?.selectedFontSize ?? 14.0,
        unselectedFontSize: layout?.unselectedFontSize ?? 12.0,
        iconSize: layout?.iconSize ?? 24.0,
        elevation: layout?.elevation ?? 8.0,
        backgroundColor: layout?.backgroundColor,
        type: layout?.type ?? BottomNavigationBarType.fixed,
        items: [
          for (MapEntry<int, NavigationTab> page in pages.entries)
            _buildBottomNavigationBarItem(page),
        ],
      );

As the nylo framework is based on Theme, I suggest to remove all the default colors from the code. And even the calls to the layout?.xxxxColor because it's not possible to choose a color depending of the brightness because we can't use context in the bottombar declaration

 NavigationHubLayout? layout = .bottomNav(
    selectedFontSize: 14.sp,
    unselectedFontSize: 12.sp,
    unselectedLabelStyle: TextStyle(color: Colors.red), // Context is not available 
    selectedLabelStyle: TextStyle(color: Colors.amber),
    // Not possible to do Theme.brightnessOf(context) == .dark ? Colors.white : Colors.black
  );

To manage my auto dark/light theme changing, I had to change the code :

 Widget? bottomNavigationBar = BottomNavigationBar(
        currentIndex: getCurrentIndex,
        onTap: onTap,

        selectedLabelStyle: layout?.selectedLabelStyle /* ??
            TextStyle(
              color: Colors.black,
              fontWeight: FontWeight.w600,
            ) */,
        unselectedLabelStyle: layout?.unselectedLabelStyle /* ??
            TextStyle(
              color: Colors.black,
              fontWeight: FontWeight.w400,
            ) */,
        showSelectedLabels: layout?.showSelectedLabels ?? true,
        showUnselectedLabels: layout?.showUnselectedLabels ?? true,
        selectedItemColor: layout?.selectedItemColor /* ?? Colors.black */, 
        unselectedItemColor: layout?.unselectedItemColor /* ?? ?? Colors.black */,
        selectedFontSize: layout?.selectedFontSize ?? 14.0,
        unselectedFontSize: layout?.unselectedFontSize ?? 12.0,
        iconSize: layout?.iconSize ?? 24.0,
        elevation: layout?.elevation ?? 8.0,
        backgroundColor: layout?.backgroundColor,
        type: layout?.type ?? BottomNavigationBarType.fixed,
        items: [
          for (MapEntry<int, NavigationTab> page in pages.entries)
            _buildBottomNavigationBarItem(page),
        ],
      );

[agordn52]

Hi @vptcnt,

Thanks for reporting this.

I'll take a look at my earliest convenience. I'm currently working on Nylo v7.

[vptcnt]

I can't wait to test the version 7.
If you need a tester...