Your First Flutter App: Polishing the App

At this point, your game is fully playable. But there’s still some room for improvement. Obviously, the game is not very pretty yet and you will get to work on that soon. But in the mean time, there are a few small areas where you can add some polish.

Currently, the alert view still says “Hello, World!”. You could give it the name of the game, Bull’s Eye, but I have a better idea. What if you change the title depending on how well the player did?

If the player put the slider right on the target, the alert could say: “Perfect!” If the slider is close to the target but not quite there, it could say, “You almost had it!” If the player is way off, the alert could say: “Not even close…” And so on. This gives the player a little more feedback on how well they did.

Now that you’ve learned about variables, strings, and if statements, this should be a breeze. Let’s try it out!

To get started, open your project in progress or download the starter project for this episode. Open up main.dart We’re going to create a new private method to the alert title that returns a string. In the GamPageState class, we’re going to add a new method just above the showAlert method. We could scroll all the way down, but open up the Outline tab in Visual Studio Code. You’ll see its break down our classes. Scroll down to the GamePageState and select the showAlert method. The editor will jump down to that method. That’s pretty handy. Now add the following:

String _alertTitle() {

}

Next, we’ll get the difference by doing a little calculation.

var difference = (_model.target - _model.current).abs();

At this point, we’ll declare a title variable and set it in an if block.

String title;
if (difference == 0) {
    title = "Perfect!";
} else if (difference < 5) {
    title = "You almost had it!";
} else if (difference <= 10) {
    title = "Not bad.";
} else {
    title = "Are you even trying?";
}

Finally, we’ll return the title.

return title;

Now in the alert dialog, we’ll use our new method.

return AlertDialog(
  title: Text(_getAlertTitle()),

Now if we run the app, we can play around with the slider and see all the different variations of our alert titles.

This looks great - but something doesn’t really smell right. Not an actual smell, but something known as code smell. What is code smell? I’m glad you asked.

Whenever you find repeated lines of code line your app, that’s a bad code smell. Programmers prefer to write each line of code only once and then reuse it in multiple places. This is an approach that programmers call “Don’t Repeat Yourself,” which is often shortened to D-R-Y, or DRY.

The rationale behind DRY is to make code easier to read and change and to make it less prone to errors when updating your code. For example, if you decided later that you wanted to change the way that you convert the slider’s value, you’d have to change it in one spot if you were using DRY code, instead of remembering to fix it in both spots with the previous code.

In our case, we are calculating the difference in lots of different places in our code. If we ever change the calculation formula, we’ll need to find all those places. Let’s get rid of our code smell.

Okay, the first thing we’ll do is create a new method to calculate the difference. We’ll call this differenceAmount and it will act something like a property. Add the following:

int _differenceAmount() {
    return (_model.target - _model.current).abs();
}

This is our new difference amount. Except, it’s only one line. Dart actually provides something known as arrow syntax to make this a simple one line function.

Change the method to the following:

int _differenceAmount() => (_model.target - _model.current).abs();

All we did was condense the method to a single line using the arrow operator as a way to return a value.

Okay, now let’s update the rest of the code to use. We’ll start first with pointsForCurrentRound.

  int _pointsForCurrentRound() {
    var maximumScore = 100;
    var difference = _differenceAmount();
    return maximumScore - difference;
  }

Next, we’ll update our alertTitle.

  String _alertTitle() {
    var difference = _differenceAmount();

And with that, our code smell is gone. Nice work!