separate the code of bottom navigation bar from the scaffold

Question

I just need to separate the code of bottom navigation bar from the scaffold. But the issue is when i click another tab to switch to another page, there is a 7 seconds delay.

The code of scaffold Is:

Scaffold(
      extendBody: true,
      body: IndexedStack(
        index: HomeScreen.pageIndex,
        children: [
          HomePage(isMember: widget.isMember),
          (widget.isMember)
              ? const MyOpportunityPage()
              : const AddOpportunity(),
          ProfilePage(isMember: widget.isMember),
        ],
      ),
      bottomNavigationBar: BottomNavBar(
        isMember: widget.isMember,
      ),
    );

The Bottom Navigation Bar code is:

class BottomNavBar extends StatelessWidget {
  BottomNavBar({
    Key? key,
    required this.isMember,
  }) : super(key: key);
  bool isMember;
  @override
  Widget build(BuildContext context) {
    return StatefulBuilder(
      builder: (context, StateSetter setState) {
        return BottomNavigationBar(
              currentIndex: HomeScreen.pageIndex,
              onTap: (int value) => setState(() {
                HomeScreen.pageIndex = value;
              }),
              type: BottomNavigationBarType.fixed,
              elevation: 2,
              items: [
                BottomNavigationBarItem(
                  icon: Icon(Icons.home),
                  label: 'home'.tr,
                ),
                BottomNavigationBarItem(
                  icon: Icon(Icons.flag_sharp),
                  label:isMember
                      ? 'my_opportunities'.tr
                      : "add_opportunity".tr,
                ),
                BottomNavigationBarItem(
                  icon: Icon(Icons.person),
                  label: 'profile'.tr,
                ),
              ],
        );
      }
    );
  }
}

score 0 · Accepted Answer · answered Dec 20 '21 at 14:44

I'm not sure why you are having a 7-second delay, especially when you did not specify one, maybe you should first close your program and probably uninstall it and reboot your IDE and try again, and if that is still the case, you can refactor your code like this;

Scaffold(
        body: IndexedStack(
          index: currentIndex,
          children: [
            Center(child: MyHomeWidget()),
            Center(child: AnotherWidget()),
            Center(child: SomeOtherWidget()),
          ],
        ),
        bottomNavigationBar: BottomNavBar(
          isMember: isMember,
          currentI: currentIndex,
          onPress: (int value) => setState(() {
            currentIndex = value;
          }),
        ),
      ),

class BottomNavBar extends StatelessWidget {
  const BottomNavBar({
    Key? key,
    required this.isMember,
    required this.onPress,
    this.currentI = 0,
  }) : super(key: key);
  final bool isMember;
  final Function(int) onPress;
  final int currentI;

  @override
  Widget build(BuildContext context) {
    return BottomNavigationBar(
      currentIndex: currentI,
      onTap: onPress,
      type: BottomNavigationBarType.fixed,
      elevation: 2,
      items: [
        const BottomNavigationBarItem(
          icon: Icon(Icons.home),
          label: 'home',
        ),
        BottomNavigationBarItem(
          icon: const Icon(Icons.flag_sharp),
          label: isMember ? 'my_opportunities' : "add_opportunity",
        ),
        const BottomNavigationBarItem(
          icon: Icon(Icons.person),
          label: 'profile',
        ),
      ],
    );
  }
}

Hopefully there would be a difference. Just implement your own index and any other vital part of the code. I tested this on dartpad and it worked fine, here is a link

One main thing that I changed is instead of using a `StatefulBuider` to have access to `setState`, I replaced it with a Callback Function. The Widget tree where the Scaffold lives is a StatefulWidget. — davidn, Dec 20 '21 at 14:48

separate the code of bottom navigation bar from the scaffold

1 Answers1