Flutter - after clicking bottom navigation menu icon => selected icon color and text color not changing

Question

I am new to flutter, Please help me to get out of this issue,

Issue -> After click any of the menu icon, color is not changing

While staring app, icon colours are setting correctly, Home icon is default, if I click Scan or settings icon green color is not setting for icon as well as text,

I have tried activeIcon of BottomNavigationBarItem still not working

Here is my code,

  class TabNavigationState extends State<ScaffoldTest> {
 int currentTabIndex = 1;
 var tabs = [Home(), Camera(), Settings()];

 onTabbed(index) => {
    setState(() {
      currentTabIndex = index;
    })
  };

@override
 Widget build(BuildContext context) {
return Scaffold(
  appBar: AppBar(
    backgroundColor: Colors.teal,
    leading: IconButton(
        icon: Icon(
          Icons.search,
          color: Colors.white,
        ),
        onPressed: null),
    centerTitle: false,
    actions: <Widget>[
      IconButton(
          icon: Icon(
            Icons.info_outline,
            color: Colors.white,
          ),
          color: Colors.white,
          onPressed: () => debugPrint("Icon tabbed")),
      IconButton(
          icon: Icon(
            Icons.save,
            color: Colors.white,
          ),
          color: Colors.white,
          onPressed: () => debugPrint("Icon tabbed")),
    ],
    title: Text(
      "Test",
      style: TextStyle(color: Colors.white),
    ),
  ),
  backgroundColor: Colors.white,
  body: tabs[currentTabIndex],
  floatingActionButton: FloatingActionButton(
    onPressed: null,
    child: IconButton(
      icon: Icon(
        Icons.camera,
        color: Colors.white,
      ),
    ),
  ),
  bottomNavigationBar: BottomNavigationBar(
    // backgroundColor: Colors.blueAccent.shade100,
    selectedItemColor: Colors.green,
    unselectedItemColor: Colors.grey,
      showSelectedLabels: true,
    items: [
      BottomNavigationBarItem(
          icon: Icon(Icons.home),
          title: Text(
            "Home",
            textDirection: TextDirection.ltr,
          )),
      BottomNavigationBarItem(
          icon: Icon(Icons.camera),
          title: Text(
            "Scan",
            textDirection: TextDirection.ltr,
          )),
      BottomNavigationBarItem(
          icon: Icon(Icons.settings),
          title: Text(
            "Settings",
            textDirection: TextDirection.ltr,
          ))
    ],
    onTap: onTabbed,
    ),
  );
}

https://i.stack.imgur.com/aGJqG.png

Answer 1

BottomNavigationBar has attribute currentIndex to know which is current active tab. You need to set it in your onTabbed method like

int _selectedIndex = 0;

void onTabbed(int index) {
  setState(() {
    _selectedIndex = index;
    ...
  });
  ....
}
// And use _selectedIndex in BottomNavigationBar
Widget build(BuildContext context) {
  return Scaffold(
    ...
    bottomNavigationBar: BottomNavigationBar(
      currentIndex: _selectedIndex,
    ),
    ...
  );
}