Adding onPressed or onTab to BubbleBottomBarItem in Flutter

Question

Been trying to solve this all day. I am basically new to flutter. I want the Bottom icon buttons to have its own onTap methods like the normal FAB or BottomNavigationBar. please help! Thank you

Here is the code.

    return BubbleBottomBar(
      hasNotch: true,
      opacity: .2,
      currentIndex: currentIndex,
      onTap: changePage,
      borderRadius: BorderRadius.vertical(
          top: Radius.circular(
              16)), 
      elevation: 8,
      items: <BubbleBottomBarItem>[
        BubbleBottomBarItem(
            backgroundColor: Colors.indigo,
            icon: Icon(
              Icons.home,
              color: Colors.black,
            ),
            activeIcon: Icon(
              Icons.home,
              color: Colors.indigo,
            ),
            title: Text("Home")),
        BubbleBottomBarItem(
            backgroundColor: Colors.indigo,
            icon: Icon(
              Icons.folder_open,
              color: Colors.black,
            ),
            activeIcon: Icon(
              Icons.folder_open,
              color: Colors.indigo,
            ),
            title: Text("Get Job")),
        BubbleBottomBarItem(
            backgroundColor: Colors.indigo,
            icon: Icon(
              Icons.add_circle_outline,
              color: Colors.black,
            ),
            activeIcon: Icon(
              Icons.add_circle_outline,
              color: Colors.indigo,
            ),
            title: Text("Add Job")),
      ],
    );

  }
}

Answer 1

The BubbleBottomBarItem does not have any onTap or onPressed method, hence you need to use onTap in BubbleBottomBar. You can implement changePage as given in below example to handle the onTap in BubbleBottomBar.

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int currentIndex;
  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    currentIndex = 0;
  }

  void changePage(int index) {
    setState(() {
      currentIndex = index;
    });

    //You can have a switch case to Navigate to different pages
    switch (currentIndex){
      case 0:
         Navigator.push( context,
            MaterialPageRoute(builder: (context) => AnyClass()),
         );
         break;
     ...
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      bottomNavigationBar: BubbleBottomBar(
        hasNotch: true,
        fabLocation: BubbleBottomBarFabLocation.end,
        opacity: .2,
        currentIndex: currentIndex,
        onTap: changePage,
        borderRadius: BorderRadius.vertical(
            top: Radius.circular(
                16)), 
        elevation: 8,
        items: <BubbleBottomBarItem>[
        ...
        ],
      ),
    );
  }
}