How can I keep showing bottomNavigationBar in nested page? - flutter

Question

there is shopping app, and there is 4 items in bottomNavBar.
in home page, fetch all categories and shown in page, when pressed on category, he should see the products in category. but how can I keep bottom navigation bar when I want to navigate him into next pages?
this is myBottomNavigationBar code:
Scaffold(
appBar: AppBar(
backgroundColor: Colors.transparent,
elevation: 0,
actions: [
IconButton(
icon: Icon(
Icons.search,
color: Constants.blackBackgroundColor,
),
onPressed: () {})
],
),
body: IndexedStack(
index: _mainController.tabIndex,
children: [
HomePage(),
OfferPage(),
CartPage(),
ProfilePage(),
],
),
bottomNavigationBar: bottomNavigationBar(context),
);

Answer 1

Don't know if this is what you're looking for but here is one way of achieving it.
List<dynamic> _screens = [ HomePage(), OfferPage(),CartPage(), ProfilePage()];
int _index = 0;
PageController controller = PageController();
Scaffold(
appBar: AppBar(
backgroundColor: Colors.transparent,
elevation: 0,
actions: [
IconButton(
icon: Icon(
Icons.search,
color: Constants.blackBackgroundColor,
),
onPressed: () {})
],
),
body: PageView.builder(
itemCount: 4,
controller: controller,
onPageChanged: (page) {
setState(() {
_index = page;
});
},
itemBuilder: (context, position) {
return Container(
color: Colors.white,
child: Center(child: _screens[position]),
);
}),
bottomNavigationBar: bottomNavigationBar(context),
);