title: How can I create a sidebar menu in Flutter such that selecting a menu changes the main panels widget?
body: <p>I am trying to create an application with a sidebar menu in Flutter but don't know how to change the main panels content when one of the menu items is selected.</p>
  <p>Here is the basic main screen</p>
  <pre><code>class MainScreen extends StatelessWidget {
    static const routeName = '/mainScreen';
    final leftSection = new Container(
      child: new Sidebar(),
    );
    final middleSection = new Expanded(
      child: new DetailPage1(),
    );
    final rightSection = new Container(
      child: new Sidebar(),
    );
  
    @override
    Widget build(BuildContext context) {
      return new Scaffold(
        body: new Container(
          child: new Row(
            children: &lt;Widget&gt;[leftSection, middleSection, rightSection],
          ),
        ),
      );
    }
  }
  </code></pre>
  <p>Here is the Sidebar</p>
  <pre><code>class Sidebar extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
      return Drawer(
        child: ListView(
          padding: EdgeInsets.zero,
          children: &lt;Widget&gt;[
            DrawerHeader(
              child: Text(
                'Side menu',
                style: TextStyle(color: Colors.white, fontSize: 25),
              ),
              decoration: BoxDecoration(
                  color: Colors.green,
                  image: DecorationImage(
                      fit: BoxFit.fill,
                      image: AssetImage('assets/images/cover.jpg'))),
            ),
            ListTile(
              leading: Icon(Icons.input),
              title: Text('Welcome'),
              onTap: () =&gt; {},
            ),
            ListTile(
              leading: Icon(Icons.verified_user),
              title: Text('Profile'),
              onTap: () =&gt; {Navigator.of(context).pop()},
            ),
            ListTile(
              leading: Icon(Icons.settings),
              title: Text('Settings'),
              onTap: () =&gt; {Navigator.of(context).pop()},
            ),
            ListTile(
              leading: Icon(Icons.border_color),
              title: Text('Feedback'),
              onTap: () =&gt; {Navigator.of(context).pop()},
            ),
            ListTile(
              leading: Icon(Icons.exit_to_app),
              title: Text('Logout'),
              onTap: () =&gt; {Navigator.of(context).pop()},
            ),
          ],
        ),
      );
    }
  }
  </code></pre>
  <p>How can I wire things up such that the MainScreen middleSection contents are changed ?</p>
  <p>I am thinking of creating some sort of global variable that can have a variable set that MainScreen can observe and then call a function to replace the middleSection's container child.</p>
  <p>Does Flutter have some design patterns for doing this ?  Is this even the right approach and if so then:</p>
  <ol>
  <li>How should global variables be created in Flutter ?</li>
  <li>How can I observe changes on global variables in Flutter ?</li>
  </ol>
  <p>I am familiar with SwiftUI and Combine and ObservableObject and so on - is there a similar construct in Flutter or Dart that can be used to achieve the same thing ?</p>
  <p>Thanks</p>