title: flutter - change child widget with drawer child widget onTap
body: <p>I am <code>flutter</code> beginner.
  I have my main page split into 2 custom widgets, <code>top</code> widget and <code>page</code> widget. And I have a drawer with a few buttons to change the content of the <code>page</code> widget.</p>
  
  <p>I followed <a href="https://www.youtube.com/watch?v=x3VvE6WukeY" rel="nofollow noreferrer">this tutorial</a> and try to swap the widget as per click on the buttons. </p>
  
  <pre><code>class MyHomePage extends StatefulWidget {
    MyHomePage({Key key, this.title}) : super(key: key);
  
    final String title;
  
    @override
    _MyHomePageState createState() =&gt; _MyHomePageState();
  }
  
  class _MyHomePageState extends State&lt;MyHomePage&gt; {
  @override
  Widget build(BuildContext context) {
  var currentpage = 'landing';
  
      Widget pageWidget;
  
      switch (currentpage) {
        case 'landing':
          pageWidget = new Landing();
          break;
        case 'visitors':
          pageWidget = new Visitors();
          break;
        default:
      }
  
  return Scaffold(
  body:new Container(
  child: Container(
      child: Column(
        children: &lt;Widget&gt;[
          Header(), ///&lt;-- widget declared in separated .dart file
          pageWidget
        ],
      )
      )
  drawer: Drawer(
          child: ListView(
            children: &lt;Widget&gt;[
              DrawerHeader(
                child: Text(
                  "UserN3",
                  style: TextStyle(
                      fontSize: 20,
                      fontWeight: FontWeight.bold,
                      color: Colors.black54),
                ),
              ),
              new GestureDetector(
                onTap: (){
                  print("landing");
  
                  Future.delayed(Duration.zero,(){
                    setState(() {
                      currentpage = 'landing';
                    });
                  });
                },
                child: new Text("landing"),
              ),
              new GestureDetector(
                onTap: (){
                  print("visitors");
                  Future.delayed(Duration.zero,(){
                    setState(() {
                      currentpage = 'visitors';
                    });
                  });        
                },
  
                child: new Text("Visitors"),
              ),
            ],
          ),
        ),
  );
  }
  </code></pre>
  
  <p>so the gist is:</p>
  
  <p>I have <code>switch case</code> in the build, which will change the <code>pageWidget</code> accordingly based on <code>currentpage</code>, which will be changed by buttons in the drawer.</p>
  
  <p>But keep getting the same error:</p>
  
  <blockquote>
    <p>Another exception was thrown: setState() or markNeedsBuild() called when widget tree was locked.</p>
  </blockquote>
  
  <p>As you can see I added <code>Future.delayed()</code> based on <a href="https://stackoverflow.com/questions/45409565/flutter-setstate-or-markneedsbuild-called-when-widget-tree-was-locked?rq=1">this suggestion</a> but the error persist.</p>
  
  <p>After some researching, I got a feeling that it related to how <code>drawer</code>  deal with <code>setState()</code>, but I am not sure how.</p>
  
  <p>Obviously I still not getting how <code>flutter</code> work in terms of <code>build</code> and <code>state</code>. </p>
  
  <p>What seems to be the problem and how can I resolve this?</p>