flutter - change child widget with drawer child widget onTap

Question

I am flutter beginner. I have my main page split into 2 custom widgets, top widget and page widget. And I have a drawer with a few buttons to change the content of the page widget.

I followed this tutorial and try to swap the widget as per click on the buttons.

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
@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: <Widget>[
        Header(), ///<-- widget declared in separated .dart file
        pageWidget
      ],
    )
    )
drawer: Drawer(
        child: ListView(
          children: <Widget>[
            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"),
            ),
          ],
        ),
      ),
);
}

so the gist is:

I have switch case in the build, which will change the pageWidget accordingly based on currentpage, which will be changed by buttons in the drawer.

But keep getting the same error:

Another exception was thrown: setState() or markNeedsBuild() called when widget tree was locked.

As you can see I added Future.delayed() based on this suggestion but the error persist.

After some researching, I got a feeling that it related to how drawer deal with setState(), but I am not sure how.

Obviously I still not getting how flutter work in terms of build and state.

What seems to be the problem and how can I resolve this?

score 1 · Answer 1 · answered Apr 25 '19 at 04:01

You should declare your currentPage variable outside your build method, because every time you call setState the build method is called again and the variable doesn't change.

So move this :

Widget build(BuildContext context) {
  var currentpage = 'landing';

To this:

var currentpage = 'landing';

Widget build(BuildContext context) {

flutter - change child widget with drawer child widget onTap

1 Answers1