How to show bottomnavigation bar in all pages in flutter - flutter

Question

I am creating an app which has bottomnavigation bar.In that bottomnavigation bar it has 5 items names namely profile,aboutus,home,notifications and cart. Each item names has its own page. Now question is i add a button in homepage and if i click on the button it goes to the new page but it doesn't show the bottomnavigation bar.How do i show the bottomnavigation bar in the new page and also the selected current index. Below is the dart code
Mainpage.dart
class MainPage extends StatefulWidget {
#override
_MainPageState createState() => _MainPageState();
}
class _MainPageState extends State<MainPage> {
int _currentIndex = 0;
final tabs = [
Profile(),
AboutUs(),
Home(),
Notifications(),
CartPage(),
];
#override
void initState() {
super.initState();
_currentIndex = 2;
}
#override
Widget build(BuildContext context) {
return Consumer<Cart>(
builder: (context, cart, child) {
return PlatformScaffold(
body: tabs[_currentIndex],
bottomNavBar: PlatformNavBar(
android: (_) => MaterialNavBarData(
type: BottomNavigationBarType.fixed,
),
ios: (_) => CupertinoTabBarData(),
currentIndex: _currentIndex,
itemChanged: (index) => setState(
() {
_currentIndex = index;
},
),
items: [
BottomNavigationBarItem(
icon: PlatformWidget(
ios: (_) => Icon(CupertinoIcons.person),
android: (_) => Icon(Icons.person),
),
title: Text('Profile'),
),
BottomNavigationBarItem(
icon: PlatformWidget(
ios: (_) => Icon(CupertinoIcons.info),
android: (_) => Icon(Icons.info),
),
title: Text('About Us'),
),
BottomNavigationBarItem(
icon: PlatformWidget(
ios: (_) => Icon(CupertinoIcons.home),
android: (_) => Icon(Icons.home),
),
title: Text('Home'),
),
BottomNavigationBarItem(
icon: PlatformWidget(
ios: (_) => new Image.asset(
"assets/notification.png",
height: 21.0,
color: Colors.grey[600],
),
android: (_) => Icon(Icons.notifications),
),
title: Text(
'Notifications',
style: TextStyle(fontSize: 12.0),
),
),
BottomNavigationBarItem(
icon: PlatformWidget(
ios: (_) => Icon(CupertinoIcons.shopping_cart),
android: (_) => Stack(
children: <Widget>[
Icon(Icons.shopping_cart),
cart.count == 0 ? new Container(height: 0, width: 0,)
: new Positioned(
right: 0,
child: new Container(
padding: EdgeInsets.all(1),
decoration: new BoxDecoration(
color: Colors.red,
borderRadius: BorderRadius.circular(6),
),
constraints: BoxConstraints(
minWidth: 12,
minHeight: 12,
),
child: new Text(
'${cart.count}',
style: new TextStyle(
color: Colors.white,
fontSize: 8,
),
textAlign: TextAlign.center,
),
),
)
],
),
),
title: Text('Cart'),
),
],
),
);
},
);
}
}
Homepage.dart
class Home extends StatefulWidget {
#override
_HomeState createState() => _HomeState();
}
class _HomeState extends State<Home> {
#override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: RaisedButton(
onPressed: (){
Navigator.of(context).push(MaterialPageRoute(
builder: (context) => NewPage()));
},
child: Text('New Page'),
),
),
);
}
}
Newpage.dart
class NewPage extends StatefulWidget {
#override
_NewPageState createState() => _NewPageState();
}
class _NewPageState extends State<NewPage> {
#override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
),
);
}
}

Answer 1

I use this method to add a widget which is common to all pages:
MaterialApp(
title: 'Flutter Demo',
initialRoute:"/home",
routes: [
...
],
builder: (context, child) {
return Stack(
children: [
child!,
Overlay(
initialEntries: [
OverlayEntry(
builder: (context) {
return YourCustomWidget(); *//This widget now appears on all pages*
},
),
],
),
],
);
},
);

Answer 2

You can have a Scaffold as a parent of all these pages, and have a BottomNavigationBar on the Scaffold, and a PageView as the body of the Scaffold:
Scaffold(
body: PageView(
controller: MyController(),
children: [
MyPage1(),
MyPage2(),
//...
],
onPageChanged: myOnPageChanged,
),
bottomNavigationBar: MyNavBar(),
)