Always show BottomNavigationBar

Question

Is there a way to show the BottomNavigationBar on every page? Currently the BottomNavigationBar disappears when pushing the button but I want the BottomNavigationBar to always be displayed even when routing to a new page. The following code shows my BottomNavigationBar and my detail page.

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

  @override
  State<BottomNavBar> createState() => _BottomNavBarState();
}

class _BottomNavBarState extends State<BottomNavBar> {
  int currentIndex = 0;
  final screens = const [Home(), Search()];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: screens[currentIndex],
        bottomNavigationBar: BottomNavigationBar(
            type: BottomNavigationBarType.fixed,
            backgroundColor: bottomNav,
            unselectedItemColor: Colors.grey,
            selectedFontSize: 12,
            unselectedFontSize: 12,
            currentIndex: currentIndex,
            onTap: (index) => setState(() => currentIndex = index),
            items: const [
              BottomNavigationBarItem(
                  icon: Icon(
                    Icons.home_filled,
                    size: 28,
                  ),
                  label: 'Home'),
              BottomNavigationBarItem(
                  icon: Icon(
                    Icons.search_rounded,
                    size: 28,
                  ),
                  label: 'Search'),
            ]));
  }
}

My detail page:

class Home extends StatelessWidget {
  const Home({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
          child: IconButton(
        icon: const Icon(Icons.abc),
        onPressed: () {
          Navigator.push(
              context, MaterialPageRoute(builder: (context) => const Page1()));
        },
      )),
    );
  }
}

class Page1 extends StatelessWidget {
  const Page1({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.red,
    );
  }
}

As far as I know, Cupertino bottom navigation bar may solve your problem — Vihanga Randunu, May 19 '22 at 19:37

score 0 · Answer 1 · answered May 19 '22 at 19:37

Well, it should show on every page If all those pages (where you want to show this bar) have been put under the same Scaffold. Here's what I usually do:

Create a list that holds the pages you want to show bottomNavigationBar on :

List subScreens = [SubScreen1(), SubScreen2(), SubScreen3()]

Now, create a base page/screen which would render these subscreens like this:

return Scaffold(
     bottomNavigationBar: BottomNavigationBar(),
     body: subScreens[stateCounter],
 );

Now use this stateCounter as currentIndex to your BottomNavigationBar() as well as to also fetch the correct subscreen from the list.

score 0 · Answer 2 · answered May 19 '22 at 21:01

0

If you want to show this navigation bar on all pages, do not use the Scaffold you used in BottomNavBar on your other pages. Because with each new Scaffold you set the BottomNavigationBar parameter of other pages to empty.

answered May 19 '22 at 21:01

rasityilmaz

764
1
6
11

Thanks for your reply. I am not sure if I understand you correctly. How do I implement it? – Nick May 20 '22 at 18:36
Yes, now I understand what you want. For this, use a PageViewBuilder in your widget for which you want to create subpages and navigate between subpages with PageController instead of Navigator.push. – rasityilmaz May 20 '22 at 20:49

Always show BottomNavigationBar

2 Answers2