Your First Flutter App: Polishing the App

We’ve done a bit of coding this episode so it’s time for a challenge. Your challenge this time is to pause the video, and modify Bull’s Eye to keep track and report the current round of the game.

This is a review of even more techniques you’ve learned in this course. To do this, you have to do two things:

1. Increment the round whenever a new round starts
2. Display the current round number in the appropriate label

This is very much like what we did in the previous episode, so if you want a hint or inspiration, review the previous episode. Now pause the video and give it a try.

How’d that challenge for you? If you got stuck, feel free to follow along. First, I have main.dart open. Scroll down to the okay button where we last added the SetState method call. You can find this in showAlert method.

At the bottom of SetState, increment the round number.

_model.round += 1;

Now to show the change. Open up score.dart. We already have a score text widget hard coded to 9999. Let’s change that now to use our round variable instead.

Text('Round: '),
Text('$round'),

We’re getting the same compile error that we got when we updated the score. We just need to make the same adjustments. That is, we need to remove the const modifier from the array and make the other widget a constant.

children: <Widget>[
    const Text('Round: '),
    Text('$round'),
],

Now run the app, and play through a couple of rounds. You’ll notice the round is properly displayed.