Search code examples
flutterdartuser-interfaceflutter-bottomnavigation

Change BottomNavBar colour Flutter


I have a flutter website with a bottom navigation bar, the bar however is white with white text. I don't know how to fix it so the icons and text can be visible. I tried setting the background colour but it keeps ignoring me and setting it to white.

Here is the code for the screen:

bottomNavigationBar: BottomNavigationBar(
        type: BottomNavigationBarType.shifting,
        items: const <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            icon: Icon(Icons.edit_note_sharp),
            label: 'txt1',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.checklist_outlined),
            label: 'txt2',
          ),
        ],
        currentIndex: _selectedIndex,
        onTap: onItemTapped,
        backgroundColor: kPrimaryColor,
        mouseCursor: SystemMouseCursors.click,
        selectedFontSize: 20,
        selectedIconTheme: const IconThemeData(color: Colors.amberAccent, size: 40),
        selectedItemColor: Colors.amberAccent,
        selectedLabelStyle: const TextStyle(fontWeight: FontWeight.bold, color: Colors.black),
        unselectedIconTheme: const IconThemeData(
          color: kPrimaryLightColor,
        ),
        unselectedItemColor: Colors.blueGrey,
      ),

Solution

  • Looks like the backgroundcolor variable of BottomNavigationBar is ignored when the type is set to BottomNavigationBarType.shifting.

    Changing that to BottomNavigationBarType.fixed enabled me to set my background colors accordingly.