How can I do Parmanent bottom NavBar in flutter app?

Question

Here I have face a issue on BottomNavBar widget, When I try to navigate next screen the bottomNavBar will be hide , But I want like this video........ ==>

BottomNavBar Always show , When navigate or not. I mean I want it permanent...Anyone help me please......

(Video for better understanding)

Here The Video Link

Please check this video to understand easily , What I expect......

Take Love.......

Here Is My NavBarWidget Code:...

class BottomBarHome extends StatefulWidget {
  const BottomBarHome({Key? key}) : super(key: key);

  @override
  _BottomBarHomeState createState() => _BottomBarHomeState();
}

class _BottomBarHomeState extends State<BottomBarHome> {
  int _currentTab = 1;
  final PageStorageBucket bucket = PageStorageBucket();
  Widget _currentScreens = HomePage();

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        body: PageStorage(
          bucket: bucket,
          child: _currentScreens,
        ),
        bottomSheet: BottomAppBar(
          // color: white,
          elevation: 10,
          // notchMargin: 10,
          child: Container(
            // height: 60,
            child: Padding(
              padding: paddingH20,
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  GestureDetector(
                    onTap: () {
                      setState(() {
                        _currentScreens = CustomDrawerNavigationBar();
                        _currentTab = 0;
                      });
                    },
                    child: Padding(
                      padding: EdgeInsets.all(8.0),
                      child: Icon(
                        _currentTab == 0 ? Icons.menu : Icons.menu_outlined,
                        color: _currentTab == 0 ? green50 : black,
                      ),
                    ),
                  ),
                  GestureDetector(
                    onTap: () {
                      setState(() {
                        _currentScreens = HomePage();
                        _currentTab = 1;
                      });
                    },
                    child: Padding(
                      padding: EdgeInsets.all(8.0),
                      child: Icon(
                        _currentTab == 1 ? Icons.home : Icons.home_outlined,
                        color: _currentTab == 1 ? green50 : black,
                      ),
                    ),
                  ),
                  GestureDetector(
                    onTap: () {
                      setState(() {
                        _currentScreens = StorePage(
                          isNavBarOpen: true,
                        );
                        _currentTab = 2;
                      });
                    },
                    child: Padding(
                      padding: EdgeInsets.all(8.0),
                      child: Icon(
                        _currentTab == 2 ? Icons.store : Icons.store_outlined,
                        color: _currentTab == 2 ? green50 : black,
                      ),
                    ),
                  ),
                  GestureDetector(
                    onTap: () {
                      setState(() {
                        _currentScreens = CartPage();
                        _currentTab = 3;
                      });
                    },
                    child: Padding(
                      padding: EdgeInsets.all(8.0),
                      child: Icon(
                        _currentTab == 3
                            ? Icons.shopping_cart
                            : Icons.shopping_cart_outlined,
                        color: _currentTab == 3 ? green50 : black,
                      ),
                    ),
                  ),
                  GestureDetector(
                    onTap: () {
                      setState(() {
                        _currentScreens = ProfilePage();
                        _currentTab = 4;
                      });
                    },
                    child: Padding(
                      padding: EdgeInsets.all(8.0),
                      child: Icon(
                        _currentTab == 4 ? Icons.person : Icons.person_outline,
                        color: _currentTab == 4 ? green50 : black,
                      ),
                    ),
                  ),
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }
}

Answer 1

You may use Persistent_Bottom_NavBar for that. Simple BottomBar widget will disappear when you navigate another page , but this persistentBottomNavbar will remain as it is after you navigate another page.

Answer 2

Try with something like this and adjust it to your needs:

class Test extends StatefulWidget {
  const Test({Key? key}) : super(key: key);

  @override
  State<Test> createState() => _TestState();
}

class _TestState extends State<Test> {
  late List<Widget> _pages;
  @override
  void initState() {
    super.initState();
    _pages = [
      Screen1(() => _selectPage(3)),
      Screen2(),
      Screen3(),
      Screen4(),
    ];
  }

  var _selectedPageIndex = 0;
  void _selectPage(int index) {
    setState(() {
      _selectedPageIndex = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      resizeToAvoidBottomInset: false,
      body: SafeArea(child: _pages[_selectedPageIndex]),
      bottomNavigationBar: BottomNavigationBar(
        // currentIndex: _selectedPageIndex >= _pages.length-1
        //     ? 0
        //     : _selectedPageIndex,
        onTap: _selectPage,
        iconSize: 30,
        items: [
          BottomNavigationBarItem(
            backgroundColor: Theme.of(context).primaryColor,
            icon: const Icon(Icons.home),
            label: 'Home',
          ),
          BottomNavigationBarItem(
            backgroundColor: Theme.of(context).primaryColor,
            icon: Icon(Icons.calendar_today),
            label: 'Calendar',
          ),
          BottomNavigationBarItem(
            backgroundColor: Theme.of(context).primaryColor,
            icon: const Icon(Icons.person_rounded),
            label: 'Profile',
          ),
        ],
      ),
    );
  }
}

class Screen1 extends StatelessWidget {
  final VoidCallback callback;
  const Screen1(this.callback, {Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      child: Text('change page'),
      onPressed: callback,
    );
  }
}