title: Flutter: preserve state when changing body in Drawer
body: <p>I am creating a Flutter application with a navigation drawer by using the <code>Drawer</code> class of the Material library. The <code>Widget</code> containing the <code>Drawer</code> is a <code>StatefulWidget</code> and the <code>Scaffold</code>'s content is displayed according to the selected item on the navigation drawer. The content is either <code>WidgetOne</code> or <code>WidgetTwo</code>, both maintaining their own state as <code>StatefulWidget</code>s. See the code example below.</p>
  
  <p>At the moment, when I change from one widget to another and back, the whole state of the earlier displayed widget is reloaded. This is not ideal, since both widgets have network calls from an API, and need to be redrawn accordingly.</p>
  
  <h3>What I've tried so far</h3>
  
  <ul>
  <li>Implementing <code>AutomaticKeepAliveClientMixin</code> on both sub widgets, as suggested here: <a href="https://stackoverflow.com/a/50074067/4009506">https://stackoverflow.com/a/50074067/4009506</a>. However, this does not seem to work.</li>
  <li>Using an <code>IndexedStack</code> as suggested here: <a href="https://stackoverflow.com/a/54999503/4009506">https://stackoverflow.com/a/54999503/4009506</a>. This loads all widgets directly, even if they are not yet displayed.</li>
  </ul>
  
  <h3>Code</h3>
  
  <pre><code>class DrawerWidget extends StatefulWidget {
    @override
    State&lt;StatefulWidget&gt; createState() =&gt; _DrawerState();
  }
  
  class _DrawerState extends State&lt;DrawerWidget&gt; {
    Widget _activeWidget;
  
    @override
    void initState() {
      _activeWidget = FirstWidget();
      super.initState();
    }
  
    @override
    Widget build(BuildContext context) {
      return Scaffold(
          appBar: AppBar(title: Text("Drawer demo")),
          drawer: Drawer(
            child: ListView(
              padding: EdgeInsets.zero,
              children: &lt;Widget&gt;[
                ListTile(
                  title: Text("First Widget"),
                  onTap: () {
                    setState(() {
                      _activeWidget = FirstWidget();
                    });
                  },
                ),
                ListTile(
                  title: Text("Second Widget"),
                  onTap: () {
                    setState(() {
                      _activeWidget = SecondWidget();
                    });
                  },
                ),
              ],
            ),
          ),
          body: _activeWidget);
    }
  }
  
  class FirstWidget extends StatefulWidget {
    // [..]
  }
  
  class SecondWidget extends StatefulWidget {
    // [..]
  }
  </code></pre>
  
  <h3>Desired result</h3>
  
  <p><code>WidgetOne</code> and <code>WidgetTwo</code> are only loaded on initial load (after selecting them in the <code>Drawer</code>). Switching to another widget and back should not reload the widget if it was already loaded earlier. The sub widgets should not load all directly, only when they are initially pressed.</p>
  
  <h3>Actual result</h3>
  
  <p>Both <code>FirstWidget</code> and <code>SecondWidget</code> are reloaded and redrawn each time they are selected in the <code>Drawer</code>.</p>