naviagte to another page using nav bar flutter - flutter

Question

I want to navigate to a page when I click navbar items. I tried this using a gesture detector widget. but it's not working here. and for one icon I want to add a snack bar to display coming soon. how can I do this. appreciate your help on this.
navigate to a page
display snack bar with the text "coming soon"
class BottomNavigation extends StatefulWidget {
const BottomNavigation({ Key? key }) : super(key: key);
#override
State<BottomNavigation> createState() => _BottomNavigationState();
}
class _BottomNavigationState extends State<BottomNavigation> {
int _selectedindex = 0;
void _navigatePages(int index) {
setState(() {
_selectedindex = index;
});
}
final List<Widget> _Pages = [const Dashboard() ,const WelcomeScreen()];
#override
Widget build(BuildContext context) {
return Scaffold(
extendBody: true,
body: _Pages[_selectedindex],
bottomNavigationBar: Container(
clipBehavior: Clip.hardEdge,
decoration: BoxDecoration(
borderRadius: BorderRadius.only(
topRight: Radius.circular(24),
topLeft: Radius.circular(24),
),
// color: Colors.transparent,
),
child: BottomNavigationBar(
backgroundColor: Colors.grey.withOpacity(0.6),
currentIndex: _selectedindex,
onTap: _navigatePages,
type: BottomNavigationBarType.fixed,
items: const [
BottomNavigationBarItem(
icon: ImageIcon(
AssetImage("assets/images/wallet.png"),
color: Colors.black,
size: 32,
),
label: "",
),
BottomNavigationBarItem(
icon: ImageIcon(
AssetImage("assets/images/store.png"),
color: Colors.black,
size: 32,
),
label: "",
),
BottomNavigationBarItem(
icon: ImageIcon(
AssetImage("assets/images/coin.png"),
color: Colors.black,
size: 32,
),
label: "",
)
]),
),
);
}
}

Answer 1

I didn't understand if you can navigate to a screen or not, but I copied your code as is and I can navigate, anyway I leave you this little change that you can do if you can't go to another page:
BottomNavigationBar(
backgroundColor: Colors.grey.withOpacity(0.6),
currentIndex: _selectedindex,
onTap: (int i) => _navigatePages(i), // here
type: BottomNavigationBarType.fixed,
items: const [
[...]
Now, to show a Snackbar, in your function _navigatePages you only make a small validation that if the index is the last one (that is the 2), show the snackbar, first hide one if it exists... if not do the setState.
void _navigatePages(int index) {
if (index == 2) {
ScaffoldMessenger.of(context).hideCurrentSnackBar();
ScaffoldMessenger.of(context)
.showSnackBar(const SnackBar(content: Text("coming soon")));
} else {
setState(() {
_selectedindex = index;
});
}
}

Answer 2

Your full code is ok, just you need to add a Snackbar for your needed index. Suppose, you have three Bottom Navigation Bar & you will show your snackbar for the last Bottom Navigation icon, which means the index will be 2. [this index will be changed based on your decision]
Your _navigatePages() function will be changed like as below code :
void _navigatePages(int index) {
if(index == 2){
ScaffoldMessenger.of(context).hideCurrentSnackBar();
ScaffoldMessenger.of(context)
.showSnackBar(const SnackBar(content: Text("coming soon")));
}else{
ScaffoldMessenger.of(context).hideCurrentSnackBar();
setState(() {
_selectedindex = index;
});
}
}
N.B: Please change the function only, others all code is ok.