Updating a widget when a global variable changes (Async) in Flutter

Question

I am fairly new to Flutter and I find myself in a hole I have dug.

What I want to accomplish is quite simple. I have a global variable. Let's say var PlayerPointsToAdd. Then I have this Stateful Widget that should update itself everytime this global variable is not zero. I want to be able to call the addPointsToPlayer() from another widget.

So far my understanding of the Stateful widgets end at the setState((){}) which I can only call inside the Stateful widget itself.

The code below is inside a container inside a Stateful widget. Whenever this button is pressed, it calls the setState according to the new list that PlayerScoreBoard.add() returns.

...
child: RaisedButton(
                        onPressed: () {
                          setState(() {
                            if (PointsToAddPlayer != 0) {
                              for (int i = 0; i < PointsToAddPlayer; i++) {
                                PlayerScoreBoard.add(new Icon(
                                    Icons.check_circle_outline,
                                    size: 11));
                              }
                              PointsToAddPlayer = 0;
                            }

I have been reading the documentation and watching the Flutter videos on YouTube so please do not dismiss the question. I am genuinely having trouble understanding this.

I figure I have to use Streams to do this. They seem a bit complicated, but if that's the only way I will use them. Does this mean that I should create a global variable, preferably a class with variables in it and make it stream it's variables to every other widget that needs to update when the variables update. So therefore this ScoreBoard widget must listen to the Stream coming from the global class and update itself. Will this allow me to change the variables in a global class and update the respective widgets to their new states automatically? And does this mean that every widget that relies on variables outside itself must be listening to streams? I would really appreciate an ELI5 to the relationship between Stateful Widgets and Streams.

And because this global data will be updated many times over and over again, using a Future is not possible.

Thank you very much.

I mistakenly said a global class variable. I meant to say something like a Map, where I can have something like gameData.PlayerPoints, or gameData.turn.

Answer 1

You can try ValueListenableBuilder.

import 'package:flutter/material.dart';

final playerPointsToAdd =
    ValueNotifier<int>(0); //TODO 1st: ValueNotifier declaration

void main() => runApp(TestApp());

class TestApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) => MaterialApp(
        routes: {
          '/': (context) => HomePage(),
        },
      );
}

//TODO you can use StatelessWidget either
class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) => Scaffold(
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              RaisedButton(
                // TODO 3rd: change the value
                onPressed: () => playerPointsToAdd.value++,
                child: Text('Increase'),
              ),
              ValueListenableBuilder(
                //TODO 2nd: listen playerPointsToAdd
                valueListenable: playerPointsToAdd,
                builder: (context, value, widget) {
                  //TODO here you can setState or whatever you need
                  return Text(
                      //TODO e.g.: create condition with playerPointsToAdd's value
                      value == 0
                          ? 'playerPointsToAdd equals 0 right now'
                          : value.toString());
                },
              ),
              RaisedButton(
                onPressed: () => playerPointsToAdd.value--,
                child: Text('Decrease'),
              ),
            ],
          ),
        ),
      );
}