CODEWITHSUNDEEP
flutterdartflutter-bottomnavigationtextstyle
Tom
Tom

Reputation: 643

The Label Color doesn't change on the BottomNavigationBar

The color of the labels of my selected and unselected BottomNavigationBarItems doesn't change... what am I doing wrong? Here is the code:

bottomNavigationBar: BottomNavigationBar(
        selectedLabelStyle: TextStyle(color: Colors.black),
        unselectedLabelStyle: TextStyle(color: Colors.black),
        backgroundColor: Colors.white,
        
        onTap: onTabTapped,
        currentIndex: _currentIndex, // this will be set when a new tab is tapped
        items: [
          BottomNavigationBarItem(
            icon: Icon(Icons.home, color: Colors.black,),
            label: 'Home',

          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.search, color: Colors.black,),
            label: 'Messages',
          ),
          BottomNavigationBarItem(
              icon: Icon(Icons.person, color: Colors.black,),
              label: 'Profile'
          )
        ],
      ),

Upvotes: 3

Views: 1170

Answers (4)

Kiran Jadhav
Kiran Jadhav

Reputation: 3327

Use below simple solution to change the selectedLabelStyle and unselectedLabelStyle - (color for label text ):

          BottomNavigationBarItem(
            activeIcon: Image.asset(
              "assets/images/race_icon_fill.png",
              height: 30,
              width: 30,
              fit: BoxFit.cover,
              color: appThemeColor,
            ),
            icon: Image.asset(
              "assets/images/race_icon.png",
              height: 30,
              width: 30,
              fit: BoxFit.cover,
              color: appLightGrayColor,
            ),
            label: 'My Races',
          ),

==========================================

            selectedItemColor: Colors.black,
            unselectedItemColor: Colors.grey,
            selectedLabelStyle: const TextStyle(
                fontWeight: FontWeight.w500, fontFamily: AlbertSans),
            unselectedLabelStyle: const TextStyle(
                fontWeight: FontWeight.w300, fontFamily: AlbertSans, color: Colors.deepPurple),

Upvotes: 0

Md. Yeasin Sheikh
Md. Yeasin Sheikh

Reputation: 63799

The common mistake can be putting _currentIndex inside build method. Follow

 int _currentIndex = 0;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      bottomNavigationBar: BottomNavigationBar(
        selectedLabelStyle: TextStyle(color: Colors.black),
        unselectedLabelStyle: TextStyle(color: Colors.black),
        backgroundColor: Colors.white,
        onTap: (v) {
          _currentIndex = v;
          print(v);
          setState(() {});
        },
        currentIndex: _currentIndex,
        items: [

Upvotes: 0

Ikhiloya Imokhai
Ikhiloya Imokhai

Reputation: 152

Add this to your Bottom Navigation Bar style:

showUnselectedLabels: true,

Upvotes: 0

Raiyan
Raiyan

Reputation: 428

Change this

selectedLabelStyle: TextStyle(color: Colors.black),
unselectedLabelStyle: TextStyle(color: Colors.black),

To this:

selectedItemColor: Colors.black,
unselectedItemColor: Colors.black,

Upvotes: 4

Related Questions