How to keep Appbar and Bottomnavigationbar between pages

Question

I’d like some help from you guys on an app in Flutter. I’m creating the routes named to navigate between the App pages. However, I was unable to maintain Appbar and Bottomnavigationbar during navigation. Always directs to a new screen, I would like to keep the header and footer of the App without repeating the code in the Dart files. It is possible to do this?

Answer 1

Using the BottomNavigationBar you will not call the screens by Navigation in the normal way, you could use for example a TabView or a PageView to change between your screens.

Take an example (One of the ways to do it)

Declaration of your main screen

 class _HomeState extends State<Home> {
  int _currentIndex = 0;
  final List<Widget> _children = [
    TelaFeedNoticias(),
    TelaConfiguracoes(),
    TelaInformacoesAdicionais()
  ];

Body of your main screen

@override
 Widget build(BuildContext context) {
   return Scaffold(
     appBar: AppBar(
       title: Text('My Flutter App'),
     ),
     body: _children[_currentIndex],
     bottomNavigationBar: BottomNavigationBar(
       onTap: onTabTapped,
       currentIndex: _currentIndex,
       items: [
         BottomNavigationBarItem(
           icon: Icon(Icons.home),
           title: Text('Home'),
         ),
         BottomNavigationBarItem(
           icon: Icon(Icons.mail),
           title: Text('Messages'),
         ),
         BottomNavigationBarItem(
           icon: Icon(Icons.person),
           title: Text('Profile')
         )
       ],
     ),
   );
 }

Where the magic of changing between the screens happens

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

Font: https://willowtreeapps.com/ideas/how-to-use-flutter-to-build-an-app-with-bottom-navigation

Explaining: By clicking on each item of your NavigationBottomBar, the method will be executed OnTabTapped(int index) and this in turn, through the setState(), will rebuild its structure with the new index, thus selecting the screen mentioned in the list _children. This way your application will open the selected screen within your main screen and your NavigationBottomBar and AppBar will be maintained.

This is just one way to do it, then you play with the possibilities.

Note: You can create the other screens in the normal way, with the StateFulWidget or StateLessWidget, then just refer them to the list _children.