How to add navigation in my Bottom Navigation Bar - flutter

Question

I'm new to Flutter, I want to create a navigation bar that can change color when I tap on it. I'm done with that part. Now I'm working on how to navigate to the other page when I tap the navigation bar.
This is my code.
I don't know how to implement the navigation part in my code. I confuse with isSelected and selectedIndex. Hope someone can help me on this and clarify for my better understanding in Flutter.
class BottomNavBar extends StatefulWidget {
#override
State<BottomNavBar> createState() => _BottomNavBarState();
}
class _BottomNavBarState extends State<BottomNavBar> {
int _isSelected = 0;
final List<BottomNavItem> _listBottomNavItems = const [
BottomNavItem(title:'Home', icon: Icons.home),
BottomNavItem(title:'Activity', icon: Icons.receipt),
BottomNavItem(title:'Wallet', icon: Icons.credit_card),
BottomNavItem(title:'Notification', icon: Icons.notifications),
BottomNavItem(title:'Settings', icon: Icons.person),
];
#override
Widget build(BuildContext context) {
return
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: List.generate(_listBottomNavItems.length,
(index){
return BottomNavItem(
title: _listBottomNavItems[index].title,
icon: _listBottomNavItems[index].icon,
isSelected: _isSelected == index,
onTap: (){
setState((){
_isSelected = index;
});
}
);
})
);
}
}
class BottomNavItem extends StatelessWidget {
final String title;
final IconData icon;
final bool? isSelected;
final Function()? onTap;
const BottomNavItem({
required this.title,
required this.icon,
this.isSelected,
this.onTap
});
#override
Widget build(BuildContext context) {
return GestureDetector(
onTap: onTap,
child: Container(
padding: const EdgeInsets.all(5),
width: 50,
height: 40,
decoration: BoxDecoration(
color: isSelected == true ? Colors.black87: Colors.transparent,
borderRadius: BorderRadius.circular(10),
),
child: Column(
children: [
Icon(icon, color: isSelected == true ? Colors.white: Colors.black87, size: 17),
const SizedBox(height: 5,),
Text(
title,
style: TextStyle(
fontSize: 7,
fontWeight: FontWeight.bold,
color: isSelected == true ? Colors.white: Colors.black87
),
)
],
)
)
);
}
}

Answer 1

You can add the page in BottomNavItem like this
class BottomNavItem extends StatelessWidget {
final String title;
final IconData icon;
final bool? isSelected;
final Function()? onTap;
final Widget page;
const BottomNavItem({
required this.title,
required this.icon,
required this.page,
this.isSelected,
this.onTap
});
#override
Widget build(BuildContext context) {
return GestureDetector(
onTap: () {
onTap!();
Navigator.pushReplacement(
context,
MaterialPageRoute(
builder: (context) => page,
),
);
},
child: Container(
padding: const EdgeInsets.all(5),
width: 50,
height: 40,
decoration: BoxDecoration(
color: isSelected == true ? Colors.black87: Colors.transparent,
borderRadius: BorderRadius.circular(10),
),
child: Column(
children: [
Icon(icon, color: isSelected == true ? Colors.white: Colors.black87, size: 17),
const SizedBox(height: 5,),
Text(
title,
style: TextStyle(
fontSize: 7,
fontWeight: FontWeight.bold,
color: isSelected == true ? Colors.white: Colors.black87
),
)
],
)
)
);
}
}
then just add your page in list.
final List<BottomNavItem> _listBottomNavItems = const [
BottomNavItem(title:'Home', icon: Icons.home, page: Home()),
BottomNavItem(title:'Activity', icon: Icons.receipt, page: Activity()),
BottomNavItem(title:'Wallet', icon: Icons.credit_card, page: Wallet()),
BottomNavItem(title:'Notification', icon: Icons.notifications, page: Notification()),
BottomNavItem(title:'Settings', icon: Icons.person, page: Settings()),
];

Answer 2

Hope this works
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: List.generate(_listBottomNavItems.length,
(index){
return BottomNavItem(
title: _listBottomNavItems[index].title,
icon: _listBottomNavItems[index].icon,
isSelected: _isSelected == index,
onTap: (){
setState((){
_isSelected = index;
if(_listBottomNavItems[index].title == 'Home') {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) =>
Home(),
));
} else if(_listBottomNavItems[index].title == 'Activity') {
//write accordingly
}
});
}
);
})
);