title: How to persist BottomNavigationBar when using Flutter navigation and routes
body: <p>I'm making a project with 4 different pages. I use a "BottomNavigationBar" widget to navigate to each page. When an icon in the "BottomNavigationBar" is pressed, I display a different page in the Scaffold body. I don't use any routing so when a user presses back on Android, the app closes. Something I don't want happening.</p>
  
  <p>All the guides I have found reload the whole "Scaffold" when navigating, but I want to only update the "body" property of the "Scaffold" widget. When a <code>Navigation.pop()</code> occurs I again only want the "Scaffold" body to change.</p>
  
  <p>I have found <a href="https://stackoverflow.com/questions/49681415/flutter-persistent-navigation-bar-with-named-routes">a post</a> around the same issue, but the answer didn't work for me.</p>
  
  <p>Another workaround I can try is making a custom history list, that I then update when pages are changed. Catching OnWillPop event to update the pages when the back button is pressed. I haven't tried this because I feel like there has to be a better way. </p>
  
  <p>The Scaffold widget that displays the page.</p>
  
  <pre class="lang-dart prettyprint-override"><code>  Widget createScaffold() {
      return Scaffold(
        backgroundColor: Colors.white,
        appBar: EmptyAppBar(),
        body: _displayedPage,
        bottomNavigationBar: createBottomNavigationbar(),
      );
    }
  </code></pre>
  
  <p>The BottomNavigationBar widget.</p>
  
  <pre class="lang-dart prettyprint-override"><code>  Widget createBottomNavigationbar() {
      return BottomNavigationBar(
        type: BottomNavigationBarType.fixed,
        currentIndex: _selectedIndex,
        onTap: _onItemTapped,
        items: [
          BottomNavigationBarItem(
            icon: new Icon(Icons.home,
                color: _selectedIndex == 0 ? selectedColor : unselectedColor),
            title: new Text('Home',
                style: new TextStyle(
                    color:
                    _selectedIndex == 0 ? selectedColor : unselectedColor)),
          ),
          BottomNavigationBarItem(
            icon: new Icon(Icons.show_chart,
                color: _selectedIndex == 1 ? selectedColor : unselectedColor),
            title: new Text('Month',
                style: new TextStyle(
                    color:
                    _selectedIndex == 1 ? selectedColor : unselectedColor)),
          ),
          BottomNavigationBarItem(
              icon: Icon(Icons.history,
                  color: _selectedIndex == 2 ? selectedColor : unselectedColor),
              title: Text('History',
                  style: new TextStyle(
                      color: _selectedIndex == 2
                          ? selectedColor
                          : unselectedColor))),
          BottomNavigationBarItem(
              icon: Icon(Icons.settings,
                  color: _selectedIndex == 3 ? selectedColor : unselectedColor),
              title: Text('Settings',
                  style: new TextStyle(
                      color: _selectedIndex == 3
                          ? selectedColor
                          : unselectedColor)))
        ],
      );
    }
  </code></pre>
  
  <p>Methods that update the state of the displayed page.</p>
  
  <pre class="lang-dart prettyprint-override"><code>  void _onItemTapped(int index) {
      _changeDisplayedScreen(index);
  
      setState(() {
        _selectedIndex = index;
      });
  
    }
  
    void _changeDisplayedScreen(int index) {
      switch (index) {
        case 0:
          setState(() {
            _displayedPage = new LatestReadingPage();
          });
          break;
        case 1:
          setState(() {
            _displayedPage = new HomeScreen();
            //Placeholder
          });
          break;
        case 2:
          setState(() {
            _displayedPage = new HomeScreen();
            //Placeholder
          });
          break;
        case 3:
          setState(() {
            _displayedPage = new HomeScreen();
            //Placeholder
          });
          break;
        default:
          setState(() {
            _displayedPage = new LatestReadingPage();
          });
          break;
      }
    }
  }
  </code></pre>
  
  <p>What I want is to be able to use the Flutter Navigation infrastructure, but only update the body property of the Scaffold widget when changing pages. Instead of the whole screen.</p>
  
  <p>A lot like the Youtube app or Google news app.</p>