How can I create a sidebar menu in Flutter such that selecting a menu changes the main panels widget?

Question

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.

Here is the basic main screen

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: <Widget>[leftSection, middleSection, rightSection],
        ),
      ),
    );
  }
}

Here is the Sidebar

class Sidebar extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Drawer(
      child: ListView(
        padding: EdgeInsets.zero,
        children: <Widget>[
          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: () => {},
          ),
          ListTile(
            leading: Icon(Icons.verified_user),
            title: Text('Profile'),
            onTap: () => {Navigator.of(context).pop()},
          ),
          ListTile(
            leading: Icon(Icons.settings),
            title: Text('Settings'),
            onTap: () => {Navigator.of(context).pop()},
          ),
          ListTile(
            leading: Icon(Icons.border_color),
            title: Text('Feedback'),
            onTap: () => {Navigator.of(context).pop()},
          ),
          ListTile(
            leading: Icon(Icons.exit_to_app),
            title: Text('Logout'),
            onTap: () => {Navigator.of(context).pop()},
          ),
        ],
      ),
    );
  }
}

How can I wire things up such that the MainScreen middleSection contents are changed ?

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.

Does Flutter have some design patterns for doing this ? Is this even the right approach and if so then:

1. How should global variables be created in Flutter ?
2. How can I observe changes on global variables in Flutter ?

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 ?

Thanks

Answer 1

Renavigate to main page with pushReplacement and pass data which you wanna change in main screen:

Navigator.pushReplacement(context, MaterialPageRoute(builder: (BuildContext    
  context) => MainScreen(
  // pass your data to be changed on main screen
  )));
}