Unable to get Context update in Flutter even after updating the respective variables

Question

In the Below code even though My var Light and var Fan are updated on a regular intervals the overall text content var str on screen is not updated. I am a beginner to flutter sorry if the question sounds too dumb 😉 I did keep in mind about the stateless and stateful widget stuff i am just unable to figure out why its not updating on screen.

class _MyHomePageState extends State<MyHomePage> {
var Fan = "Off";
var Light = "Off";
var str = "";
int fanState, lightState;
final firestoreInstance = Firestore.instance;
final databaseReference = Firestore.instance;
@override
void initState() {
// TODO: implement initState
   super.initState();
   getData();
}

@override
  Widget build(BuildContext context) {
    return ThemeSwitchingArea(
      child: Scaffold(
        drawer: Drawer(
          child: SafeArea(
            child: Stack(
              children: <Widget>[
                Align(
                  alignment: Alignment.topRight,
                  child: ThemeSwitcher(
                    builder: (context) {
                      return IconButton(
                        onPressed: () {
                          ThemeSwitcher.of(context).changeTheme(
                            theme: ThemeProvider.of(context).brightness ==
                                    Brightness.light
                                ? darkTheme
                                : lightTheme,
                          );
                        },
                        icon: Icon(Icons.brightness_3, size: 25),
                      );
                    },
                  ),
                ),
              ],
            ),
          ),
        ),
        appBar: AppBar(
          title: Text(
            'Home Control',
          ),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            children: <Widget>[
              Text(
                str,
                style: TextStyle(fontSize: 30),
              ),
              Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  ThemeSwitcher(
                    builder: (context) {
                      return Checkbox(
                        value: ThemeProvider.of(context) == darkBlueTheme,
                        onChanged: (needDarkBlue) {
                          ThemeSwitcher.of(context).changeTheme(
                            theme: needDarkBlue ? darkBlueTheme : lightTheme,
                          );
                          triggerLight();
                        },
                      );
                    },
                  ),
                  ThemeSwitcher(
                    builder: (context) {
                      return Checkbox(
                        value: ThemeProvider.of(context) == halloweenTheme,
                        onChanged: (needBlue) {
                          ThemeSwitcher.of(context).changeTheme(
                            theme: needBlue ? halloweenTheme : lightTheme,
                          );
                          triggerFan();
                        },
                      );
                    },
                  ),
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }

  void getData() {
    databaseReference
        .collection("Home")
        .getDocuments()
        .then((QuerySnapshot snapshot) {
      snapshot.documents.forEach((f) {
        fanState = f.data['Fan'];
        lightState = f.data['Light'];
        if ((fanState == 1) && (lightState == 1)) {
          Fan = "On";
          Light = "On";
        } else if ((fanState == 0) && (lightState == 1)) {
          Fan = "Off";
          Light = "On";
        } else if ((fanState == 1) && (lightState == 0)) {
          Fan = "On";
          Light = "Off";
        } else {
          Fan = "Off";
          Light = "Off";
        }
        str = "Fan Status: $Fan" + "\n" + "Light Status: $Light";
      });
    });
  }

  void triggerFan() {
    print("Fan Triggered");
    if (fanState == 1) {
      databaseReference
          .collection("Home")
          .document("myroom")
          .updateData({'Fan': 0}).then((value) {
        print("Status Updated Off");
        Fan = "Off";
        fanState = 0;
        getData();
      }).catchError((error) => print("Failed to add user: $error"));
    } else {
      databaseReference
          .collection("Home")
          .document("myroom")
          .updateData({'Fan': 1}).then((value) {
        print("Status Updated On");
        Fan = "On";
        fanState = 1;
        getData();
      }).catchError((error) => print("Failed to add user: $error"));
    }
  }

  void triggerLight() {
    print("Light Triggered");
    if (lightState == 1) {
      databaseReference
          .collection("Home")
          .document("myroom")
          .updateData({'Light': 0}).then((value) {
        print("Status Updated to Off");
        Light = "Off";
        lightState = 0;
        getData();
      }).catchError((error) => print("Failed to add user: $error"));
    } else {
      databaseReference
          .collection("Home")
          .document("myroom")
          .updateData({'Light': 1}).then((value) {
        print("Status Updated to On");
        Light = "On";
        lightState = 1;
        getData();
      }).catchError((error) => print("Failed to add user: $error"));
    }
  }
}

Answer 1

Please use this Code to update your state of widgets in Statefull Class

setState(() {
   //your Code Here
});

To know more about the Stateless and Staefull Class Please see this link from flutter.

For A simple Example, If I have a Statefull Class and have I am having a counter variable in that class set to 0 :

int counter = 0;

But, on some method call I want to increase that counter variable by 1, then I have to change the state for that counter variable and use this line of code to change its state.

setState(() {
   counter = counter + 1;
});

Now, This state change of counter variable will effect on your UI too, and You will see that your UI is also updated with the changed counter value.