Why the function setState() is not defined eventhough I have created a Stateful widget?

Question

I am trying to change position of one component by clicking an icon. While trying to change the state of the icon by setState() method,I am getting an error which is telling setState() method is not defined in widget dashboard.

Code

import 'package:flutter/cupertino.dart';
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.all(8.0),
    child: Align(
      alignment: Alignment.centerLeft,
      child: Column(
        mainAxisSize: MainAxisSize.min,
        mainAxisAlignment: MainAxisAlignment.spaceAround,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          Text(
            "Dashboard ",
            style: TextStyle(color: Colors.white, fontSize: 20),
          ),
          SizedBox(height: 10,),
          Text(
            "Messages ",
            style: TextStyle(color: Colors.white, fontSize: 20),
          ),
          SizedBox(height: 10,),
          Text(
            "Utility Bills ",
            style: TextStyle(color: Colors.white, fontSize: 20),
          ),
          SizedBox(height: 10,),
          Text(
            "Funds Transfer",
            style: TextStyle(color: Colors.white, fontSize: 20),
          ),
          SizedBox(height: 10,),
          Text(
            "Branches",
            style: TextStyle(color: Colors.white, fontSize: 20),
          ),
        ],),
    ),
  );
}

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.spaceAround,
            mainAxisSize:MainAxisSize.max,
            children: <Widget>[
            InkWell(
              child: Icon(Icons.menu, color: Colors.white),
              onTap: (){
                setState()// Here is the error with a red underline, The function setState is not defined.
              },
            ),

            Text("My Cards", style: TextStyle(fontSize: 24,color: Colors.white),),
            Icon(Icons.settings, color: Colors.white)
          ],),
        ],
      ),
    ),
  );
}

Answer 1

You should put all your widget function inside widget build.

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 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.spaceAround,
              mainAxisSize: MainAxisSize.max,
              children: <Widget>[
                InkWell(
                  child: Icon(Icons.menu, color: Colors.white),
                  onTap: () {
                    setState(() {
                        // here
                    });
                  },
                ),
                Text(
                  "My Cards",
                  style: TextStyle(fontSize: 24, color: Colors.white),
                ),
                Icon(Icons.settings, color: Colors.white)
              ],
            ),
          ],
        ),
      ),
    );
  }

  Widget menu(context) {
    return Padding(
      padding: const EdgeInsets.all(8.0),
      child: Align(
        alignment: Alignment.centerLeft,
        child: Column(
          mainAxisSize: MainAxisSize.min,
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            Text(
              "Dashboard ",
              style: TextStyle(color: Colors.white, fontSize: 20),
            ),
            SizedBox(
              height: 10,
            ),
            Text(
              "Messages ",
              style: TextStyle(color: Colors.white, fontSize: 20),
            ),
            SizedBox(
              height: 10,
            ),
            Text(
              "Utility Bills ",
              style: TextStyle(color: Colors.white, fontSize: 20),
            ),
            SizedBox(
              height: 10,
            ),
            Text(
              "Funds Transfer",
              style: TextStyle(color: Colors.white, fontSize: 20),
            ),
            SizedBox(
              height: 10,
            ),
            Text(
              "Branches",
              style: TextStyle(color: Colors.white, fontSize: 20),
            ),
          ],
        ),
      ),
    );
  }
}