Changing the Bottom Navigation Bar when switching between screens in the body of a Scaffold

HomeScreen() function call the Home screen of App. How I Can route/move to "Team", "Add", etcetera page without BottomNavigationBar and AppBar. I want show another page and back button, with new Bottom Navigation Bar.

I have this on my Flutter Project:

class APPMain extends StatefulWidget {
  @override
  _APPMainState createState() => _APPMainState();
}

class _APPMainState extends State<APPMain> {

  int _currentIndex = 0;

  _onTapped(int index) {
    setState(() {
      _currentIndex = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    List<Widget> screens = [
      HomeScreen(),
      Center(child: Text("Team")),
      Center(child: Text("Add")),
      Center(child: Text("Search")),
      Center(child: Text("Settings")),
    ];

    return Scaffold(
      appBar: AppBar(
        backgroundColor: Color(0xffffffff),
        iconTheme: IconThemeData(color: Colors.grey),
        title: Text("Test App", style: TextStyle(color: Colors.grey),),
        actions: <Widget>[
          IconButton(
            icon: Icon(Icons.account_circle),
            onPressed: (){},
          ),
        ],
      ),
      body: Container(
          color: Color(0xfff4f4f4),
          child: Center(
            child: screens[_currentIndex],
          ),
      ),
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: _currentIndex,
        type: BottomNavigationBarType.fixed,
        fixedColor: Colors.red,
        onTap: _onTapped,
        items: [
            BottomNavigationBarItem(
              title: Text('Home'), icon: Icon(Icons.home)),
            BottomNavigationBarItem(
              title: Text('Team'), icon: Icon(Icons.group)),
            BottomNavigationBarItem(
              title: Text('Add'), icon: Icon(Icons.add)),
            BottomNavigationBarItem(
              title: Text('Search'), icon: Icon(Icons.search)),
            BottomNavigationBarItem(
              title: Text('Settings'), icon: Icon(Icons.settings)),
          ]),
      );
  }
}

Thank you so much for help.

This is almost certainly a duplicate but I wasn't able to find a question asking something similar with a quick search so I'll answer anyways.

The answer is actually quite simple, but requires understanding a bit more about how to write flutter applications - you should be using a Navigator or the navigator built right into MaterialApp or WidgetApp rather than making your own navigation. The simplest way is to use MaterialApp's routes property and pass in a map with each of your pages. Then when you want to switch pages, you simply use Navigator.pushNamed(context, <name>) from wherever you want to switch the page (i.e. a button).

The part that can be slightly confusing when you come from other frameworks is that rather than having one Scaffold and switching the body of it, the entire page should switch and each page should have a Scaffold.

Here's an example in the documentation showing how to navigate between pages.

For the record, although it's a bad idea you could make it work with your original code as well - all you'd have to do is build a different BottomNavigationBar with different options depending on what _currentIndex is set to. But I don't recommend that. With what I've suggested you also get animations between pages, back button functionality, you can hook up analytics to track page usage, and a bunch more things that flutter provides as part of navigation.