navigation bar issue after clicking on card flutter - flutter

Question

[![When I click on any card the navigation bar doesn't work anymore ][2]][2]
the 1st image shows my navigation bar which works very well. The moment I click on a card the navigation bar doesn't work anymore and I didn't find out what is the reason
**This is my navigation bar Widget code that I'm using after clicking on the card **
class MenuBarWidget extends StatefulWidget {
#override
_State createState() => _State();
}
class _State extends State<MenuBarWidget> {
int _index = 0;
#override
Widget build(BuildContext context) {
return Container(
height: 70,
decoration: BoxDecoration(
gradient: AppGradients.linear,
),
child: BottomNavigationBar(
onTap: (newIndex) => setState(() => _index = newIndex),
currentIndex: _index,
unselectedItemColor: Colors.white70,
selectedItemColor: Colors.white,
elevation: 0,
items: const <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: Icon(Icons.home_outlined),
label: 'Principal',
backgroundColor: Colors.transparent,
),
BottomNavigationBarItem(
icon: Icon(Icons.assignment_outlined),
label: 'Pedidos',
backgroundColor: Colors.transparent,
),
BottomNavigationBarItem(
icon: Icon(Icons.chat_outlined),
label: 'Chat',
backgroundColor: Colors.transparent,
),
BottomNavigationBarItem(
icon: Icon(Icons.person_outline),
label: 'Perfil',
backgroundColor: Colors.transparent,
),
],
),
);
}
}
this is my code after clicking on the card
#override
Widget build(BuildContext context) {
return Scaffold(
bottomNavigationBar: MenuBarWidget(),
appBar: PreferredSize(
preferredSize: Size.fromHeight(100),
child: Stack(children: [
Container(
height: 128,
decoration: BoxDecoration(
color: AppColors.green,
border: Border(
bottom: BorderSide(
color: AppColors.blueButton,
width: 2,
),
),
image: DecorationImage(
image: AssetImage(AppImages.dots),
fit: BoxFit.cover,
),
),
),
Align(
alignment: Alignment(-0.7, -0.3),
child: RichText(
text: TextSpan(
text: serviceName,
style: TextStyle(
color: AppColors.white,
fontSize: 25,
fontWeight: FontWeight.bold,
),
),
),
),
Align(
alignment: Alignment(-0.6, 0.4),
child: RichText(
text: TextSpan(
text: 'Confira abaixo todos os profissionais desta categoria',
style: TextStyle(
color: AppColors.white,
fontSize: 9,
fontWeight: FontWeight.bold,
),
),
),
),
]),
),
**Any help is appreciated thanks **

Answer 1

create a new list of screens and add the screens you created as the list items
List screens = [
HomeScreen();
CarpentryScreen();
...
...
];
then make the body of your MenuBarWidget() return screens[_index]
class MenuBarWidget extends StatefulWidget {
#override
_State createState() => _State();
}
class _State extends State<MenuBarWidget> {
int _index = 0;
// new list of your screens
List<Widget> screens = [
PrincipalScreen(),
PedidosScreen(),
Chatscreen(),
Perfilscreen(),
];
#override
Widget build(BuildContext context) {
// return the screens
return Scaffold(
body: screens[_index],
bottomNavigationBar: BottomNavigationBar(
onTap: (newIndex) => setState(() => _index = newIndex),
currentIndex: _index,
unselectedItemColor: Colors.white70,
selectedItemColor: Colors.white,
elevation: 0,
items: const <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: Icon(Icons.home_outlined),
label: 'Principal',
backgroundColor: Colors.transparent,
),
BottomNavigationBarItem(
icon: Icon(Icons.assignment_outlined),
label: 'Pedidos',
backgroundColor: Colors.transparent,
),
BottomNavigationBarItem(
icon: Icon(Icons.chat_outlined),
label: 'Chat',
backgroundColor: Colors.transparent,
),
BottomNavigationBarItem(
icon: Icon(Icons.person_outline),
label: 'Perfil',
backgroundColor: Colors.transparent,
),
],
),
);
}
}
then you don't have to add bottomNavigationBar to the screens individually, this way, the screen is persistent across all screens