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

question from:https://stackoverflow.com/questions/65839629/bottom-navigation-bar-disappears-when-i-navigate-to-other-pages-by-clicking-on-f

Answer 1

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