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???

Answer 1

I believe you are calling 'Navigator.push()' inside FlatButton's onPressed method.

What's happening here is that when you call Navigator.push() the screen with BottomNavigationBar hides under the new screen, or goes down in the ScreenStack(a made-up term).

What you should do instead is use PageController to navigate to different pages inside the Flatbutton's onPressed.

pageController.animateToPage(index);

See this answer https://stackoverflow.com/a/56540176/10285344

In order to customise your current implementation to fit your requirement, I would suggest you the following changes.

You should either use PageView to achieve this, because it provides you a controller to switch between pages.

For your case If you do not want to use PageView for some reason, I would recommend the following workaround I used in one of my recent projects I use Provider to switch between Screens without using Navigator or PageView.

You'll need Provider package for this customisation. https://pub.dev/packages/provider/install

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: ChangeNotifierProvider<ValueNotifier<int>>.value(
        value: ValueNotifier<int>(0), //PageIndex is set to 0 to open first when when the app launches
        child:  MyNavigationBar(),
      ),

    );
  }
}


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

class _MyNavigationBarState extends State<MyNavigationBar> {


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

  void OnTappedBar(int index){
    Provider.of<ValueNotifier<int>>(context, listen: false).value = index;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: _children[Provider.of<ValueNotifier<int>>(context).value],
      bottomNavigationBar: BottomNavigationBar(
        type: BottomNavigationBarType.fixed,
        selectedItemColor: Colors.black,
        unselectedItemColor: Colors.grey,
        onTap: OnTappedBar,
        currentIndex: Provider.of<ValueNotifier<int>>(context).value,,
        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")),
        ],
      ),
    );
  }
}

How to switch to different page from inside of a page?

class ListScreen extends StatefulWidget {
  @override
  _ListScreenState createState() => _ListScreenState();
}

class _ListScreenState extends State<ListScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(child: FlatButton(
        child: Text('Switch To HomePage'),
        onPressed: (){

          Provider.of<ValueNotifier<int>>(context, listen: false).value = 1;
        },
      ),),
    );
  }
}

Answer 2

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

Answer 3

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