BottomNavigation Pages is not reloading everytime when I tap

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),
          );
        },
      ),
    );
  }
}

score 0 · Answer 1 · answered Jul 25 '22 at 05:52

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]

score 0 · Answer 2 · answered Jul 25 '22 at 05:56

0

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.

answered Jul 25 '22 at 05:56

Sheetal Savani

1,300
1
7
21

BottomNavigation Pages is not reloading everytime when I tap

2 Answers2