Search code examples
flutterdartbottomnavigationview

Set color on active item in a BottomNavigationBarType.fixed


I have a fixed BottomNavigationBar with 4 items as described below.

How can I set the color of the selected item?

I've tried with: fixedColor and selectedItemColor but it would't work.

BottomNavigationBar(
            type: BottomNavigationBarType.fixed,
            fixedColor: Colors.blue,
            //selectedItemColor: Colors.blue,
            currentIndex: snapshot.data.index,
            onTap: _bottomNavBarBloc.pickItem,
            items: [
              BottomNavigationBarItem(
                icon: Icon(
                  Icons.access_time,
                  color: Colors.black,
                ),
              ),
              BottomNavigationBarItem(...),
              BottomNavigationBarItem(...),
              BottomNavigationBarItem(...),
            ]);

Solution

  • You can provide a different icon for Active and Normal Bottom Navigation Item.

    BottomNavigationBarItem _getNavigationItem(IconData icon, String title) {
        return BottomNavigationBarItem(
            backgroundColor: Colors.white,
            activeIcon: Icon(
              icon,
              color: Colors.teal,
            ),
            icon: Icon(icon, color: Colors.grey),
            title: Text(title),
        );
    }