Your First Flutter App: Polishing the App

Let’s implement the algorithm we just designed to calculate the difference between the slider and the target value in Dart.

Along the way, you’ll learn about an important new construct in Dart development: the if else statement. Let’s dive right in.

To get started, open your project in progress for this episode or download the starter project for this course. First, we’ll write the skeleton of an if block.

In our the pointsForCurrentRound method, delete all the existing code. You’re going to get a bunch of compile errors. Ignore those for now.

Let’s start by checking to see if a condition is true. We simply write the keyword if and then put the parenthesis around the condition.

if (something is true) 

We put braces around the code we want to run.

if (something is true) {
    then do this
}

We can then put an else clause to check another condition.

} else if (something else is true) {
    then do this instead
}

Finally we can put a catch-all else statement that will only be evaluated if none of the conditions are true.

} else {
    do something if neither of the above are true
}

That’s the basic structure. Now let’s write some actual code. First, we’re going to define three variables. One variable is the maximum score. Since this value isn’t going to change, we’ll make it a constant.

const int maximumScore = 100;

Next we’ll create a variable for the different.

int difference;

Now for the first if statement. We’ll check to see if the current value is greater than the target.

if (_model.current > _model.target) {

}

If it is, we’ll subtract the target from the current value.

if (_model.current > _model.target) {
    difference = _model.current - _model.target;
}

For the else clause, we’ll check to see target is greater than the current value.

else if (_model.target > _model.current) {

}

If that’s the case, we’ll subtract the target from the current.

difference = _model.target - _model.current;;

For our else clause, we’ll set the difference to zero.

} else {
    difference = 0;
}

This series of if blocks ensure that the difference will either be a positive number or zero. For the final statement, return the maximumScore minus the difference.

return maximumScore - difference;

So if the target was ten and you moved the slider to 90, you’d get only twenty points. Now let’s build and run or hot reload. Set the slider, and now you’ll see your points in the popup. Great job!