Selecting a specific BottomNavigationBar when routing from another widget (Flutter) - flutter

Question

Please, help. This is my first project using Flutter. I am making an app for pets.
I have Homepage widget that has 4 bottom Navbar (Home, Photos, Medical, Profile). In Profile I have a button "About", which opens a widget about us.
But when I am trying to return to back from About, it returns to "Home" NavBottombar. I am trying to select Profile NavBottomBar.
I think that is related to current index in Homepage, which equals 0 at the beginning. But how can I change from 0 to 2 while routing?
homepage.dart
import 'package:flutter/material.dart';
import 'placeholder_widget.dart';
import 'dashboard.dart';
import 'medical.dart';
import 'profile.dart';
import 'about.dart';
void main() => runApp(MaterialApp(
home: Homepage(),
));
class Homepage extends StatefulWidget {
#override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<Homepage> {
int _currentIndex = 0;
final List<Widget> _children = [
Dashboard(),
PlaceholderWidget(Colors.deepOrange),
PlaceholderWidget(Colors.red),
// Medical(),
Profile()
];
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Furball Tales'),
backgroundColor: Colors.cyanAccent[400],
),
body: _children[_currentIndex],
bottomNavigationBar: BottomNavigationBar(
onTap: onTabTapped,
currentIndex: _currentIndex,
items: const <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: Icon(Icons.home),
title: Text('Home'),
),
BottomNavigationBarItem(
icon: Icon(Icons.perm_media),
title: Text('Photos'),
),
BottomNavigationBarItem(
icon: Icon(Icons.local_hospital),
title: Text('Medical'),
),
BottomNavigationBarItem(
icon: Icon(Icons.perm_identity),
title: Text('Profile'),
),
],
selectedItemColor: Colors.cyanAccent[400],
unselectedItemColor: Colors.grey[600],
),
),
);
}
void onTabTapped(int index) {
setState(() {
_currentIndex = index;
});
}
}
about.dart
import 'package:flutter/material.dart';
import 'profile.dart';
import 'homepage.dart';
class About extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('About FurBallTales'),
backgroundColor: Colors.cyanAccent[400],
leading: GestureDetector(
onTap: () {
Navigator.of(context).pushAndRemoveUntil(
MaterialPageRoute(builder: (context) {
return Homepage();
}), ModalRoute.withName('/'));
},
child: Icon(
Icons.arrow_back,
)),
),
body: ListView(
padding: const EdgeInsets.all(2),
children: <Widget>[
Container(
decoration:
BoxDecoration(border: Border.all(color: Colors.blueAccent)),
child: Column(
children: <Widget>[
Container(
height: 30,
margin: EdgeInsets.all(5),
child: Text(
'OUR MISSION',
textAlign: TextAlign.center,
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 20,
color: Colors.tealAccent[400]),
),
),
Container(
height: 25,
margin: EdgeInsets.all(5),
child: Text(
'Strengthening the bond of owners and pets, more than ever',
textAlign: TextAlign.center,
style: TextStyle(
fontWeight: FontWeight.bold, color: Colors.black),
),
),
],
),
),
Container(
height: 50,
color: Colors.amber[600],
child: const Center(child: Text('Entry A')),
),
Container(
height: 50,
color: Colors.amber[500],
child: const Center(child: Text('Entry B')),
),
Container(
height: 50,
color: Colors.amber[100],
child: const Center(child: Text('Entry C')),
),
],
),
);
}
}
profile.dart
import 'package:flutter/material.dart';
import 'sign_in.dart';
import 'login_page.dart';
import 'about.dart';
import 'donation.dart';
class Profile extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
CircleAvatar(
radius: 80,
backgroundImage: NetworkImage(
'https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcSxDoD5caxFUy_dn0w6wl01m882CeJHNVOCRg&usqp=CAU'),
),
Text(
'<$name>',
style: TextStyle(
fontFamily: 'SourceSansPro',
fontSize: 25,
),
),
Text(
'<$email>',
style: TextStyle(
fontSize: 20,
fontFamily: 'SourceSansPro',
color: Colors.red[400],
letterSpacing: 2.5,
),
),
SizedBox(
height: 20.0,
width: 200,
child: Divider(
color: Colors.teal[200],
),
),
// this is about page-----------------------------------------
InkWell(
onTap: () {
Navigator.of(context).pushAndRemoveUntil(
MaterialPageRoute(builder: (context) {
return About();
}), ModalRoute.withName('/about'));
},
child: Card(
color: Colors.white,
margin:
EdgeInsets.symmetric(vertical: 10.0, horizontal: 25.0),
child: ListTile(
leading: Icon(
Icons.help,
color: Colors.teal[900],
),
title: Text(
'About',
style:
TextStyle(fontFamily: 'BalooBhai', fontSize: 20.0),
),
)),
),
InkWell(
onTap: () {
Navigator.of(context).pushAndRemoveUntil(
MaterialPageRoute(builder: (context) {
return Donation();
}), ModalRoute.withName('/about'));
},
child: Card(
color: Colors.white,
margin:
EdgeInsets.symmetric(vertical: 10.0, horizontal: 25.0),
child: ListTile(
leading: Icon(
Icons.monetization_on,
color: Colors.teal[900],
),
title: Text(
'Donation',
style: TextStyle(fontSize: 20.0, fontFamily: 'Neucha'),
),
),
),
),
InkWell(
onTap: () {
signOutGoogle();
Navigator.of(context).pushAndRemoveUntil(
MaterialPageRoute(builder: (context) {
return LoginPage();
}), ModalRoute.withName('/'));
},
child: Card(
color: Colors.white,
margin:
EdgeInsets.symmetric(vertical: 10.0, horizontal: 25.0),
child: ListTile(
leading: Icon(
Icons.account_circle,
color: Colors.teal[900],
),
title: Text(
'LOGOUT',
style: TextStyle(fontSize: 20.0, fontFamily: 'Neucha'),
),
),
),
),
],
),
),
),
);
}
}

Answer 1

Instead of using pushAndRemoveUntil in your About page, you can use Navigator.pop(context)( which removes the view from the Navigator stack):
I added a demo using your code as an example:
class About extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('About FurBallTales'),
backgroundColor: Colors.cyanAccent[400],
leading: GestureDetector(
onTap: () {
Navigator.pop(context); // pop the view
},
child: Icon(
Icons.arrow_back,
)),
),
...
);
}
}
NOTE:
With this approach, the state of the BottomNavigationBar is reserved.

Answer 2

Thank you for everyone, who helped me.
The problem has been solved this way:
First, I pushed to new page.
onTap: () {
Navigator.push(context,
MaterialPageRoute(builder: (context) => About()));
}
Then made pop context.
onTap: () {
Navigator.pop(context);
},
It returned initial position.

Answer 3

Where it says return Homepage(); in about.dart you could change that to return the profile widget.