Question 75074 in Flutter Question posted in
The official Flutter documentation can be found here.

How to add ontap function to my bottom nav bar – Flutter

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,
  )
)
Tags:

2

Answers


  1. 0

    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) {
         

        },
    Login or Signup to reply.
  2. 0

    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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search