Your First Flutter App: Polishing the App

At this point, Bullseye calculates a random target value for the player to aim for.

We’ve successfully finished the first item on our to-do list. Coming up next, we’ll need to calculate and show the score which we will do in the remainder of this part.

Right now, the player can move the slider as close as they can, and then tap the “Hit Me” button. That will run the “Hit Me” button’s action, and at that point, we know the target value, and we also know the value of the slider. All that’s left to do is to calculate the score!

But first, where should we put the code to calculate the score?

Well, whenever you find yourself thinking something like, “At this point in the app we have to do such and such,” then it makes sense to create a new method for that. This method will nicely capture that functionality in a self-contained unit of its own.

Imagine you want to add a method that has no input - in other words, no parameters - but does have an output - in other words, a return value.

To do this, you’d simply add a block of code that looks like this before the final curly brace of your class.

Basically you specify a ReturnType, and give the method a name. Then you enter an open and closed parenthesis, which means it has no input - or no parameters.

Inside the curly braces, you put all of your code. When you’re ready to return the output value, you enter the keyword return, then the value you want to return, like 999, 9.14, or true. Let’s try out writing some more methods.

Demo 1

To get started, open your project in progress or download the starter project for this episode. We’re going to create a new method to return the points for this round.

Open up main.dart. Above the showAlert method, create a new method. First, have it return an integer.

int

Next, give it a name. We want to make it a private method, so put an underscore before the name.

int _pointsForCurrentRound()

Now we’ll define the method body. For now, we’ll just return the hardcoded value of 999.

  int _pointsForCurrentRound() {
    return 999;
  }

And that’s it. Now, it’s time to call it. In _showAlert, update the showDialog call to use it.

content: Text('The slider\'s value is ${_model.current}.\n' 
'You scored ${_pointsForCurrentRound()} points this round.'),

Here you are putting string interpolation to practice. First you are adding the current value of the slider, then you call your points method.

Notice we use a backslash. The backslash escapes the apostrophe. This lets dart know that we are using an apostrophe as opposed to ending the sentence.

Also, we have two strings on top of each other. Dart simply combines the two together. This practice helps us in keeping the whole string and the code readable.

Build and run or hot reload the app. Now move the slider, and tap the Hit Me button. The dialog prints out your value followed by the points accrued. Granted, that’s a lot of points, but you’ll fix that in your upcoming challenge.