How to add ontap function to my bottom nav bar

Question

I want to add on tap function to my bottom nav bar items, My code looks like this:

BottomNavigationBarItem(
  icon: Icon(
    Icons.settings,
    color: Colors.grey,
  )
)

I would recommend you to read the BottomNavigationBar documentation — Carlos Sandoval, Apr 08 '23 at 04:36

score 1 · Answer 1 · answered Apr 07 '23 at 12:17

1

There is an onTap function of BottomNavigationBar , example code

 bottomNavigationBar: BottomNavigationBar(
        items: const <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            icon: Icon(Icons.call),
            label: 'Calls',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.camera),
            label: 'Camera',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.chat),
            label: 'Chats',
          ),
        ],
        onTap: (i) {
         

        },

answered Apr 07 '23 at 12:17

Madhav Anadkat

101
7

How do I set the ontap for each icons boss – Wills Alpha Apr 07 '23 at 13:42
from @Madhav Anadkat answer ,onTap:(i){} the "i" is the index of the items. use can use that index to manipulate how u want the action should be. – magesh magi Apr 07 '23 at 13:59
Bro I would appreciate if you could point out the code.im totally lost – Wills Alpha Apr 07 '23 at 14:11

score 1 · Answer 2 · edited Apr 13 '23 at 11:40

As mentioned in Previous answer the onTap function is used to interact with the bottomNavbar items. The i in it is for index.

onTap: (i) {
             if(i == 0){
               print("tapped on calls"); 
             }
             if(i == 1){
               print("tapped on camera"); 
             }
             if(i == 2){
               print("tapped on chats"); 
             }
            },

Now in the conditions just add what you want to do when clicked on bNavBar items.

How to add ontap function to my bottom nav bar

2 Answers2