I want to change the color when I click the nav bar item. how to do this. appreciate your help on this. below I have ad my code for your reference. ............... ............. ............ ............. ........... ............ ............. ........... ............. ........... .......... .......... ........... ........... .........

class BottomNavigation extends StatefulWidget {
  const BottomNavigation({Key? key}) : super(key: key);

  @override
  State<BottomNavigation> createState() => _BottomNavigationState();
}

class _BottomNavigationState extends State<BottomNavigation> {
  int _selectedIndex = 0;
  int _selectedTab = 0;

  void _onItemTapped(int index) {
    setState(() {
      _selectedIndex = index;
    });
  }

  @override
  Widget build(BuildContext context) {

    return Container(
      decoration: const BoxDecoration(
        color: backgroundWhite,
      ),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceAround,
        children: [
          IconButton(
            enableFeedback: false,
            onPressed: () {
              Get.to(HomeScreenCompanyList());
            },
            icon: const Icon(
              Icons.home_outlined,
              color: textGrey,
              size: 25,
            ),
          ),
          IconButton(
            enableFeedback: false,
            onPressed: () {
              Get.to(CompanyList());
            },
            icon: const Icon(
              Icons.folder_outlined,
              color: textGrey,
              size: 25,
            ),
          ),
          IconButton(
            enableFeedback: false,
            onPressed: () {
              Get.to(Category());
            },
            icon: const Icon(
              Icons.search,
              color: textGrey,
              size: 25,
            ),
          ),
          IconButton(
            enableFeedback: false,
            onPressed: () {
              Get.to(Services());
            },
            icon: const Icon(
              Icons.edit_note_outlined,
              color: textGrey,
              size: 25,
            ),
          ),
          IconButton(
            enableFeedback: false,
            onPressed: () {},
            icon: const Icon(
              Icons.person_outline,
              color: textGrey,
              size: 25,
            ),
          ),
        ],
      ),
    );
  }
}

CodePudding user response：

class _BottomNavigationState extends State<AllPageListView> {
  int _selectedIndex = 0;
  int _selectedTab = 0;

  void _onItemTapped(int index) {
    setState(() {
      _selectedIndex = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          Expanded(
              child: Center(
            child: Text('Body'),
          )),
        ],
      ),
      bottomNavigationBar: Container(
        decoration: const BoxDecoration(
          // color: backgroundWhite,
          color: Colors.white,
        ),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          children: [
            IconButton(
              enableFeedback: false,
              onPressed: () {
                _onItemTapped(1);
              },
              icon: Icon(
                Icons.home_outlined,
                color: _selectedIndex == 1 ? Colors.red : Colors.black,
                size: 25,
              ),
            ),
            IconButton(
              enableFeedback: false,
              onPressed: () {
                _onItemTapped(2);
              },
              icon: Icon(
                Icons.folder_outlined,
                color: _selectedIndex == 2 ? Colors.red : Colors.black,
                size: 25,
              ),
            ),
            IconButton(
              enableFeedback: false,
              onPressed: () {
                _onItemTapped(3);
              },
              icon: Icon(
                Icons.search,
                color: _selectedIndex == 3 ? Colors.red : Colors.black,
                size: 25,
              ),
            ),
            IconButton(
              enableFeedback: false,
              onPressed: () {
                _onItemTapped(4);
              },
              icon: Icon(
                Icons.edit_note_outlined,
                color: _selectedIndex == 4 ? Colors.red : Colors.black,
                size: 25,
              ),
            ),
            IconButton(
              enableFeedback: false,
              onPressed: () {
                _onItemTapped(5);
              },
              icon: Icon(
                Icons.person_outline,
                color: _selectedIndex == 5 ? Colors.red : Colors.black,
                size: 25,
              ),
            ),
          ],
        ),
      ),
    );
  }
}