BottomNavigation Pages is not reloading everytime when I tap - flutter

Question

I have a MainPage with bottomnavigation bar with bottomnavigation items. I want to call APIs of bottomnavigation item pages whenever i tap on it i.e I want to reload page everytime I vist the page.
But in my case its not reloading everytime but at once when mainpage called all api of bottomnavigation items page APIs are called attime.
MainPage
class MainPage extends StatefulWidget{
#override
_MainPageState createState() => new _MainPageState();
}
class _MainPageState extends State<MainPage>{
ListQueue<int> _navigationQueue = ListQueue();
int _selectedIndex = 0;
int counter = Constant.CART_COUNT;
List<GlobalKey<NavigatorState>> _navigatorKeys = [
GlobalKey<NavigatorState>(),
GlobalKey<NavigatorState>(),
GlobalKey<NavigatorState>(),
GlobalKey<NavigatorState>()
];
Future<void> secureScreen() async {
await FlutterWindowManager.addFlags(FlutterWindowManager.FLAG_SECURE);
}
#override
void initState() {
// TODO: implement initState
super.initState();
secureScreen();
}
#override
Widget build(BuildContext context) {
return WillPopScope(
onWillPop: () async {
if (_navigationQueue.isEmpty) return true;
setState(() {
_navigationQueue.removeLast();
int position = _navigationQueue.isEmpty ? 0 : _navigationQueue.last;
_selectedIndex = position;
});
return false;
},
child: Scaffold(
backgroundColor: Colors.white,
bottomNavigationBar: BottomNavigationBar(
type: BottomNavigationBarType.fixed,
currentIndex: _selectedIndex,
selectedItemColor: Colors.blueAccent,
showSelectedLabels: true,
showUnselectedLabels: false,
items: [
BottomNavigationBarItem(
icon: Icon(
FontAwesome.home,
color: Colors.grey,
),
label: 'Home',
activeIcon: Icon(
FontAwesome.home,
color: Colors.blueAccent,
),
),
BottomNavigationBarItem(
icon: Icon(
FontAwesome.product_hunt,
color: Colors.grey,
),
label: 'Products',
activeIcon: Icon(
FontAwesome.product_hunt,
color: Colors.blueAccent,
),
),
BottomNavigationBarItem(
icon: Icon(
FontAwesome.users,
color: Colors.grey,
),
label: 'Customers',
activeIcon: Icon(
FontAwesome.users,
color: Colors.blueAccent,
),
),
BottomNavigationBarItem(
icon: Icon(
FontAwesome.search_plus,
color: Colors.grey,
),
label: 'Order Details',
activeIcon: Icon(
FontAwesome.users,
color: Colors.blueAccent,
),
),
],
onTap: (index) {
if(_selectedIndex == _selectedIndex){
_navigationQueue.removeWhere((element) => element == index);
_navigationQueue.addLast(index);
setState(() {
this._selectedIndex = index;
});
}
},
),
body: Stack(
children: [
_buildOffstageNavigator(0),
_buildOffstageNavigator(1),
_buildOffstageNavigator(2),
_buildOffstageNavigator(3)
],
),
),
);
}
Map<String, WidgetBuilder> _routeBuilders(BuildContext context, int index) {
return {
'/': (context) {
return [
HomePage(),
ProductSearchPage(),
CustomerPage(),
OrdersPage()
].elementAt(index);
},
};
}
Widget _buildOffstageNavigator(int index) {
var routeBuilders = _routeBuilders(context, index);
return Offstage(
offstage: _selectedIndex != index,
child: Navigator(
key: _navigatorKeys[index],
onGenerateRoute: (routeSettings) {
return MaterialPageRoute(
builder: (context) => routeBuilders[routeSettings.name]!(context),
);
},
),
);
}
}

Answer 1

You have used an offstage widget which will just remove the ui from the stage. It wont reload when the index is changed. You have to create a list
List screens = [
HomePage(),
ProductSearchPage(),
CustomerPage(),
OrdersPage()
],
//Then in body use
body: screens[index]

Answer 2

You can set the api call in on Tap because all the pages will be initialized at a time that's why you are facing this issue.
Just check the condition on Tap for a currently selected index and write down the API call there.