Bottom navigation bar item in flutter not changing color

Question

does anybody know why my Bottom navigation bar item isn't changing color when selected or deselected. It is Navigating to the correct screen, but the home item is always blue for some reason. Any help would be appreciated.

 import 'package:flutter/material.dart';
import 'package:only_johns_lower_sdk/views/screens/nav_screens.dart/home_screen.dart';
import 'package:only_johns_lower_sdk/views/screens/nav_screens.dart/profile_screen.dart';
import 'package:only_johns_lower_sdk/views/screens/nav_screens.dart/users_screen.dart';


class MainPage extends StatefulWidget {
  const MainPage({super.key});

  @override
  State<MainPage> createState() => _MainPageState();
}



class _MainPageState extends State<MainPage> {

  int _pageIndex = 0;

final List<Widget> _pages = [
  const HomeScreen(),
  const ProfileScreen(),
  const UsersScreen()
  
];

  void _onItemTapped(index) {
   setState(() {
            _pageIndex = index;
          });
}
  @override
  Widget build(BuildContext context) {
    return  Scaffold(
      body: _pages[_pageIndex],
      bottomNavigationBar: BottomNavigationBar(

        selectedItemColor: Colors.blue,
        unselectedItemColor: Colors.grey,
        onTap: _onItemTapped,
        items: const [
        BottomNavigationBarItem(icon: Icon(Icons.home), label: 'Home'),
        BottomNavigationBarItem(icon: Icon(Icons.person), label: 'Profile'),
        BottomNavigationBarItem(icon: Icon(Icons.person_search), label: 'Johns'),
      ],),

      
    );
    
    
  }
}

Answer 1

The code you've provided sets up a bottom navigation bar with three items and changes the displayed page when an item is tapped. However, you're facing an issue where the color of the selected item does not change as expected. The issue might be related to not setting the currentIndex property of the BottomNavigationBar. This property needs to be updated to tell the BottomNavigationBar which item is currently selected, so it can adjust the color accordingly.

HEre is some code you can use, also some hints:

1. Make sure you set the currentIndex property of your BottomNavigationBar to the _pageIndex variable. This links the navigation bar's state to your page controller.

2. Ensure that the selectedItemColor and unselectedItemColor are correctly set, which you've already done.

Here is the corrected version of your build method:

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: _pages[_pageIndex], /// 1. Display the selected page
    bottomNavigationBar: BottomNavigationBar(
      currentIndex: _pageIndex, /// 2. Add this line
      selectedItemColor: Colors.blue,
      unselectedItemColor: Colors.grey,
      onTap: _onItemTapped,
      items: const [
        BottomNavigationBarItem(icon: Icon(Icons.home), label: 'Home'),
        BottomNavigationBarItem(icon: Icon(Icons.person), label: 'Profile'),
        BottomNavigationBarItem(icon: Icon(Icons.person_search), label: 'Johns'),
      ],
    ),
  );
}

By adding the currentIndex: _pageIndex, line, you're informing the BottomNavigationBar which item is currently selected based on the value of _pageIndex. This should resolve the issue with the color not changing when items are selected or deselected.

Let me know if this worked for you.

Answer 2

You need to pass the current index to the BottomNavigationBar.

bottomNavigationBar: BottomNavigationBar(
  currentIndex: _pageIndex, // Add this
  // ...
)

Answer 3

You should pass current index into you'r BottomnavigationBar

import 'package:chat_app/screens/home%20tab/callscreen.dart';
import 'package:chat_app/screens/home%20tab/chatscreen.dart';
import 'package:chat_app/screens/home%20tab/groupchatscreen.dart';
import 'package:flutter/material.dart';

class BottomNavBar extends StatefulWidget {
  const BottomNavBar({super.key});

  @override
  State<BottomNavBar> createState() => _BottomNavBar();
}

class _BottomNavBar extends State<BottomNavBar> {
  int _pageIndex = 0;

  final List<Widget> _pages = [
    const ChatScreen(),
    const GroupChatScreen(),
    const CallScreen(),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: _pages[_pageIndex],
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: _pageIndex,
        items: const [
          BottomNavigationBarItem(
              icon: Icon(Icons.home),
              label: 'Home',
              backgroundColor: Colors.blue),
          BottomNavigationBarItem(
              icon: Icon(Icons.person),
              label: 'Profile',
              backgroundColor: Colors.blue),
          BottomNavigationBarItem(
              icon: Icon(Icons.person_search),
              label: 'Johns',
              backgroundColor: Colors.blue),
        ],
        //  selectedIconTheme: const IconThemeData(color: Colors.red),
        selectedLabelStyle: const TextStyle(color: Colors.red),
        selectedItemColor: Colors.red,
        unselectedLabelStyle: const TextStyle(color: Colors.blue),
        unselectedItemColor: Colors.blue,
        onTap: (index) => setState(() {
          print(index);
          _pageIndex = index;
        }),
      ),
    );
  }
}