flutter setState 未定义

Question

I have a Widget to create a sidebar menu:

Widget dashboard(context) {
  return Material(
    elevation: 8,
    color: backgroundColor,
    child: Container(
      padding: const EdgeInsets.only(left: 16, right: 16, top: 48),
      child: Column(
        children: <Widget>[
          Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              mainAxisSize: MainAxisSize.max,
              children: [
            InkWell(child: Icon(Icons.menu, color: Colors.white), onTap: () {
              setState(() {
                isCollapsed = !isCollapsed;
              });
            },),
            Text("Corona App", style: TextStyle(fontSize: 24.0, color: Colors.white)),
                Icon(Icons.settings, color: Colors.white),
          ])
        ],
      ),
    )
  );
}

But I keep getting the error that my setState function isn't defined. My main app is a statefullwidget so this is pretty weird. Can anyone help me?

Here is the full code!

import 'package:flutter/material.dart';

final Color backgroundColor = Color(0xFF4A4A58);

class MenuDashboard extends StatefulWidget {
  @override
  _MenuDashboardState createState() => _MenuDashboardState();
}

class _MenuDashboardState extends State<MenuDashboard> {

  bool isCollapsed = true;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: backgroundColor,
      body: Stack(
        children: <Widget>[
          menu(context),
          dashboard(context),
        ],
      ),
    );
  }
}

Widget menu(context) {
  return Padding(
    padding: const EdgeInsets.only(left: 16.0),
    child: Align(
      alignment: Alignment.centerLeft,
    child: Column(
      mainAxisSize: MainAxisSize.min,
      mainAxisAlignment: MainAxisAlignment.spaceAround,
      crossAxisAlignment: CrossAxisAlignment.start,
      children: <Widget>[
      Text("Home", style: TextStyle(color: Colors.white, fontSize: 20),),
      SizedBox(height: 10.0),
      Text("Brochures", style: TextStyle(color: Colors.white, fontSize: 20),),
        SizedBox(height: 10.0),
      Text("Visitekaartje", style: TextStyle(color: Colors.white, fontSize: 20),),
        SizedBox(height: 10.0),
      ]
     )
    )
  );
}

Widget dashboard(context) {
  return Material(
    elevation: 8,
    color: backgroundColor,
    child: Container(
      padding: const EdgeInsets.only(left: 16, right: 16, top: 48),
      child: Column(
        children: <Widget>[
          Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              mainAxisSize: MainAxisSize.max,
              children: [
            InkWell(child: Icon(Icons.menu, color: Colors.white), onTap: () {
              setState(() {
                isCollapsed = !isCollapsed;
              });
            },),
            Text("Corona App", style: TextStyle(fontSize: 24.0, color: Colors.white)),
                Icon(Icons.settings, color: Colors.white),
          ])
        ],
      ),
    )
  );
}

with the error message: 'The function setState isn't defined'

Answer 1

setState is a member of State class, which means it can only be called inside a class that extends a State class of a StatefulWidget . If your class is extending StatelessWidget , you can't called state members/methods provided by the super class, including setState , initState and dispose methods.

For the answer, you can't call setState outside of the State class, if possible, put the widget methods inside the class, or pass setState function as a parameter to those methods.

Answer 2

setState can only called inside StatefulWidget . So if I got it right, you use setState in Widget dashboard or menu widgets. It can't work, because those widgets in outside of class. Try to put widgets inside the class