All language subtitles for 21. Updating Widget Data (Or Using StatelessWidget Incorrectly)f

Now for a start, to change something on screen, let's make sure that we output a real question here.

We got two questions here in this list of questions

and I want to start with my first question here

at the beginning of the app but once we pressed a button and for the moment, it doesn't matter which

button we pressed,

I want to switch to that second element here. Now for that,

let's first of all start about putting the first element. So I don't want to hardcode

my question down there into this text widget but instead, I want to use the first element of my questions

list. To do that,

we first of all have to refer to questions, questions is the name of the variable by adding it here

but now questions is a list of strings and I only want to take the first string and output it. To do

that, Dart gives us a syntax for accessing the different items in a list with their different indexes.

Each item here has an index, the index starts at zero for the first item,

that's important, not at one but at zero

and we can access the different elements by their index.

There are two ways of doing that,

you can add a dot here after your variable names and now since questions

in the end holds a list which is an object,

this has quite a lot of methods which Dart gives us automatically because list is a default object built

into Dart and it's a more complex object as you can clearly tell with a lot of built-in methods.

Now we'll use some of these methods throughout the course, here one method we could use is elementAt

and now here we could pass in an index, which if you hover over that, needs to be an integer

and if that is zero for example, you get access to the element at the index 0 which is the first element.

So if I do that and I save this, you see what's your favorite color here

because what's your favorite color is the first element here and therefore, it has the index 0.

If I pass one in here,

we would print what's your favorite

animal, animal should be the text here of course.

If I pass two in here, which is index two, then we actually get an error here right.

I get an error that we scroll up, that we have a range error here, invalid value not in range 0 to

1, so that's the range we have and we try to use two and that's in the end the error I get here because I try

to access the element at an index which we don't have in here because the index at the element 2 would

be the third element in this array and we only have two.

So that's one way of doing this but there is a shorter way, instead of using elementAt,

you can add square brackets after the variable name and then enter your index number there.

That's doing the exact same thing but it's a bit shorter and therefore, it's the syntax you typically

use. This now accesses the first element in the questions list and therefore this

what's your favorite color question

and hence this, what we now see here.

So that's nice,

however it would be nice if we could change that index which we're accessing dynamically when we press

a button. To make that happen, we can add a new variable, now however not inside of the build method here

because then it would essentially be reset and change every time build runs and actually Flutter executes

build a couple of times, it always executes build when it needs to rebuild the interface on the screen,

instead

I want to add it as a class wide variable. So here inside my class, I can add a new variable at the top

and that could be question

index

which is 0 initially.

Now we could also replace var with int but since I initialize it with 0, Dart is able to infer this and

hence using var is a better practice.

Now by adding this property here,

so a class wide variable is called a property as you learned, we can use it here in answerQuestion and

I could take my question index and set it equal to one or simply to question index plus one to use

the old value that's stored in question index and then add one to it and then after this calculation

is done, that's stored back into question index.

So the old value of question index will be overriden with the old value plus one

and I can remove answer chosen now.

So we could update question index here and now here when we output a question, instead of using 0, we

could refer to question index here.

So the index which we use to access an element in our questions list is set dynamically, it is 0 initially

and we increment it to 1 after a question was answered and right now answerQuestion is only connected

to the first button.

So when we press the first button, we should change question index and therefore,

we should also see our question change here, to the second question which is one for our favorite

animal. Let's also print question index here to see whether that works. If we save this,

it should rebuild,

you can always manually press that flash button here to do a hot reload or if somehow your app got stuck,

you do a hot restart to fully restart your app which takes a tiny bit longer but make sure that you

really rebuild your app with the latest piece of code and now if press answer 1, seems to work.

If I go back, I see one and two because I pressed it twice but if I only press it once, let me rebuild

this again to really prove that this only executes once,

so if I now press answer 1, I see one here.

So this works

but what you also see is that the text didn't change,

it's still what's your favorite color,

it did not change to what's your favorite animal.

So what's wrong here?

Do we have an error in our code?

No,

the problem is and that's also kind of signaled here by the green squiggly lines

but that's a bit too cryptic

but the problem is in the end that we're trying to change some internal state of this widget and for that

of course, we need to understand what state is and then we'll understand what the remedy is.