Flutter - navigation with BottomNavigationBar - flutter

Question

In my application, I have the "Homepage" with BottomNavigationBar already installed and running with 4 different pages. After I access the "Perfil" screen and advance to other child screens (PaymentForm) and try to go back to the "Perfil" page, the BottomNavigationBar is not there. How do I return to the "HomePage" with the index corresponding to that screen "Perfil"? Codes below.
Homepage() with BottomNavigationBar:
class HomePage extends StatefulWidget {
#override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
int _currentIndex = 0;
final tabs = [
Center(child: MainPage()),
Center(child: Text('Busca')),
Center(child: Text('Pedidos')),
Center(child: Perfil()),
];
#override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
body: tabs[_currentIndex],
bottomNavigationBar: BottomNavigationBar(
currentIndex: _currentIndex,
type: BottomNavigationBarType.fixed,
items: [
BottomNavigationBarItem(
icon: Image.asset(
'assets/images/home_icone.png',
width: 40,
height: 40,
),
title: Text(
'Inicio',
style: TextStyle(color: Color(0xff203760)),
),
),
BottomNavigationBarItem(
icon: Image.asset(
'assets/images/busca_icone.png',
width: 40,
height: 40,
),
title: Text(
'Busca',
style: TextStyle(color: Color(0xff203760)),
),
),
BottomNavigationBarItem(
icon: Image.asset(
'assets/images/pedidos_icone.png',
width: 40,
height: 40,
),
title: Text(
'Pedidos',
style: TextStyle(color: Color(0xff203760)),
),
),
BottomNavigationBarItem(
icon: Image.asset(
'assets/images/perfil_icone.png',
width: 40,
height: 40,
),
title: Text(
'Perfil',
style: TextStyle(color: Color(0xff203760)),
),
),
],
onTap: (index) {
setState(() {
_currentIndex = index;
});
},
),
),
);
}
}
Perfil():
class Perfil extends StatefulWidget {
#override
_PerfilState createState() => _PerfilState();
}
class _PerfilState extends State<Perfil>{
final AuthService _auth = AuthService();
#override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
body: SingleChildScrollView(
child: Column(
children: <Widget>[
Container(
decoration: BoxDecoration(
border: Border(
bottom: BorderSide(
color: Colors.blueGrey,
width: 1.0,
),
),
),
height: 120,
width: double.maxFinite,
margin: EdgeInsets.fromLTRB(0, 20, 0, 0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
Image.asset(
'assets/images/perfil_foto.png',
height: 60,
width: 60,
),
Text(
'$nameUser',
style: TextStyle(color: Color(0xff203760), fontSize: 28.0),
textAlign: TextAlign.center,
),
Image.asset(
'assets/images/right_arrow.png',
height: 40,
width: 40,
)
],
),
),
Padding(
padding: const EdgeInsets.all(5),
child: Column(
children: <Widget>[
ListView(
shrinkWrap: true,
children: <Widget>[
ListTile(
leading: Icon(
Icons.notifications_none,
size: 40.0,
color: Color(0xff203760),
),
title: Text(
"Notificações",
style: TextStyle(color: Color(0xff203760), fontSize: 20.0),
),
subtitle: Text(
"Central de notificações",
style: TextStyle(color: Color(0xff203760), fontSize: 16.0),
),
onTap: () {},
),
ListTile(
leading: Icon(
Icons.favorite_border,
size: 40.0,
color: Color(0xff203760),
),
title: Text(
"Favoritos",
style: TextStyle(color: Color(0xff203760), fontSize: 20.0),
),
subtitle: Text(
"Central de notificações",
style: TextStyle(color: Color(0xff203760), fontSize: 16.0),
),
onTap: () {},
),
ListTile(
leading: Icon(
Icons.payment,
size: 40.0,
color: Color(0xff203760),
),
title: Text(
"Formas de Pagamento",
style: TextStyle(color: Color(0xff203760), fontSize: 20.0),
),
subtitle: Text(
"Central de notificações",
style: TextStyle(color: Color(0xff203760), fontSize: 16.0),
),
onTap: () {
Navigator.of(context).push(MaterialPageRoute(builder: (context) => PaymentForm()));
},
),
ListTile(
leading: Icon(
Icons.location_on,
size: 40.0,
color: Color(0xff203760),
),
title: Text(
"Endereços",
style: TextStyle(color: Color(0xff203760), fontSize: 20.0),
),
subtitle: Text(
"Central de notificações",
style: TextStyle(color: Color(0xff203760), fontSize: 16.0),
),
onTap: () {},
),
ListTile(
leading: Image.asset(
'assets/images/logout.png',
width: 40,
height: 40,
),
title: Text(
"Sair",
style: TextStyle(color: Color(0xff203760), fontSize: 20.0),
),
subtitle: Text(
"Finalizar sessão",
style: TextStyle(color: Color(0xff203760), fontSize: 16.0),
),
onTap: () async {
await _auth.signOut();
},
),
],
),
],
),
)
],
),
),
),
);
}
}
PaymentForm() (child page from Perfil):
class PaymentForm extends StatefulWidget {
#override
_PaymentFormState createState() => _PaymentFormState();
}
class _PaymentFormState extends State<PaymentForm> {
#override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
body: Column(
children: <Widget>[
Container(
height: 120,
width: double.maxFinite,
margin: EdgeInsets.all(0),
decoration: BoxDecoration(
border: Border(
bottom: BorderSide(
color: Colors.blueGrey,
width: 0.5,
),
),
),
child: Padding(
padding: const EdgeInsets.fromLTRB(0, 25, 0, 0),
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Container(
padding: const EdgeInsets.fromLTRB(15, 15, 10, 15),
child: ClipOval(
child: Container(
width: 35,
height: 35,
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage('assets/images/left_arrow.png'),
),
),
child: FlatButton(
padding: EdgeInsets.all(0.0),
onPressed: () {
print('teste');
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => HomePage()),
);
},
child: null,
),
),
),
),
Text(
" Formas de pagamento",
style:
TextStyle(color: Color(0xff203760), fontSize: 28.0),
textAlign: TextAlign.center,
),
],
),
),
),
Padding(
padding: const EdgeInsets.all(0),
child: Column(
children: <Widget>[
ListView(
shrinkWrap: true,
children: ListTile.divideTiles(
context: context,
color: Color(0xff203760),
tiles: [
ListTile(
title: Text(
"Cartão de crédito",
style: TextStyle(
color: Color(0xff203760), fontSize: 24.0),
),
subtitle: Text(
"Master ****** 3284",
style: TextStyle(
color: Color(0xff203760), fontSize: 12.0),
),
trailing: Image.asset(
'assets/images/menu_dots.png',
width: 10,
),
onTap: () {
Navigator.of(context).push(MaterialPageRoute(
builder: (context) => CartManager()));
},
),
],
).toList(),
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Container(
padding: const EdgeInsets.all(15),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
"Cartão de crédito",
style: TextStyle(
color: Color(0xff203760),
fontSize: 28.0,
),
),
],
),
),
Container(
padding: const EdgeInsets.all(15),
child: ClipOval(
child: Container(
width: 40,
height: 40,
decoration: BoxDecoration(
image: DecorationImage(
image:
AssetImage('assets/images/add_button.png'),
),
),
child: FlatButton(
padding: EdgeInsets.all(0.0),
onPressed: () {
print('teste');
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => CartAdd()),
);
},
child: null,
),
),
),
),
],
),
],
),
)
],
),
),
);
}
}
Thanks for the help!!!

