currentIndex to have onPressed function - flutter

Question

I am making a flutter app and i am working on the bottom navigation bar and i want to know if i can make the buttons to redirect the user to a new page UI from the app.I used this 'package:bubble_bottom_bar/bubble_bottom_bar.dart' and i don't know how to cal currentIndex = 1 ,2,3,4 to redirect to a new page when the user pressed the icon. I tried to add to my BubbleBottomBarItem a onPressed action but it doesn't work.
This is the code that i am using
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:tariffo/favoriteProviders.dart';
import 'package:tariffo/messages_list.dart';
import 'package:bubble_bottom_bar/bubble_bottom_bar.dart';
import 'HomePage.dart';
class BarDetail extends StatefulWidget {
#override
_BarDetailState createState() => _BarDetailState();
}
class _BarDetailState extends State<BarDetail> {
int currentIndex;
#override
void initState() {
super.initState();
currentIndex = 0;
}
changePage(int index) {
setState(() {
currentIndex = index;
});
}
#override
Widget build(BuildContext context) {
return Container(
padding: EdgeInsets.only(top: MediaQuery.of(context).size.height * 0.8),
child: BubbleBottomBar(
opacity: 0.2,
backgroundColor: Colors.white,
borderRadius: BorderRadius.vertical(top: Radius.circular(16.0)),
currentIndex: currentIndex,
hasInk: true,
inkColor: Colors.black12,
hasNotch: true,
fabLocation: BubbleBottomBarFabLocation.end,
onTap: changePage,
items: <BubbleBottomBarItem>[
BubbleBottomBarItem(
backgroundColor: Colors.red,
icon: Icon(Icons.dashboard, color: Colors.black),
activeIcon: Icon(Icons.dashboard, color: Colors.red),
title: Text("Home")),
BubbleBottomBarItem(
backgroundColor: Colors.red,
icon: Icon(Icons.favorite_border, color: Colors.black),
activeIcon: Icon(Icons.dashboard, color: Colors.red),
title: Text("Saved")),
BubbleBottomBarItem(
backgroundColor: Colors.red,
icon: Icon(Icons.search, color: Colors.black),
activeIcon: Icon(Icons.dashboard, color: Colors.red),
title: Text("Search")),
BubbleBottomBarItem(
backgroundColor: Colors.red,
icon: Icon(Icons.send, color: Colors.black),
activeIcon: Icon(Icons.dashboard, color: Colors.red),
title: Text("Messages")),
],
),
);
}
}
and this are the pages that i want the buttons to open : FavoriteProviders(),MessageList()

Answer 1

Another way to go about it is by using PageView, create a PageController and assign it to the property of PageView called controller.
The controller - PageController _controller = PageController();
The PageView itself
PageView(
controller: _controller;
children: <Widget>[
FavoriteProviders(),
MessageList()
]
)
So FavoriteProviders() is now index 0, and MessageList() is now index 1
You can use one of these in the onTap to navigate to that page
_controller.jumpToPage(index) or
controller.animateToPage(index, duration: Duration(milliseconds: 500), curve: Curves.easeIn)
Pass in whatever you want for the duration and curve.

Answer 2

You should have something like this:
A list of pages:
final List<Widget> _pages = [
FavoriteProviders(),
MessageList()
];
A Scaffold where the body: _pages[currentIndex],
#override
Widget build(BuildContext context) {
return Scaffold(
bottomNavigationBar: _bubbleBottomNavBar(),
body: _pages[currentIndex],
)
}
where _bubbleBottomNavBar() is your bottom bar.
OR
Replace on onTap function with:
BubbleBottomBar(
opacity: 0.2,
backgroundColor: Colors.white,
borderRadius: BorderRadius.vertical(top: Radius.circular(16.0)),
currentIndex: currentIndex,
hasInk: true,
inkColor: Colors.black12,
hasNotch: true,
fabLocation: BubbleBottomBarFabLocation.end,
onTap: (index) {
if(index == 1)
Navigator.push(
context,
MaterialPageRoute(builder: (context) => FavoriteProviders()),
);
if (index == 2)
Navigator.push(
context,
MaterialPageRoute(builder: (context) => MessageList()),
);
},
items: <BubbleBottomBarItem>[
[...]
]
)