I am working with the bottom bar from flutter templates called persistent bottombarbut when I started adding items in the bottom bar, the icons and text turns white.

As you can see here I added a new tab4 compared to the original code. if you try to bring it back to only three tabs the color will go back.

          class HomePage extends StatelessWidget {
        final _tab1navigatorKey = GlobalKey<NavigatorState>();
        final _tab2navigatorKey = GlobalKey<NavigatorState>();
        final _tab3navigatorKey = GlobalKey<NavigatorState>();
        final _tab4navigatorKey = GlobalKey<NavigatorState>();

        HomePage({Key? key}) : super(key: key);

        @override
        Widget build(BuildContext context) {
          return PersistentBottomBarScaffold(
            items: [
              PersistentTabItem(
                tab: const TabPage1(),
                icon: Icons.home,
                title: 'Home',
                navigatorkey: _tab1navigatorKey,
              ),
              PersistentTabItem(
                tab: const TabPage2(),
                icon: Icons.search,
                title: 'Search',
                navigatorkey: _tab2navigatorKey,
              ),
              PersistentTabItem(
                tab: const TabPage3(),
                icon: Icons.person,
                title: 'Profile',
                navigatorkey: _tab3navigatorKey,
              ),
              PersistentTabItem(
                tab: const TabPage4(),
                icon: Icons.person,
                title: 'Profile',
                navigatorkey: _tab4navigatorKey,
              ),
            ],
          );
        }
      }

      class TabPage1 extends StatelessWidget {
        const TabPage1({Key? key}) : super(key: key);

        @override
        Widget build(BuildContext context) {
          return Scaffold(
            appBar: AppBar(title: const Text('Tab 1')),
          );
        }
      }

      class TabPage2 extends StatelessWidget {
        const TabPage2({Key? key}) : super(key: key);

        @override
        Widget build(BuildContext context) {
          return Scaffold();
        }
      }

      class TabPage3 extends StatelessWidget {
        const TabPage3({Key? key}) : super(key: key);

        @override
        Widget build(BuildContext context) {
          return Scaffold();
        }
      }

      class TabPage4 extends StatelessWidget {
        const TabPage4({Key? key}) : super(key: key);

        @override
        Widget build(BuildContext context) {
          return Scaffold();
        }
      }

      class PersistentBottomBarScaffold extends StatefulWidget {
        /// pass the required items for the tabs and BottomNavigationBar
        final List<PersistentTabItem> items;

        const PersistentBottomBarScaffold({Key? key, required this.items})
            : super(key: key);

        @override
        _PersistentBottomBarScaffoldState createState() =>
            _PersistentBottomBarScaffoldState();
      }

      class _PersistentBottomBarScaffoldState
          extends State<PersistentBottomBarScaffold> {
        int _selectedTab = 0;

        @override
        Widget build(BuildContext context) {
          return WillPopScope(
            onWillPop: () async {
              /// Check if curent tab can be popped
              if (widget.items[_selectedTab].navigatorkey?.currentState?.canPop() ??
                  false) {
                widget.items[_selectedTab].navigatorkey?.currentState?.pop();
                return false;
              } else {
                // if current tab can't be popped then use the root navigator
                return true;
              }
            },
            child: Scaffold(
              /// Using indexedStack to maintain the order of the tabs and the state of the
              /// previously opened tab
              body: IndexedStack(
                index: _selectedTab,
                children: widget.items
                    .map((page) => Navigator(
                          /// Each tab is wrapped in a Navigator so that naigation in
                          /// one tab can be independent of the other tabs
                          key: page.navigatorkey,
                          onGenerateInitialRoutes: (navigator, initialRoute) {
                            return [
                              MaterialPageRoute(builder: (context) => page.tab)
                            ];
                          },
                        ))
                    .toList(),
              ),

              /// Define the persistent bottom bar
              bottomNavigationBar: BottomNavigationBar(
                currentIndex: _selectedTab,
                onTap: (index) {
                  setState(() {
                    _selectedTab = index;
                  });
                },
                items: widget.items
                    .map((item) => BottomNavigationBarItem(
                        icon: Icon(item.icon), label: item.title))
                    .toList(),
              ),
            ),
          );
        }
      }

      /// Model class that holds the tab info for the [PersistentBottomBarScaffold]
      class PersistentTabItem {
        final Widget tab;
        final GlobalKey<NavigatorState>? navigatorkey;
        final String title;
        final IconData icon;

        PersistentTabItem(
            {required this.tab,
            this.navigatorkey,
            required this.title,
            required this.icon});
      }

CodePudding user response：

Can you provide a snippet of your code? Looking at the persistent bottombar sample code, my first assumption is that you may need to assign colors to the selectedItemColor and unselectedItemColor parameters:

bottomNavigationBar: BottomNavigationBar(
          currentIndex: _selectedIndex,
          selectedItemColor: const Color(0xff6200ee),
          unselectedItemColor: const Color(0xff757575),
          type: _bottomNavType,
          onTap: (index) {
            setState(() {
              _selectedIndex = index;
            });
          },
          items: _navBarItems),
    );