Hudson_Nunes
Reputation: 11
Flutter - navigation with BottomNavigationBar
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!!!
Upvotes: 0
Views: 125
Answers (1)
J. S.
Reputation: 9625
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;
});
},
),
),
);
}
}
Upvotes: 1
Related Questions
- How to use BottomNavigationBar with Navigator?
- Flutter bottom Navigation bar with Routes
- How to use a BottomAppBar for navigation in flutter
- Flutter BottomNavigationBar stackoverflow
- I want to navigate with bottom navigation bar
- Drawer to bottom nav bar in Flutter
- How to make custom Bottom Navigation Bar in Flutter
- Custom BottomNavigationBar in Flutter
- Implement BottomNavigationBar
- How can I achieve BottomNavigationBar with 1 NavigationBarItem