Your First Flutter App: Polishing the App

Bull’s Eye is coming along well, but there’s a problem: right now, the random target never changes. It’s always the same random value we get when we first start the app.

We’ll fix that by generating a new random target value each time the user taps the Hit me button. Let’s take a look at how we can do this - and in the process, do a little debugging as well.

Open your project in progress or download the starter project for this episode. We’ll get started by opening main.dart. Currently, we’re using the same number target each round. We want it to be random otherwise the game will get boring pretty fast.

We should update the model each time we update our state. Add the following to setState. You can find this in the build method of the GamePageState:

setState(() {
  _model.totalScore += _pointsForCurrentRound();
  _model.target = Random().nextInt(100) + 1;
});

Now run the app. Run through the app a few times. You’ll notice that the numbers aren’t adding up. In fact, we have quite a little nasty logic bug in our app. What’s happening here?

To better understand what happened here, let’s look at the Hit Me button code again:

TextButton(
  child: Text('Hit Me!', style: TextStyle(color: Colors.blue)),
  onPressed: () {
    _showAlert(context);
    setState(() {
      _model.totalScore += _pointsForCurrentRound();
      _model.target = Random().nextInt(100) + 1;
    });
  },
),

Here we have four lines of code that run when the button is tapped and then update the total score and target. However, something subtle happens behind the scenes.

We call showAlert and setState back to back. Those cause the widgets to be redrawn on the screen. Inside setState, we’re setting a new value for the model target, and that new value is being used when we calculate the points to show the user the alert dialog. So the number of points scored being shown to the user in the alert is incorrect.

We need to have better control of the timing of UI updates here. Let’s see how to fix the bug.

Okay, back in main.dart, cut the entire setSet method. We’re going to move it. Once you cut it, paste it in to onPressed in showAlert. Copy over the print statement.

onPressed: () {
  Navigator.of(context).pop();
  setState(() {
    _model.totalScore += _pointsForCurrentRound();
    _model.target = Random().nextInt(100) + 1;
  });
},

And that’s solves our bug. Run your app. Now when the user taps the Hit Me button, it will use the current value from the target value versus using the upcoming value instead.

Nice job!