Original subtitles

Our first little dummy application which is still missing a lot of features,

no worries but our first little dummy application is slowly taking shape. At the moment,

we have a problem though,

once we're done going through our questions, we get an error and that's not really the kind of user experience

you typically would want to deliver.

Instead it would be nicer if we show our column here with questions and answers

as long as we do have questions

but as soon as we exhausted our list of questions, it would be nicer to show some other output, some message

like you did it or a final score or anything like that.

To achieve this, there are two things which I want to do.

So what I want to do is I want to output different widgets

once we exhausted our questions.

So instead of having a column of questions and answers, I want to show let's say a centered text which

says you did it for a start, we can change this later but for a nice start,

why don't we use that.

Hence we kind of need an

if check here for the value we pass to body, right?

Because we either pass this column here with our question and our answers as long as we do have questions

or we show something else,

it's a so-called ternary expression and this is also a feature which exists in other programming languages,

it's basically a single line

if check. Now speaking of that, we haven't really learned about

if checks at all, right?

So let's first of all start with what if means. The if keyword can be used in our code if we want to

run some code conditionally, let's say here in answerQuestion, then we can add the if keyword here and

then a condition between parentheses and then curly braces to surround the code that only should run

if this condition is met

and here our condition could be that we compare the question index to our list of questions or to

the length of this list. So we could check if question index which starts at 0, is smaller than questions

length.

However now we have the problem that questions is a constant which is defined here in the build method

and therefore, I already mentioned that Dart has a feature called scoping, it is scoped to this method,

it's treated as a variable or a constant that's only available in the build method but not in the entire

class.

Well the solution is relatively easy though,

you simply take that entire list and move it out of build and add it as a variable or as a constant

to the overall MyAppState class like this.

Now here however, we get an error that only static fields can be declared as const,

so basically Dart doesn't allow const here on the class level.

There are two solutions, we could add the static keyword in front of that to fix this, now Dart is happy

or you change this to final and maybe just add const here to make it really clear that this list will

never change, both is OK,

I will go for final and then here my const value. Now questions is a property of this class and we can

use it anywhere in a class, including this function. With that, back to this if check. Here,

I'm having a boolean comparison, I'm comparing questions index to the questions length and what this

does is

if the length here,

let's say that is three,

if that is greater than the question index, then this here will return true because I am checking if

question index is smaller than question length and this question has two possible answers,

true or false.

And this is another important type in Dart which I haven't mentioned before,

a boolean. A boolean is true or a boolean is false.

It's a specific type, bool which is built into Dart and it really only has these two values,

true or false and therefore it's awesome for if checks. This here automatically yields a boolean,

this expression here, thanks to this comparison operator, yields

true

if this condition is met and yields false otherwise and we only make it into this

if block here

if this here resolves to true. We could also check for if true, then this code here would always execute

but of course, that's a bit of a meaningless check,

the same would be true for a false, then this code here would never execute.

Instead here, you want to have a comparison or some check that can sometimes return true and sometimes

return false.

Besides the smaller than operator, you also have greater than, smaller than or equal, greater than or equal

or equal,

so the two values have to be equal or not equal.

These are other operators you can use here but here I want to check is the question index smaller than questions

length.

This means that since we have three items in questions, this here always is three because again questions

here is a list with three maps, so questions length always is three.

Question

index starts at zero, then this condition would be true because zero is smaller than three,

so for the first button click, this is true and we make it into the if block and then we change question

index to be 1.

So for the second time we click a button,

this also is true because one is smaller than three,

then we changed to two and therefore for the third time, this is also true.

So what I actually want to do here is I want to print

we have more questions.

However as I just explained, this even is true

if we have no more questions because we check before we change the index. So we should actually move

that to the end of that

so that we first change question index before we check

if we then have more questions.

But with that if we now restart the app, what should happen is that when we click a button, is that we

see we have more questions twice for the first two button clicks but thereafter for the third button

click, we see no output

so if I now scroll up here above the error, we indeed see we have more questions twice but after the

third click, we no longer see that.

Now that's a normal if check,

how can we now bring that down there into our widget tree?