Answer 1

Your issue is that you are using the MaterialApp widget in each class. You don't need to do this. Only your HomePage needs to have it. On the other classes, you only need to have the content you want to show. Taking your code, removing the MaterialApp widgets and simplifying it without the parts you haven't shared, will make it work:
class HomePage extends StatefulWidget {
#override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
int _currentIndex = 0;
final tabs = [
Center(child: Text('Main')),
Center(child: Text('Busca')),
Center(child: Text('Pedidos')),
Center(child: Text('Perfil')),
];
#override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
body: tabs[_currentIndex],
bottomNavigationBar: BottomNavigationBar(
currentIndex: _currentIndex,
type: BottomNavigationBarType.fixed,
items: [
BottomNavigationBarItem(
icon: Icon(Icons.home),
title: Text(
'Inicio',
style: TextStyle(color: Color(0xff203760)),
),
),
BottomNavigationBarItem(
icon: Icon(Icons.home),
title: Text(
'Busca',
style: TextStyle(color: Color(0xff203760)),
),
),
BottomNavigationBarItem(
icon: Icon(Icons.home),
title: Text(
'Pedidos',
style: TextStyle(color: Color(0xff203760)),
),
),
BottomNavigationBarItem(
icon: Icon(Icons.home),
title: Text(
'Perfil',
style: TextStyle(color: Color(0xff203760)),
),
),
],
onTap: (index) {
setState(() {
_currentIndex = index;
});
},
),
),
);
}
}