androidflutterdartflutter-bottomnavigationtextstyle

Why the label of BottomNavigationBarItem doesn't change after clicking?


The color of the labels of my selected and unselected BottomNavigationBarItems doesn't change... I have tried many ways, such like

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

and

unselectedLabelStyle: const TextStyle(color: Colors.grey, fontSize: 14),
selectedLabelStyle: const TextStyle(color: Colors.blue, fontSize: 14),

and so on. what am I doing wrong? Here is the code:

class RandomWordsState extends State<RandomWords> {
  var _currentIndex = 0;
  var _pageList = [HomePage(), RecommendPage(), PersonalPage()];
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('APPBAR'),
        centerTitle: true,
        elevation: 10,
      ),
      //body: this._pageList[this._currentIndex],
      body: IndexedStack(index: _currentIndex, children: _pageList,),
      bottomNavigationBar: BottomNavigationBar(
        selectedItemColor: Colors.blue,
        unselectedItemColor: Colors.black,
         //unselectedItemColor: Colors.black,
         //selectedItemColor: Colors.blue,
        //selectedLabelStyle: TextStyle(fontSize: 22),
        //selectedItemColor: Colors.red,
        //fixedColor: Colors.blue,

        items: <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            icon: Icon(
              Icons.home,
              //color: _currentIndex == 0 ? Colors.blue : Colors.grey,
            ),
            label: "A",
          ),
          BottomNavigationBarItem(
            label: "B",
            icon: Icon(
              Icons.recommend,
              //color: _currentIndex == 1 ? Colors.blue : Colors.grey,
            ),
          ),
          BottomNavigationBarItem(
            icon: Icon(
              Icons.person,
              //color: _currentIndex == 2 ? Colors.blue : Colors.grey,
            ),
            label: "C",
          )
        ],
        onTap: (value){
          setState(() {
            this._currentIndex = value.toInt();
          });
        },
        // unselectedLabelStyle: const TextStyle(color: Colors.grey, fontSize: 14),
        // selectedLabelStyle: const TextStyle(color: Colors.blue, fontSize: 14),
        type: BottomNavigationBarType.fixed,
      ),
    );
  }
}

Or, on the other hand, is there any way to change the color of label in BottomNavigationBarItem? Thanks.


Solution

  • You need to provide currentIndex on BottomNavigationBar to see the effect.

    bottomNavigationBar: BottomNavigationBar(
      currentIndex: _currentIndex,
    

    More about BottomNavigationBar.