title: Flutter custom AppBar on one page
body: <p>I am developing <strong>Flutter</strong> application with <code>AppBar</code> and <code>BottomNavigationBar</code>. Here is the code:</p>
  
  <pre><code>class MainPage extends StatefulWidget {
    final MainModel model;
  
    MainPage(this.model);
  
    @override
    State&lt;StatefulWidget&gt; createState() {
      return _MainPageState();
    }
  }
  
  class _MainPageState extends State&lt;MainPage&gt; {
    int _selectedIndex = 0;
  
    Widget _openSelectedPage() {
      switch(_selectedIndex) {
        case 0:
          return HomePage(widget.model);
        case 1:
          return CapturePage(widget.model);
        case 2:
          return MealsPage(widget.model);
        default:
          return HomePage(widget.model);
      }
    }
  
    @override
    Widget build(BuildContext context) {
      return Scaffold(
        appBar: AppBar(
          title: Text('My App'),
        ),
        body: _openSelectedPage(),
        bottomNavigationBar: BottomNavigationBar(
          items: [
            BottomNavigationBarItem(
              icon: Icon(Icons.home),
              title: Text('Home'),
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.camera_alt),
              title: Text('Capture'),
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.format_list_bulleted),
              title: Text('Meals'),
            ),
          ],
          currentIndex: _selectedIndex,
          onTap: (int index) {
            setState(() {
              _selectedIndex = index;
            });
          }
        ),
      );
    }
  }
  </code></pre>
  
  <p>How can I have custom <code>AppBar</code> on <code>MealsPage</code>? If I add another <code>Scaffold</code> in <code>build</code> method of <code>MealsPage</code>, then it creates two <code>AppBar</code>s, which is not what I want. I only want to have one <code>AppBar</code>, the one that I define in <code>MealsPage</code>.</p>