Integrating the Dice into our Game

We are going back into the main.dart file. We need to import the dice.dart file we created in the previous part.

We’ve already removed the unnecessary comments. Next we’re going to build the app so we can see what we need.

We’re going to remove the counter and the floating action button as well as all associated content with that.

We’re then going to remove the two text fields in the content section.

Creating Widget Instances

We’re going to need to access the widgets, so we get their values easily.

So inside the _MyHomePageState class we’re going to add a _left and _right named objects of the Widget Dice that we previously created. We will then insert the object into the the layout of our app.

  var _left = new Dice();
  var _right = new Dice();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[_left, _right],
        ),
      ),
    );
  }

Let’s test. You should see two numbers, side by said, and you can click on them to “roll” the dice.

Now let’s change this so clicking on one button will change them both, just as you would roll them.

So we’re going to add a Column, which will contain our existing row, and and add a new child for a button to be pressed to roll the two element.

body: Center(
        child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[_left, _right],
              ),
              Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Center(
                      child: TextButton(
                          onPressed: _rollDice, child: Text("ROLL the DICE!")))
                ],
              )
            ]),
      )

Rolling the Dice

Next we will need to create a function _rollDice. This will go inside of the current widget and call the roll function of both the _left and _right dice.

The only problem is, that the dice’s roll method is private, so we will need to rename it to roll() so it can be called.

void _rollDice() {
    _right.roll();
    _left.roll();
  }

However, if you try this, you will get an error. That’s because you cannot directly call a child’s method. Flutter highly discourages this. Instead, we will need to use keys as a way to pass messages.

To do this, we need to do two things. First, we need to go into the dice.dart file and change _DiceState to DiceState, so we can access the state object, instead of it being private. The second thing is we will need to create a GlobalKey which is used to pass those messages.

GlobalKey<DiceState> _leftKey = GlobalKey();
GlobalKey<DiceState> _rightKey = GlobalKey();

This code will go where the original instance variables for _left and _right went. We’re going to move those into the build method, and pass the keys to the constructors.

    var _left = new Dice(key: _leftKey);
    var _right = new Dice(key: _rightKey);

When we do this, we create a method to allow us to access the current state property, which allows us to then call any public method, such as roll().

  void _rollDice() {
    _rightKey.currentState?.roll();
    _leftKey.currentState?.roll();
  }

Notice we use the ?. after currentState, because currentState might be null, and we don’t want to have an error if it is. This protects us.

Getting the Total Score

What if we want to get the total score of our children however? Well we have a getValue() function which we can call on our dice objects. This returns their current value.

However, since nothing is quite that simple, we will need to get those values, which, if you remember from causing the roll, may be null. When adding two potentially null values together Flutter has issues, so we need to store them in nullable integers, and then add those two values.

void calcScore() {
    int? l = (_leftKey.currentState?.getValue());
    int? r = (_rightKey.currentState?.getValue());

    setState(() {
      _totalScore = l! + r!;
    });
  }

This function seems pretty straight forward for getting the values, and then passing them to the _totalScore variable. Now you just have to add one more row to your screen to display that value.

Row(
    mainAxisAlignment: MainAxisAlignment.center,
    children: [Text("Score: $_totalScore")],
)

Integrating the Dice into our Game was originally found on Access 2 Learn