Bottom Navigation Bar disappears when I navigate to other pages by clicking on Flat Button inside Scaffold

Question

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: MyNavigationBar(),
    );
  }
}

class MyNavigationBar extends StatefulWidget {
  @override
  _MyNavigationBarState createState() => _MyNavigationBarState();
}

class _MyNavigationBarState extends State<MyNavigationBar> {

  int _currentIndex = 0;

// all pages 
  final List<Widget> _children = [
    ListScreen(),
    HomaPage(),
    FourthScreen(),
    ThirdScreen(),
  ];

  void OnTappedBar(int index){
    setState(() {
      _currentIndex = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: _children[_currentIndex],
      bottomNavigationBar: BottomNavigationBar(
        type: BottomNavigationBarType.fixed,
        selectedItemColor: Colors.black,
        unselectedItemColor: Colors.grey,
        onTap: OnTappedBar,
        currentIndex: _currentIndex,
        items: [
          BottomNavigationBarItem(icon: Icon(Icons.home), title: Text("accueil")),
          BottomNavigationBarItem(icon: Icon(Icons.search), title: Text("recherche")),
          BottomNavigationBarItem(icon: Icon(Icons.calendar_today), title: Text("Mess Pass")),
          BottomNavigationBarItem(icon: Icon(Icons.person), title: Text("Mon Profil")),
        ],
      ),
    );
  }
}

Please! can anyone tell me how the bottomNavigationBar appears on all pages.

When I click on the Flat button in Scaffold on any page then the bottom app bar is hidden, but when I use the bottom app bar items to navigate on other pages then the bottom app bar does not disappear. So how can i fix this. I want that the bottom app bar is present on all the pages even I used buttons in the scaffold to navigate or bottom app bar items???

Solution 1

You can use this package persistent_bottom_nav_bar to achieve this kind of functionality

Solution 2

By default, Bottom navigation bar not persistent in MaterialApp. You can achieve this using CupertinoTabScaffold, but not with Material concepts.

There is workaround for the same in Material and Scaffold by implementing custom Navigator for your tabs and bottom navigation. But here we need to handle many cases for Push/Pop navigators.

Currently, I'm using this custom navigator approach for my persistant bottom navigation use case, Will let you know once completed my stuff.

meanwhile some resources that helped me proceed

https://codewithandrea.com/articles/multiple-navigators-bottom-navigation-bar/ https://medium.com/@theboringdeveloper/common-bottom-navigation-bar-flutter-e3693305d2d

Comments

[Shubham Narkhede]

pub.dev/packages/persistent_bottom_nav_bar

[ASAD HAMEED]

Are you using Navigator inside FlatButton's onPressed method?

[Bilal Ahmad]

@_ASAD HAMEED yes I use Navigator

[ASAD HAMEED]

Edited my answer and added more details for implementation. Give it a try :)

[Bilal Ahmad]

Under the FlatButton i used Navigator.pushReplacement

[Bilal Ahmad]

I did not declare the bottom Navigation Bar on other pages. I declare the Bottom Navigation Bar in only the main Page.

[ASAD HAMEED]

First of all, let's remove the confusion by using the work Screen for the scaffold where bottomNavigationBar is implemented and Page for the widgets inside of a PageView. You need to remove Navigator.pushReplacement() since it replace the screen with the bottomNavigationBar. I will add more details to my answer on how you can customise your current code to fir the requirement.

[ASAD HAMEED]

@BilalAhmad I have added details customisation in the answer. I should definitely work since I'm myself using this approach in my production app.

[ASAD HAMEED]

The package you recommended is great and gave me a great idea for my app, but I think Bilal just wants to switch between pages from within the pages that are inside the scope of the nav bar.