Adding onPressed or onTab to BubbleBottomBarItem in Flutter - 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>[
...
],
),
);
}
}