Inactive icon shown as gray even though its set as white.

[TOMSLAUS]

How can I make innactive icons be white (the same color as active one) ? Heres the code to recreate my issue

PersistentTabView:

PersistentTabView(
  tabs: routers.navBarsItems(context),
  navBarBuilder: (navBarConfig) => Style6BottomNavBar(
    navBarDecoration: NavBarDecoration(color: Constants.primaryColor),
    navBarConfig: navBarConfig,
  ),
  gestureNavigationEnabled: true,
  controller: authModel.tabController,
  resizeToAvoidBottomInset: true,
  popAllScreensOnTapOfSelectedTab: false,
  popActionScreens: PopActionScreensType.all,
  screenTransitionAnimation: const ScreenTransitionAnimation(
    curve: Curves.ease,
    duration: Duration(milliseconds: 200),
  ),
)

Nav bar items:

List<PersistentTabConfig> navBarsItems(BuildContext context) {
  return [
    PersistentTabConfig(
      screen: TeamDashBoardPage(),
      item: ItemConfig(
        activeForegroundColor: Colors.white,
        inactiveBackgroundColor: Colors.white,
        icon: const FaIcon(
          FontAwesomeIcons.house,
        ),
        title: (t.misc.home),
      ),
    ),
    PersistentTabConfig(
      screen: UserPaymentsPage(),
      item: ItemConfig(
        activeForegroundColor: Colors.white,
        inactiveBackgroundColor: Colors.white,
        icon: const FaIcon(FontAwesomeIcons.creditCard),
        title: (t.user.myPayments),
      ),
    ),
    PersistentTabConfig(
      screen: ProfilePage(),
      item: ItemConfig(
        activeForegroundColor: Colors.white,
        inactiveBackgroundColor: Colors.white,
        icon: const FaIcon(FontAwesomeIcons.user),
        title: (t.user.profile),
      ),
    ),
  ];
}

[jb3rndt]

In your TabConfig it should refer to the foregroundColor instead of the backgroundColor:

...
inactiveForegroundColor: Colors.white,
...